173만명의 커뮤니티!! 함께 토론해봐요.
미해결
웹 애니메이션을 위한 GSAP 가이드 Part.01
https://productive-printer-b81.notion.site/GSAP-Basic-4c37387fe8254db4a7d14c883f8baa2d 노션 주소가 이거 맞나요? 환경설정 파트 > 수업 자료 라고 되어 있는 거 클릭하면 이런 주소가 나옵니다. .. 제대로 된 주소 찾느라고 다섯개 강의를 다 다시 봤는데... 흠... 진도를 나갈 수가 없어요. ㅠ.ㅠ 확인부탁드립니다.
미해결
Three.js로 시작하는 3D 인터랙티브 웹
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :) - 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다. - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. hair.glb, body.glb 두 개의 모델은 동일한 bone 구조를 가지고 있습니다. body.glb 모델에 hair.glb의 머리 모양을 결정하는 skinnedMesh 를 가져와 넣어 주었는데요 hair.glb 모델을 단독으로 import 해서 띄웠을 때와 다른 크기와 위치에 skinnedMesh가 적용되어 나타납니다. 이렇게 머리에 헤어 스타일이 적용된게 기대값이었는데요 hair.glb 파일을 단독 import하면 body.glb에 맞는 위치, 크기로 import 되지만 위에 기재한 대로 skinnedMesh를 가져오면 이렇게 보여집니다. 뒤에 하얗게 보이는게 hair.glb의 skinnedMesh 입니다. 기대값으로 원하는 모델과 같은 위치에 skinnedMesh를 넣었으나 적용이 되지 않는데 어떻게 해야할까요??
미해결
애플 웹사이트 인터랙션 클론!
혹시 강의내용과 같은 페이지를 쉽게 만드는 라이브러리 같은게 있을까요? 저런 스크롤 애니메이션 페이지를 만들 때 바닐라 자바스크립트가 아닌 더 쉽게 만들 수 있게 해주는게 혹시 있나 궁금합니다
해결됨
초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
코드로보시면 간단합니다. 왠만한건 다돌아가기 때문에 해석할 필요는 없으실겁니다. 테일윈드 backgroundImage 를 단축어로설정하여 bg-sky2 를사용하면 사진이 불러와집니다. 모든것이 정상 작동잘됍니다. 아래는 제가 작성한 코드중 일부분입니다. <div className={`${ scrollPercent >= 25 && scrollPercent < 50 ? "opacity-100 " : "opacity-0 " } block absolute h-full bg-sky2 transition-opacity duration-500`} ></div> 이때 absolute 를 사용하였을떄 bg-sky2 이미지가 안보이게됍니다. 일부분 버그인줄 알았습니다. 그래서 다른 백그라운드 색상을 바꾸어보았습니다. bg-sky2 ==>(교체) bg-red-400 동일하게 안보입니다. 하지만 absolute 를 사용하지 않으면 4개가 스택처럼 쌓이지만 정상적이게 원하는퍼 센테이지에 올떄 없어지고 생성됍니다. 고민중 이미지로 만들었는데 정상작동 하였습니다.하지만 저는 backgroundImage 로넣는것이 필터다 backgroundFixed 등 여러가지 활용이 된다고 생각하여 질문드립니다. <img className={`${ scrollPercent >= 75 && scrollPercent < 102 ? "opacity-100 " : "opacity-0 " }block absolute h-full transition-opacity duration-500`} src="/images2/motion_sky4.gif" alt="motion_moon" /> 요약 absolute을 사용하면 다돌아가던것이 왜인지 안돌아갑니다. 개발환경은 next.js tailwind 입니다.(취업못하고 공부용입니다.) 전체코드는 다음과같습니다 "use client"; import React, { useRef, useEffect, useState } from "react"; import motion_sky1 from "@/../../public/images2/motion_sky1.gif"; function Page() { const [scrollPercent, setScrollPercent] = useState(0); const scrollBody = useRef(null); console.log(scrollPercent); useEffect(() => { const handleScroll = () => { const scrollRealHeight = document.documentElement.scrollHeight - window.innerHeight; const scrollTop = window.scrollY; const percentScroll = Math.round((scrollTop / scrollRealHeight) * 100); setScrollPercent(percentScroll); }; window.addEventListener("scroll", handleScroll); return () => { window.removeEventListener("scroll", handleScroll); }; }, []); return ( <div ref={scrollBody} className="relative left-0 top-0 h-6000 w-full "> <div>내용</div> {/* <img className={`${ scrollPercent < 25 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-black transition-opacity duration-500 `} src="/images2/motion_sky1.gif" alt="motion_moon" /> <img className={`${ scrollPercent >= 25 && scrollPercent < 50 ? "opacity-100 " : "opacity-0 " } block absolute h-full bg-teal-500 transition-opacity duration-500`} src="/images2/motion_sky2.gif" alt="motion_moon" /> <img className={`${ scrollPercent >= 50 && scrollPercent < 75 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-red-400 transition-opacity duration-500`} src="/images2/motion_sky3.gif" alt="motion_moon" /> <img className={`${ scrollPercent >= 75 && scrollPercent < 102 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-blue-500 transition-opacity duration-500`} src="/images2/motion_sky4.gif" alt="motion_moon" /> */} <div className={`${ scrollPercent < 25 ? "opacity-100 " : "opacity-0 " }block absolute Fixed z-50 h-full bg-sky1 transition-opacity duration-500 `} ></div> <div className={`${ scrollPercent >= 25 && scrollPercent < 50 ? "opacity-100 " : "opacity-0 " } block absolute h-full bg-sky2 transition-opacity duration-500`} ></div> <div className={`${ scrollPercent >= 50 && scrollPercent < 75 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-red-400 transition-opacity duration-500`} ></div> <div className={`${ scrollPercent >= 75 && scrollPercent < 102 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-blue-500 transition-opacity duration-500`} ></div> <div className="motion_ggang"> <figure className="ch_body"> {/* 몸 */} <img className="fixed h-40 w-32 top-12 left-7" src="/images2/motion_body2.png" alt="motion_body2" /> </figure> {/* 손 */} <figure className="ch_hand_right"> <img className="fixed h-40 w-32 top-12 left-7" src="/images2/motion_hand_right.png" alt="motion_hand_right" /> </figure> </div> {/* 달 */} <figure className="motion_moon"> <img className="fixed h-40 w-32 top-12 right-3" src="/images2/motion_moon.png" alt="motion_moon" /> </figure> </div> ); } export default Page;
미해결
웹 애니메이션의 새로운 표준, Web Animations API
안녕하세요 강의를 듣고 직접 작성하면서 적용을 해보려고 하다가 강의에서 사용하는 scroll-timeline polyfill repo 에서 찾아보니 강의에서 사용했던 scrollOfsets을 앞으로는 사용하지 않는 것 같았습니다. 이러한 부분에 대해서 다른 해결법이 또 있을까요? 아래의 링크에 방법이 있긴 합니다만 조금 더 효율적인 방법이 있는지 궁금했습니다! 추가로 react에서도 사용하려고 했지만 Npm에서는 관련한 패키지가 없는 것 같아서 혹시 react에서 적용해보신 적이 있으실까요?! https://github.com/flackr/scroll-timeline/issues/64
미해결
인터랙티브 웹 개발 제대로 시작하기
이번에 강의에 추가된 closest를 사용하면 다음과 같이 사용하면 될까요? 동작은 정상적으로 작동합니다 const stage = document.querySelector(".stage"); stage.addEventListener("click", e => { e.target.closest(".door").classList.toggle("door-open"); });
미해결
웹 애니메이션의 새로운 표준, Web Animations API
1년동안 쇼핑몰 인하우스 간단한 퍼블 업무하다가 이직 준비하면서 공부중인데 궁금한점이있어서요 스크롤 애니메이션할때 간단한 효과는 aos, 디테일한건 gsap을 많이 쓴다고 들었거든요 이 강의의 web api 애니메이션을 습득하면 실무에서 gsap 으로 할수있는건 대부분 할 수 있는건가요? 물론 완전히 대체는 안되겠지만 왠만한건 가능한건가요 제가 gsap도 아직 공부할 예정이라 자세히 몰라서 질문드립니다ㅎ
미해결
인터랙티브 웹 개발 제대로 시작하기
이미지 없으신 분들 그냥 구글 이미지에서 간단히 가져와서 사용해 봤습니다. 요걸로 테스트 해 봅시다 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> @keyframes break-egg-ani { /* 0%는 from */ /* 100% 은 to*/ to { background-position: -500px 0; } } .broken-egg { width: 85px; height: 150px; background: url("https://www.shutterstock.com/image-vector/cartoon-dragon-ice-crystal-eggs-260nw-2152129871.jpg") no-repeat 0 0 / auto 150px; animation: break-egg-ani 2s infinite steps(7); } </style> <body> <div class="broken-egg"></div> </body> </html>
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
Q. 현재 준비중이시거나 계획으로, 이후에 출시될 강의들에 유료 플러그인이나 툴이 포함될까요? 궁금해서 질문해봅니다! 🤔
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.01
Q. FOUC에 대한 보완으로 autoAlpha 를 사용하면 효율적 인 이유가 뭘까요? FOUC 강의에서 authAlpha를 사용함으로써 GSAP가 효율적으로 visibility를 visible로 바꿀 수 있다 라고 말씀하셨습니다. 그런데 생각해보니 GSAP 객체도 해당 Element의 style에 접근해서 attribute 값을 바꾸는게 아닌가? 하는 생각이 들어서 질문드려봅니다. 이렇게 되면 사실 문법적인 설탕(syntatic sugar) 같은게 아닌가요? 🤔
미해결
애플 웹사이트 인터랙션 클론!
안녕하세요!! 강의를 전부 듣고 코드를 뜯어보며 복습중에 있습니다. section-0에서 사용한 것을 이용해 스크롤 될 때 matrix로 Text에 scale(80)정도로 주려고 코드를 입력해보니 적용은 되었으나 스크롤을 빠르게 올릴시에 정상적으로 사이즈가 줄어들지 않고 줄어들다 말거나 그러더라구요...ㅠㅠ 폰트 픽셀도 많이 깨지는 현상이 발생하구요. 혹시 해결하려면 어떤식으로 접근해야 할까요? 해당 코드 첨부드립니다. const sectionInfo = [ { // section-0 type: "sticky", heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector("#scroll-section-0"), messageA: document.querySelector("#scroll-section-0 .main-message.a"), messageB: document.querySelector("#scroll-section-0 .main-message.b"), messageC: document.querySelector("#scroll-section-0 .main-message.c"), messageD: document.querySelector("#scroll-section-0 .main-message.d"), }, values: { messageA_opacity_in: [0.4, 1, { start: 0, end: 0.05 }], messageA_opacity_out: [1, 0, { start: 0.15, end: 0.2 }], messageA_scale_in: [1, 80, { start: 0.05, end: 0.25 }], messageA_scale_out: [80, 1, { start: 0.25, end: 0.05 }], messageB_opacity_in: [0, 1, { start: 0.2, end: 0.25 }], messageB_opacity_out: [1, 0, { start: 0.35, end: 0.4 }], messageB_translateY_in: [50, 0, { start: 0.2, end: 0.25 }], messageB_translateY_out: [0, -50, { start: 0.35, end: 0.4 }], messageC_opacity_in: [0, 1, { start: 0.4, end: 0.45 }], messageC_opacity_out: [1, 0, { start: 0.55, end: 0.6 }], messageC_translateY_in: [50, 0, { start: 0.4, end: 0.45 }], messageC_translateY_out: [0, -50, { start: 0.55, end: 0.6 }], messageD_opacity_in: [0, 1, { start: 0.6, end: 0.65 }], messageD_opacity_out: [1, 0, { start: 0.75, end: 0.8 }], messageD_translateY_in: [50, 0, { start: 0.6, end: 0.65 }], messageD_translateY_out: [0, -50, { start: 0.75, end: 0.8 }], }, }, ]; function calcValues(values, currentScrollY) { let returnValue; const currentSectionHeight = sectionInfo[currentSection].scrollHeight; // 현재 스크롤 섹션에서 스크롤 된 범위를 비율로 구하는 식 const scrollRatio = currentScrollY / currentSectionHeight; if (values.length === 3) { const scrollAniStart = values[2].start * currentSectionHeight; const scrollAniEnd = values[2].end * currentSectionHeight; const scrollAniHeight = scrollAniEnd - scrollAniStart; if (currentScrollY >= scrollAniStart && currentScrollY <= scrollAniEnd) { returnValue = ((currentScrollY - scrollAniStart) / scrollAniHeight) * (values[1] - values[0]) + values[0]; } else if (currentScrollY < scrollAniStart) { returnValue = values[0]; } else if (currentScrollY > scrollAniEnd) { returnValue = values[1]; } } else { returnValue = scrollRatio * (values[1] - values[0]) + values[0]; } return returnValue; } function playAnimation() { const objs = sectionInfo[currentSection].objs; const values = sectionInfo[currentSection].values; const currentScrollY = scrollY - prevScrollHeight; const currentSectionHeight = sectionInfo[currentSection].scrollHeight; const scrollRatio = currentScrollY / currentSectionHeight; switch (currentSection) { case 0: // message if (scrollRatio <= 0.05) { objs.messageA.style.opacity = calcValues( values.messageA_opacity_in, currentScrollY ); } else { objs.messageA.style.opacity = calcValues( values.messageA_opacity_out, currentScrollY ); objs.messageA.style.transform = `matrix(${calcValues( values.messageA_scale_in, currentScrollY )}, 0, 0, ${calcValues( values.messageA_scale_in, currentScrollY )}, 0, 0)`; }
미해결
Three.js로 시작하는 3D 인터랙티브 웹
npm node.js의 개념이 명확히 와닿지 않아서 여쭤봅니다. 전에 봤던 어떤 기초 강의에서 //Basic Tools (VScode, Atom, Intelli J등) //Front End (HTML CSS JS) //Tools (Package Manager- npm,yarn, Module Bundler - Webpack, Rollup, Parcel) //Testing //Publish (Netlify 등) 위 순서대로 웹빌딩이 진행된다는 내용을 본 적이 있는데 전에 혼자 웹빌딩을 했을 때는 Front End -> Publish(깃허브) 순으로 진행하고 끝냈어서 중간 단계에 있는 Tools 내용부터는 이해가 잘 되지 않습니다ㅠㅠ npm이랑 webpack이 이번 수업에도 등장했는데 왜 설치를 해야하는지, 설치한 npm은 publish할 때 어떻게 해야하는지 등의 부분이 이해가 되지 않아서 여쭤봅니다
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
안녕하세요 part.02 강의 완강했습니다👍 너무 좋은 강의라 다음 강의 스크롤트리거 관련 질문겸 반영됐으면 하는 부분이 있어서 질문을 올립니다 part.03 강의에서 스크롤트리거 강의시 반응형으로 제작하는 강의도 포함되어있을까요? 예를 들어 pc에서는 스크롤시 위에서 아래로 내려가는 모션이 모바일에선 좌에서 우로 가는것모션처럼 코드자체는 여기저기 검색해서 구현은 가능하지만 선생님강의처럼 효율적으로 작성하는 방법이 있을까 하는 궁금에서 질문드립니다 이번강의에서 타임라인을 효율적으로 관리하시는거보고 꼭 포함되면 좋을것 같아서 없다면 포함해주시면 감사합니다ㅠㅠ
해결됨
몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 너무 좋은 강의 잘 듣고 있습니다! mouse 강의 마지막 따라 하고 있는데요 강의를 따라해도 조금 다르게 작동하는 경우가 있어서 질문 남깁니다. 버튼에 마우스를 올리니 호버기능이 작동하는데 나비가 올라오는 순간 호버 기능이 꺼져버립니다. 이 경우 어떻게 해야할까요?
미해결
애플 웹사이트 인터랙션 클론!
(() => { const sceneInfo = [ { // 0 type: 'sticky', heightNum: 5, // 브라우저 높이의 5배로 scrollHeight 세팅(디바이스 마다 높이가 다르기에 각 기계가 가진 높이를 불러오고 곱해준다.) scrollHeight: 0, }, { // 1 type: 'normal', heightNum: 5, scrollHeight: 0, }, { // 2 type: 'sticky', heightNum: 5, scrollHeight: 0, }, { // 3 type: 'sticky', heightNum: 5, scrollHeight: 0, } ]; function setLayout() { //각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; } console.log(sceneInfo); } setLayout(); })(); 4645값으로 그대로 진행해도 될까요?
미해결
Three.js로 시작하는 3D 인터랙티브 웹
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :) - 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다. - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요.선생님 현재 물리엔진 적용중, Player에 mass 30적용시 Pillar를 뚫고 밑으로 떨어지는 문제가 발생하고있습니다. 강의를 여러번 다시 되돌리면서 확인도 해보구, 완성된 코드랑 비교도 하면서 오타가있나 복사 붙여넣기를 해봐도 도저히 문제를 찾을 수 없었습니다..ㅠㅠ 어디부분을 수정해야 이러한 문제를 고칠 수 있는지 알려주시면 감사하겠습니다!ㅠㅠ
미해결
Three.js로 시작하는 3D 인터랙티브 웹
안녕하세요. 선생님 질문있습니다. 강의에 보면 let mesh 로 변수를 선언해서 반복문내에서 사용하셨는데 const meshes = []; let mesh; for (let i = 0; i < 10; i++) { mesh = new THREE.Mesh(geometry, material); mesh.position.x = Math.random() * 5 - 2.5; mesh.position.z = Math.random() * 5 - 2.5; scene.add(mesh); meshes.push(mesh); } 다음과 같이 반복문 내에 const 로 선언하고 사용해도 같은 결과가 나오는데 반복문 밖에서 선언 후 사용하신 이유가 따로 있을까요? const meshes = []; for (let i = 0; i < 10; i++) { const mesh = new THREE.Mesh(geometry, material); mesh.position.x = Math.random() * 5 - 2.5; mesh.position.z = Math.random() * 5 - 2.5; scene.add(mesh); meshes.push(mesh); }
미해결
Three.js로 시작하는 3D 인터랙티브 웹
이전 수업에서 ilbuni.glb를 로드했을 땐 정상적으로 작동했는데, test.glb로 바꾸니까 이런 에러가 뜨네요 ... uuid가 토큰같은 id처럼 보이는데 ,, 어떻게 해결해야 할까요? ㅜㅜ
미해결
몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 여기 부분하고 여기 부분에 모두 perspective가 있는데 혹시 css에도 해줘야하는 이유가 있을까요?? 그리고 혹시 영상에서 보였던 끊김현상이 저도 가끔씩 나타나는데 원인이 뭔가요?? 3d를사용해서 그런건가요? 아님 그저 컴퓨터렉인가요?? 혹시 해결방법도 알려주시면 감사드리겠습니다..ㅠㅠ
미해결
몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 이 부분이 없어도 잘 되는 것같긴한데 혹시 overflow-y : hidden 있는 이유를 알 수 있을까요? 이미지들이 height 크기를 넘어도 화면에서 이미지를 자르고 스크롤을 없앤다는 의미 맞을까요?? 또하나 질문이 있습니다. 여기서 상위요소에 margin 0 auto를 주고 하위요소에 margin auto를 줬는데 위에 margin 0 auto를 지워도 하위요소는 가운데 정렬이 잘 되고 상위 요소에 margin 0 auto가 아닌 margin auto를 줘도 똑같이 나오는데 이게 둘이서 무슨 상호작용이 되는지 알 수 있을까요?? 개발자 도구로 지우면서 확인해봤는데 바뀌는게 안보여가지구요..ㅠㅠ
