묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Three.js 3D 인터랙티브 바로 시작하기
버전에 대해서....
cdnjs 에서 보면 three.js 버전이 많이 있더라구요,강사님이 선택하신 버전 이외 것을 연결하면 화면이 안뜨고 강사님 영상에 있는 r128 인가를 하면 뜨는데, 혹시 버전의 차이가 있을까요?최신버전이 아닌 많이 사용하는 버전인건지해서요,,,,
-
해결됨Three.js 3D 인터랙티브 바로 시작하기
이미지가 안나옵니다.
갤러리에서 아래 연결주소가 잘못된건지 이미지가 하나도 안나옵니다. const imageMap = new THREE.TextureLoader().load( "https://source.unsplash.com/collection/" + i );
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
hover pulse animation 관련해서 질문있습니다!
mouseenter 마우스 이벤트를 할때 pulse.start(); 대신 pulse.restart();로 처음시작하게 하는것처럼 실습 때 mouseleave 마우스가 벗어날 때 자연스럽게 하려면pulse.pause();gsap.to('button',{scale:0.8,duration:0.4})두개를 사용해서 어색하지 않게 구현했는데요, pulse.pause();gsap.to('button',{scale:0.8,duration:0.4})대신 pulse.reverse();를 사용해도 동일하게 어색하지 않게 줄 수있는 효과인건가요? 차이점은 없는건지 궁금합니다.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
어몽이를 stage의 100% 로 보낼 수 있는 방법이 궁금해요!
키프레임 wrap around 실습하다가 궁금해서 여쭤봐요!해설해주신 대로 어몽이를 x를 420으로 하면부모인 stage 가로사이즈 500px이 바뀌면 어몽이에 적용한 420도 같이 바뀌어야 해서부모 사이즈를 기준으로 하려면 left나 right 속성을 사용하는 방법 밖에 없을까요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
아래 질문 (토이스토리 title에 있는 button에 링크 거는 법)에 대한 해결방법이 이게 맞을까요? 더 좋은 방법이 있으면 알려주세요
navList.forEach((li, index)=>{ const roma = ['I', 'II', 'III']; const arabic = ['1','2','3'] const linkAddr = ['naver.com','google.com','inflearn.com']; // button 링크 주소 li.addEventListener('click',()=>{ if(!playing) { next = index; if(li.classList.contains('active')) return; for(let i=0;i < navList.length; i++) { navList[i].classList.remove('active'); } li.classList.add('active'); const addr = /*html*/`location.href='http://${linkAddr[next]}'`; // button 속성 값 const tl = gsap.timeline() .add(leave[current].play()) .add(titleLeave.play(),'-=1') .set('.title h1',{text:`toystory ${roma[index]}`}) .set('.title p',{text:`토이스토리 시즌 ${arabic[index]}`},'<') .add(enter[next].play()) .add(titleEnter.play()) tl.eventCallback('onComplete',()=>{ const btnLink = document.querySelector('.title button'); // button 요소 가져오기 btnLink.setAttribute('onclick',addr); // button의 onclick 속성 추가 current = next; playing = false; }) playing = true; } }) }) window.addEventListener('load',()=>{ const tl = gsap.timeline() .add(enter1.play()) // enter 타임라인 실행 .add(titleEnter.play()) tl.eventCallback('onComplete', () => { const btnLink = document.querySelector('.title button'); //처음 실행시 button에 속성값 추가 btnLink.setAttribute('onclick',"location.href='http://naver.com'"); //처음 실행시 button에 속성값 추가 playing = false; }) // page03()[1].play() // leave 타임라인 실행 })
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
토이스토리 practice에서 "WATCH NOW"버튼에 대한 href 속성값을 변경하는 방법
안녕하세요. 4강 토이스토리 practice에서 강의 중 선생님께서 "WATCH NOW" 버튼의 href?값을 페이지에 따라 변경할 수 있다고 하셨는데요. gsap을 이용해서 변경할 수 있는 방법이 있는 건지요?아님 자바스크립트 함수 안에서 직접 세팅하는 걸까요?
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
4.6강 초기 로딩 속도 케이스 비교
4.6강 초기 로딩 속도 케이스 비교 세가지 케이스를 적어주셨는데 case1, case3이 같은 건가요?제가 이해를 못한 건가 싶어서 세 번 돌려봤는데 같아 보여서요.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
motionpath 플러그인에서 align의 자세한 역할 궁금합니다
안녕하세요 강의 잘 듣고 있습니다! 공식 문서 보면서 복습하는 중인데 공식문서 예제에는 motionPath:{ path: "#path", align: "#path", autoRotate: true, alignOrigin: [0.5, 0.5] } 처럼 path와 align이 같은 요소로 지정되어 있습니다.그래서 codepen을 이용해서 강의 내용처럼align에 움직이는 요소를 지정해봤는데 경로에서 붕 떠서 이동합니다. 마찬가지로 강의 샘플 코드도 align에 경로를 넣어서 한번 테스트 해봤는데 이번에는 호랑이가 너무 붕 떠서 이동합니다. 강의 내용에서는 align에 움직이는 타겟을 넣으면 된다고 하셨는데이건 svg 코드 구성에 따라서 다른건가요??? 공식 문서에 따르면 움직이는 요소를 경로에 맞춰 정렬 해주는게 align의 역할이라고 하는데추상적인 설명인 것 같아서 잘 이해가 안됩니다..! align에 대해 제가 정확히 이해하고 있는게 맞는지,그리고 align에 들어가는 요소는 정확히 어떻게 구별해 넣는게 좋은지 궁금합니다
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
Sidebar & Header 컴포넌트 등 레이아웃 설정 방식
강의에서 레이아웃을 담당하는 Sidebar, Header 컴포넌트를 만들때 Props으로 children을 받고 렌더링 하는 방식으로 만들었는데 이렇게 만든 이유가 있을까요?지금까지 진행한걸 계층별로 생각해보면최상위 Root->Sidebar->Header->... 등 형제 노드는 없고 자식 노드 형태로 계속 깊어지는구조.------------아래의 방법과 비교해서 궁금합니다.아래 코드와 동일하지 않더라도,Sidebar, Header 컴포넌트가 children과 분리된 구조.<body> <Sidebar/> <div> <Header/> <main>{children}</main> </div> </body>
-
미해결웹 애니메이션을 위한 GSAP 가이드 Part.03
안녕하세요 ScrollSmoother에 대해 질문드릴게요
안녕하세요 ScrollSmoother에 대해 질문드릴게요! 이번 강의 너무 잘보고 있는데 ,다른분의 질문을 보고 ScrollSmoother가 무료가 되었다라고 말씀하셔서 활용해보려고 합니다. 사용법이 ID를 레퍼하여 자식 div를 tramsform으로 따라오는식으로 스무디 효과를 주는건 확인했습니다 근데 만약에 페러렉스 효과를 백그라운드 이미지에 반영해보려니 tramsform의 크기를 따라가는지 background fixed같은건 전혀먹히지가 않는거같네요 .. 스크롤링하면 부드럽게 스무스 하게 되면서 bg의 포지션도 살짝움직이는 식으로 구현해보려 했는데 혹시 방법이 없을지 질문드립니다. ㅜ
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
GSAP 플러그인의 무료화 관련
안녕하세요, 파트1부터 3까지 완강한 1인입니다. 파트3을 듣던 당시에는 GSAP ScrollSmoother 플러그인이 유료였는데, 얼마전에 모든 플러그인이 무료로 전환되었더라고요~ 그래서 강의 당시에 일부 플러그인들을 대체해서 강의해주신 부분이 있었는데,혹시 해당 부분에 대해서 추후 내용이 업데이트될 예정이 있을지 문의드립니다. ps. 모든 플러그인이 무료로 전환되면서 좀더 다양한 애니메이션이 가능해지니, 추후 파트4도 매우 기대가 되는 중입니다.
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
소스코드 파일이 강의랑 같나요?
01_CDN 이라는 폴더가 소스코드 다운로드 받았을 때 아무리 찾아도 없습니다..
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
barba와 ScrollSmoother 사용했을 때 스크롤 업데이트
Single Page Application(3) 수강 중barba와 gsap ScrollSmoother 사용할 때는 scroll update를 어떻게 해야되나요?
-
미해결애플 웹사이트 인터랙션 클론!
[크로스브라우징] safari에서 동영상 영역 미노출
안녕하세요.공유해주신 자료를 보다가 보니 사파리 브라우저에서는 첫번째 동영상 영역이 크롬 브라우저와 다르게 영상이 없거나, 화면 스타일이 다르게 노출되는 것 같아서요. 오류인지 문의드립니다.apple-clone-v11/@simple-version/index.htmlapple-clone-v11/@ipad-stroke-effect/index.html
-
해결됨애플 웹사이트 인터랙션 클론!
항상 궁금했는데 크림슨 컬러 선택하셨을때 활용했던 사이트 좀 알려주세요~
항상 궁금했는데 크림슨 컬러 선택하셨을때 활용했던 사이트 좀 알려주세요~
-
미해결Three.js 3D 인터랙티브 바로 시작하기
threejs 사이트 들어가면 선생님과 같은 코드가 안나옵니다ㅠ
코드를 복붙해보려해도, 현재는html과 js가 분리된 코드만 나오고,three.js파일은 사이트에서 다운로드한거 폴더 찾아봐도 없네요수업자료 주신 파일을 그냥 소스코드처럼 이용하면 되는건가요
-
미해결애플 웹사이트 인터랙션 클론!
vue강의는안하시나요?!
선생님 vue강의는 안하시나여?너무 잘가르쳐 주셔서 프론트엔드쪽도 선생님한테 배우고싶네요!ㅎㅎ
-
미해결PixiJS로 만드는 2D 그래픽과 게임 with Cursor(AI)
선생님 안녕하세요 질문있습니다.
아무도 질문을 안남긴것으로보아 이 강의는 인기가 없나보네요.. 저는 강의 출시하시자마자 구매해놓고 묵혀놨다가 이제야 조금씩 꺼내보고있는데요 궁금한게있습니다.cursor에게 시키면서 코드를 짜고계신데, 제가 솔직히 이해를 못하겠는 코드라면 어떻게해야하나요? 취미로 하는거라면 괜찮은데 이걸로 밥벌어먹고 살고있다면요?..ㅠㅠ 앞으로의 공부방향과 중점을 어디에 둬야하는지를 잘 모르겠습니다. 그리고 저는 애플클론코딩 강의도 들었던 학생인데요, framer-motion이라는 아무 강력한 css 라이브러리가있잖아요? 이걸 사용하면 애플클론코딩에서했던 그런것들을 간소화시키고 더 쉽게 구현할 수 있는거같습니다.선생님도 framer-motion 자주 사용하시나요?또 유튜브는 안하시나요? 리액트+framer-motion으로 인터랙티브효과 주는것도 한번쯤 보여주셨으면 좋겠습니다.
-
미해결Three.js로 1인칭 3D 웹사이트 만들기
개발자도구에서 모바일 버전으로 테스트할때
사진처럼 터치를 하고 드래그를 하면 카메라가 돌아가는것이 아니라 웹 화면 자체가 끌려 가는데..html, canvas, body 에 touch-action 옵션을 none으로도 줘보고touch 이벤트들에 preventDefault도 줘보고 했지만 해결이 되질 않습니다.. 터치 드래그를 하면 moveMentX와 moveMentY의 값은 잘 출력되는데 카메라가 회전을 하지 않습니다.데스크탑에서 mousemove는 제대로 카메라가 돌아가는데, 모바일버전에서 touchmove는 카메라가 돌아가질 않네요.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
barba.js 사용시 페이지이동
barba.js 설정후 페이지이동시 gsap유료플러그인인 ScrollSmoother.js 사용법도 알려주실 수 있으실까요? 아무리 문서들 찾고 ai한테 질문해도 페이지이동시 스무스스크롤효과가 풀리는게 해결이 안되네요..
