inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

duration과 stagger

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.02

안녕하세요 선생님! 수업 즐겁게 잘 듣고 있습니다! 문득 duration과 stagger 사이의 궁금증이 생겨 문의드립니다. 제가 이해한 바로는 duration = 애니메이션 진행시간의 총량 stagger = 애니메이션 진행시 아이템간의 간격 이렇게 이해하고 있습니다. 그런데 만약 duration 1초, stagger 0.5초, item * 8 (item) 0.5 (item) 0.5 (item) 0.5 (item) 0.5 ... duration이 설정한 1초를 아득히 넘어가게 되는데 GSDevTools로 확인해보니 stagger로 인해 초과되는 시간만큼 늘어나는 것으로 확인이 됩니다. 그렇다면 duration보다 stagger의 총합 길이가 더 우선이 되니 stagger의 총합 길이가 초과할 시 duration은 필요 없겠다라고 생각이 들었습니다. 그런데 GSDevTools로 확인해본 결과 duration 1초 적용시 4.5초 / 미적용시 4초 라는 결과값 을 확인했습니다. 어떤 상관이 있는지 궁금하여 질문 남깁니다..!

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
eljsh95 댓글 1 좋아요 1 조회수 273

material에 canvas 를 texture 로 넣는방법이 궁금해요

미해결

Three.js로 시작하는 3D 인터랙티브 웹

안녕하세요! 수강한지는 좀 됐는데ㅠㅠ 이제 좀 사용해볼까 하고 혼자 작업해보면서 이것저것 해보고있는데요.. 궁금한것이 2가지 있습니다. material에 canvas를 new THREE.CanvasTexture로 변환해서 한쪽(앞)면에만 map을 넣어서 테스트해보고 있는데요,, map에 넣게되면 화면이 까만색으로 나오게 되어서.. 콘솔 창에 오류는 나오지 않아요 (needsUpdate = true도 해주었습니다) canvas에 이미지 여러개 또는 텍스트를 context를 통해서 추가할 때 위치,넓이,높이는 직접 지정해줘야 하는건가요?(블렌더를 사용 X)

  • blender
  • 인터랙티브-웹
  • three.js
댓글 1 좋아요 0 조회수 290

8.2에서 보이는 site안에 page파일과 7.6에서 보이는 page파일의 코드가 다른거 같습니다.

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

8.2에서 보이는 site안에 page파일과 7.6에서 보이는 page파일의 코드가 다른거 같습니다. 깃허브에는 7.7 챕터가 따로 있던데... 혹시 그 브랜치에 site안의 page파일을 그대로 사용하면 될까요??

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
임민규 댓글 1 좋아요 2 조회수 210

changer라는 컴포넌트를 사용하는 이유

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

HeaderBgChanger라는 컴포넌트는 단순히 서버 컴포넌트에서 react hook을 사용할 수 없기 때문에 만드는 컴포넌트인지 궁금합니다. 또 이렇게 컴포넌트를 만들 경우에 렌더링 될 때 영향을 주는 부분은 없는지 궁금합니다.

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
김택수 댓글 2 좋아요 1 조회수 295

모바일 조이스틱은 어떻게 만들 수 있을까요?

미해결

Three.js로 시작하는 3D 인터랙티브 웹

studiomeal.com 을 모바일로 들어가면 조이스틱이 있는데 혹시 이런 조이스틱을 찾을 수 있는 키워드 없을까요?

  • blender
  • 인터랙티브-웹
  • three.js
sue01014 댓글 1 좋아요 0 조회수 227

이미지가 없는데 첨부파일을 다운 받는 방법이 있나요??

해결됨

인터랙티브 웹 개발 제대로 시작하기

해당 강의를 진행하기 위해서 스프라이트 이미지를 다운받으려고 하는데 제공되는 이미지가 없는 것 같아서요! 따로 다운 받을 수 있는 링크가 있나요??

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
서재완 댓글 1 좋아요 1 조회수 419

컴포넌트 만들때에는 jsx를 사용하는 이유?

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

안녕하세요. 강의를 수강중인 수강생입니다. 혹시 컴포넌트들을 만들때엔 타입스크립트 tsx가 아닌 jsx를 사용하시는데, 이러한 이유가 있을까요? 추가적으로 React.FC에 대해 공부하다보니 지양한다는 글들이 많은데, 어떻게 생각하시는지 궁금합니다. 감사합니다.

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
minji 댓글 1 좋아요 1 조회수 426

이미지 관련 사이트 문의드립니다.

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.02

안녕하세요~! gsap part2 수강생입니다. 토이스토리 처럼 타임라인 방식으로 다른 이미지를 활용해서 새로 만들어보고싶은데요. 무료 다운가능한 이미지 사이트가 있을까요? 있다면 공유 부탁드릴게요.ㅠ

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
mTojs 댓글 1 좋아요 1 조회수 235

징검다리 예제에서 SpotLight가 동작 오류

미해결

Three.js로 시작하는 3D 인터랙티브 웹

징검다리 예제에서 SpotLight가 동작하지 않는 것 같습니다. 강의 내용대로 예제를 하고 있는데 동작하지 않아서 BRIDGE_FIN 폴더(완성된 예제)를 그대로 다운받아서 실행을 해도 동일하게 SpotLight가 동작하지 않는 것 같습니다. 아래와 같이 빛이 없습니다. node 버전 : 18.17.0 확인 부탁드립니다.

  • blender
  • 인터랙티브-웹
  • three.js
하느래 댓글 2 좋아요 0 조회수 333

노션 링크 보는 곳

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.03

강의 수강중인데 노션 링크는 어디에서 볼 수 있나요?

  • javascript
  • 애니메이션
  • 인터랙티브-웹
  • gsap
  • scrolltrigger
chaewon y. 댓글 1 좋아요 1 조회수 410

반응형 관련해서 질문드립니다.

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.03

안녕하세요. 강사님 강의 완강하고 반응형 작업을 테스트 해보던 중에 잘 풀리지 않는 점이 있어 문의 드립니다. 아래 코드에서 반응형 matchMedia 로 해상도 별로 나눠서 작업하려던 중에 pin이 끝나고 bottom 영역이 반쯤 올라왔을때 개발자모드에서 기기 툴바를 사용해 모바일 사이즈로 전환해 버리면 pin된 영역이 틀어지는 현상이 발생합니다. 이전 가로와 높이값을 그대로 유지하고... 원인과 이유를 알 수 있을까요? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TEST</title> <style> * {margin: 0; padding: 0;} .wrap { overflow: hidden; } .top { height: 400px; } .center { position: relative; overflow: hidden; width: 100vw; height: 100vh; background: purple; } .bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; border-radius: 40px; background: yellow; } .bottom { height: 2000px; background: gray; } .box { width: 200px; height: 200px; background: orange; } </style> </head> <body> <div class="wrap"> <div class="top"></div> <div class="center"> <div class="bg"></div> </div> <div class="bottom"> <div class="box"></div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script> <script> ScrollTrigger.create({ trigger: '.wrap .center', start: 'top top', end: "+=2000", animation: gsap.to('.wrap .bg', {width: '100%', height: '100%', borderRadius: 0}), pin: true, scrub: true, invalidateOnRefresh: true, markers: true, }) const wrapper = document.querySelector('.wrap'); const box = document.querySelector('.box'); const mm = gsap.matchMedia(wrapper); mm.add('(max-width: 1024px)',()=>{ gsap.to(box,{ backgroundColor: '#000', }) console.log('m'); }) mm.add('(min-width:1025px)',()=>{ gsap.to(box,{ rotation: 360, duration: 2, repeat: -1, ease:'none' }) console.log('pc'); }) window.addEventListener('resize', ScrollTrigger.update) // window.addEventListener('resize', ScrollTrigger.refresh) </script> </body> </html>

  • javascript
  • 애니메이션
  • 인터랙티브-웹
  • gsap
  • scrolltrigger
댓글 2 좋아요 1 조회수 604

Hot reload 오류 문의 드립니다.

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

안녕하세요 강사님은 코드 수정 후 브라우저에서 바로바로 확인이 되는 것 같은데 저는 코드를 수정할 때 마다 아래의 오류가 발생해서 매번 다시 yarn dev를 해줘야 수정한 내역이 확인이 되다 보니 강의를 따라 진행 하는대 집중이 되질 않네요. 혹시 아래의 에러가 발생 되지 않게 하는 방법이 있는 것인지 문의 드립니다. 감사합니다. 수고하세요. =================================================================== ⨯ [Error: UNKNOWN: unknown error, open 'D:\study\react\workspace\yt-music-clone-next\.next\static\chunks\app\layout.js'] { errno: -4094, code: 'UNKNOWN', syscall: 'open', path: 'D:\\study\\react\\workspace\\yt-music-clone-next\\.next\\static\\chunks\\app\\layout.js' ===================================================================

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
itdeveloper 댓글 2 좋아요 1 조회수 699

멀티 선택 단축키

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

2분 50초쯤에서 멀티선택 하는 방법 알려주시면 감사하겠습니다!!

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
강민혜 댓글 2 좋아요 1 조회수 362

3D 공간에서 움직이는 캐릭터 3 에서 y좌표가 이상해요

미해결

Three.js로 시작하는 3D 인터랙티브 웹

3D 공간에서 움직이는 캐릭터 3 강의에서 function checkIntersects() { console.log(item.point) } 위 코드에서 마우스를 화면상 위로 down & move 하면, y 좌표가 계속 증가하고, 아래쪽으로 하면 y좌표가 계속 감소하는데, 실제로는 y좌표는 0으로 고정되어야 하는것 아닌가요? x좌표와 z좌표는 당연히 변경되는게 맞는데, y좌표가 왜 그런건지 궁금합니다. 그리고 이상하게도 일률적으로 y좌표 같이 증가하거나 감소하는것도 아니고, 한번씩 튀는경우도 생기구요.

  • blender
  • 인터랙티브-웹
  • three.js
박성현(spock.p) 댓글 1 좋아요 0 조회수 246

웹사이트에서 바로 한글로 번역되는거 어떤 프로그램쓰시는건가요?

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

안녕하세요. 처음 15초쯤에 nextjs소개하면서 나오는 번역프로그램은 어떤걸 쓰시는건가요? 편리해보여서요~

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
김진우 댓글 1 좋아요 1 조회수 355

themeprovider

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

만들어놓은 themeprovider파일 어떻게 자동으로 import 추가하나요? 저는 컴포넌트 눌러도 뜨는게 없어서요ㅠ

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
aocl333 댓글 1 좋아요 1 조회수 343

게속 오류떠서 글 작성해봐요....

미해결

애플 웹사이트 인터랙션 클론!

Uncaught TypeError: Cannot read properties of undefined (reading 'scrollHeight') at scrollLoop (main.js:367:65) at main.js:388:9 이런 오류 떠서 제 자바 스크립트 코드도 여기 올려볼께요....

  • HTML/CSS
  • javascript
  • 웹-디자인
  • svg
  • 인터랙티브-웹
  • 클론코딩
taehwan4072 댓글 2 좋아요 0 조회수 564

'이벤트 위임 보강 영상'에 있는 예제 html이 안 보입니다

미해결

인터랙티브 웹 개발 제대로 시작하기

섹션5에서 제공 중인 파일을 모두 받아 봤습니다. 그런데 이벤트 위임 보강 영상에서 보이는 delegation.html이 안 보입니다.. 혹시 제가 못 찾은걸까요??

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
BONGJUN 댓글 2 좋아요 0 조회수 309

섹션5 자바스크립트 이벤트 다루기 질문

미해결

인터랙티브 웹 개발 제대로 시작하기

안녕하세요 유준모 강사님.'움직이는 캐릭터 예제로 클릭 이벤트 익혀보기'에서 10분 30초쯤 "전역변수 회피를 위해서"라고 말하셨는데, 이 말이 어떤 건지 자세히 알 수 있을까요??

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
BONGJUN 댓글 1 좋아요 1 조회수 280

애니메이션 export 안 될때

미해결

Three.js로 시작하는 3D 인터랙티브 웹

gltf 파일로 export 할때 강의에서는 mesh만 선택하고 export 하던데, 그랬더니 애니메이션 객체가 전혀 없었습니다. mesh뿐만 아니라 amature(뼈대)도 함께 선택하니(그냥 a로 전부 선택)하니 애니메이션 객체도 생겼고, 애니메이션 잘 되네요. 블렌더 버전이 올라가면서 그렇게 동작이 바뀐것이 아닐까요? 제가 쓰는 블렌더 4.0.2 three.js 0.162.0

  • blender
  • 인터랙티브-웹
  • three.js
박성현(spock.p) 댓글 1 좋아요 0 조회수 590

인기 태그

인프런 TOP Writers

주간 인기글