Single Page Application(3) 수강 중barba와 gsap ScrollSmoother 사용할 때는 scroll update를 어떻게 해야되나요?

안녕하세요.공유해주신 자료를 보다가 보니 사파리 브라우저에서는 첫번째 동영상 영역이 크롬 브라우저와 다르게 영상이 없거나, 화면 스타일이 다르게 노출되는 것 같아서요. 오류인지 문의드립니다.apple-clone-v11/@simple-version/index.htmlapple-clone-v11/@ipad-stroke-effect/index.html

항상 궁금했는데 크림슨 컬러 선택하셨을때 활용했던 사이트 좀 알려주세요~

코드를 복붙해보려해도, 현재는html과 js가 분리된 코드만 나오고,three.js파일은 사이트에서 다운로드한거 폴더 찾아봐도 없네요수업자료 주신 파일을 그냥 소스코드처럼 이용하면 되는건가요

선생님 vue강의는 안하시나여?너무 잘가르쳐 주셔서 프론트엔드쪽도 선생님한테 배우고싶네요!ㅎㅎ

아무도 질문을 안남긴것으로보아 이 강의는 인기가 없나보네요.. 저는 강의 출시하시자마자 구매해놓고 묵혀놨다가 이제야 조금씩 꺼내보고있는데요 궁금한게있습니다.cursor에게 시키면서 코드를 짜고계신데, 제가 솔직히 이해를 못하겠는 코드라면 어떻게해야하나요? 취미로 하는거라면 괜찮은데 이걸로 밥벌어먹고 살고있다면요?..ㅠㅠ 앞으로의 공부방향과 중점을 어디에 둬야하는지를 잘 모르겠습니다. 그리고 저는 애플클론코딩 강의도 들었던 학생인데요, framer-motion이라는 아무 강력한 css 라이브러리가있잖아요? 이걸 사용하면 애플클론코딩에서했던 그런것들을 간소화시키고 더 쉽게 구현할 수 있는거같습니다.선생님도 framer-motion 자주 사용하시나요?또 유튜브는 안하시나요? 리액트+framer-motion으로 인터랙티브효과 주는것도 한번쯤 보여주셨으면 좋겠습니다.

 사진처럼 터치를 하고 드래그를 하면 카메라가 돌아가는것이 아니라 웹 화면 자체가 끌려 가는데..html, canvas, body 에 touch-action 옵션을 none으로도 줘보고touch 이벤트들에 preventDefault도 줘보고 했지만 해결이 되질 않습니다.. 터치 드래그를 하면 moveMentX와 moveMentY의 값은 잘 출력되는데 카메라가 회전을 하지 않습니다.데스크탑에서 mousemove는 제대로 카메라가 돌아가는데, 모바일버전에서 touchmove는 카메라가 돌아가질 않네요.

barba.js 설정후 페이지이동시 gsap유료플러그인인 ScrollSmoother.js 사용법도 알려주실 수 있으실까요? 아무리 문서들 찾고 ai한테 질문해도 페이지이동시 스무스스크롤효과가 풀리는게 해결이 안되네요..

섹션3. Advanced Trigger 에서Animation Toggle(1) 강좌에서 문의드립니다. 첫번째 왼쪽에는 프로그래스 스크롤트리거를 넣었는데요,아래 소스에서 trigger: '.scroll-content' 에서 대상을 넣을걸로 알고 있는데요,마크업 구조상에 .scroll-content 라는 이름의 클래스명이 없는데 이건 어디서 나온걸까요<nav class="lnb"> <div class="progress"></div> <ul> <li> <div class="dot"></div> <span>Home</span> </li> <li> <div class="dot"></div> <span>About</span> </li> <li> <div class="dot"></div> <span>Product</span> </li> <li> <div class="dot"></div> <span>Portfolio</span> </li> <li> <div class="dot"></div> <span>Contact Us</span> </li> </ul> </nav> <div id="container"> <section class="section section01"><h2>section1</h2></section> <section class="section section02"><h2>section2</h2></section> <section class="section section03"><h2>section3</h2></section> <section class="section section04"><h2>section4</h2></section> <section class="section section05"><h2>section5</h2></section> </div> ScrollTrigger.create({ trigger: '.scroll-content', start: 'top top', end: 'bottom bottom', animation: gsap.from('.progress',{scaleY:0,transformOrigin:'center top',ease:'none'}), scrub: true, })

강사님처럼 똑같이 코드를 작성했음에도 불구하고 스크롤을 천천히 내리면 opacity가 0까지 잘 적용이되는데 스크롤을 빨리내리면 opacity가 0으로 빠지다가 그상태로 남아서 씬2까지 넘어가요.혹시 왜그런지 알 수 있을까요?

크루알라모드 강의수강 했는데자료 다운 받아보니 안에 내용이 없습니다자료요청 드려용rkgml6255@naver.com

섹션7 강의에서 스크롤관련 소스에서 정확히 알고자 질문드립니다아래 부분에서 $.fn 은 무슨 뜻인지요?표현식함수로 만든건 알겠는데 앞에 부분을 삭제하니 실행이 안되더라구요, $.fn.scrollMoving= function(){ let elementTop = $(this).offset().top; //선택한 요소의 Y축 좌표값 let elementBottom = elementTop + $(this).outerHeight();//Y축 좌표값+현재요소의 높이값 let viewportTop = $(window).scrollTop();//화면의 스크롤값 let viewportBottom = viewportTop + $(window).height();//스크롤값+화면의 높이 return (viewportTop < elementBottom) && (elementTop < viewportBottom) //들어오는 시점과 나가는 시점을 알아냄 };

Box 지오메트리를 이용하였기 때문에 정육면체인데, materials 배열에 있는 여섯개의 원소들 순서가 정해져 있는걸까요?자동으로 frontTexture가 앞에 렌더링되고 rightTexture가 우측에 렌더링 되는걸까요??만약 Box가 아니라 sphere이라면 materials 배열엔 어떻게 다른 텍스쳐를 넣을 수 있을까요?또 예로 cone 지오메트리라면 material에 넣는 순서가 어떻게 될까요?

안녕하세요 강의 너무 잘보고있습니다.https://inf.run/SELR1 여기보면 일단 gltf 사용을 추천하고있던데 glb는 하나의 파일에 모든게 담겨있는 형태라 관리가 용이하다고 나오더라구요. 서비스에서 사용하는 입장에서 둘중에 어느걸 사용하는게 성능면에서 좋은걸까요?

smooth-scrollbar js 는 scrollerProxy 랑 연동해야하는 귀찮은 문제가있는데Lenis는 scroll 값을 window.scrollY에 그대로 반영하면서 부드러운 스크롤 효과를 주기 때문에, GSAP의 ScrollTrigger랑 자연스럽게 연동되거든요굳이 왜 어려운길을 가는지 이유가 궁금합니다.scrollerProxy 의 학습을 위해서인지 아니면 Lenis의 어떠한 문제가있어서 인지 궁금해서 여쭈어 봅니다.

normal 유리판을 클릭했을 때, actions[0] 를 stop해서 default 모션은 삭제를 하지만 점프 모션은 계속 하더라구요.  사진처럼 점프도 삭제를 해야 정상적으로 작동이 되는데 혹시 강의에서는 따로 삭제를 안해도 점프모션이 반복되지 않는 이유가 뭘까요?!추가로 strong을 선택할때도 1초 후에는 다시 점프모션을 stop 해주었습니다.

강의에서 사용하신 컴퓨터는 애플사 맥북이신거 같은데 저는 윈도우로 실습했습니다. 그래서인지 사실 기둥 세우고 바 설치하고부터 슬슬 렉이 심하게 걸리더라구요. 아무래도 사양이나 렌더링 능력치에 따라 다른 실습하시는 분들도 렉 걸리시거나 안걸리실텐데.. 그 이번 강의에서 일분이의 점프 동작을 구현할 때, gsap에서 y 값을 12로 설정하고 duration을 0.4초로 주셨잖아요? 똑같이 설정하고 실행했을 때, 1초보다 긴 체공시간을 갖고 떨어지더라구요. 근데 0.01초로 주어도 똑같이 체공하다가 떨어졌어요4초로 주었을 땐 정말 4초동안 체공하다가 떨어졌는데 이게 렉이 심해서 버벅여서 그렇게 보이는걸까요?! 쾌적한 환경에서 실습하지 못해서 아쉽긴 하지만 이러한 사양문제에 따라서 체공시간 같은 결과가 다르게 보일 수도 있을까요?

안녕하세요 선생님. material까지 강의를 들으면서 두 가지 궁금한 점이 생겼습니다. 로컬 서버에서 ctrl+s 하면 자동으로 핫로딩되어 코드 변경사항이 화면에 반영되는 것으로 알고 있습니다. (리액트의 경우는 root부터 리렌더링)  그런데 핫로딩을 했을 때 바로 반영되는 코드가 있고, 직접 브라우저에서 새로고침해줘야 반영되는 코드가 있었습니다.  <핫로딩 시 안변함 (only 새로고침으로만 변경사항 반영됨)> material wireframe 적용camera fov, far 속성그 외 등등 <핫로딩 시 변함> Geometry 종류 변경 transform 속성 변경 (position, scale, rotation)mesh color 변경materal 종류 변경그 외 등등 위와 같은 차이가 발생하는 이유를 잘 모르겠습니다. 내부 동작면에서 뭔가 다른게 있는 걸까요? (three.js 코드를 까보면 좀 명확해지려나요...) Mesh의 정의를 어떻게 내려야할지 잘 모르겠습니다. 아래 두 가지 중 어느 쪽이 더 맞는 설명일까요?Geometry와 material을 감싼 껍데기 Geometry와 material로 이루어진 하나의 물체 또, 종종 3D 모델링에서 정육면체, 삼각형 등을 오브젝트라고 부르는 걸 들은 적 있는 것 같은데, 해당 오브젝트라는 명칭이 맞는 명칭인가요? 그렇다면, Mesh = 오브젝트 라고 부를 수 있을까요? 감사합니다. 

안녕하세요? 궁금한것이 있습니다.보통 React로 csr을 만들어 배포하는데 next.js로 SSR 페이지 없이 CSR app을 만들어 웹서버(NGINX)에 배포할 수 있는지 궁금합니다.그리고 SSR로 배포할때, 일반적으로 Node.js 서버를 DMZ 영역에 구성하는지 아니면, WAS처럼 내부망에 구성하는지도 궁금합니다.

소스를 그대로 사용하는것이 아니고 한단계, 한단계 만들어가면서 하고 있는데요.팔, 다리, 몸통, 머리 소스 부분부분씩 진도나갈때마다 복붙하면서 진행하고 있습니다. 다 잘 진행되는데, 키보드 왼쪽/오른쪽 이동시, 잘 이동됩니다.근데 누르자마자 이동하는게 아니라, 1~1.5초 가량 딜레이(아무동작안함)후에 뒤늦게 동작하더라고요.어느 부분을 살펴보면 좋을지요!!