묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
glb를 사용하는 특별한 이유가 있을까요?
일반적으로 모델링 자료를 공유할 떄는 fbx나 obj를 많이 사용하곤해서 익숙합니다. glb 파일을 사용하는 이유는 텍스쳐를 따로 저장하지 않고 한번에 묶여서 저장되기 때문에 glb를 사용하는걸까요?
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
5-3-2 계산식 질문 드립니다.
안녕하세요? 강사님 해당 강의 중 챕터 수식에 해당하는 부분이 이해가 가지 않아 질문드립니다. parallaxMoveDistance = Math.max(parallaxStartValue - parallaxStartValue, Math.min(parallaxStartValue, parallaxStartValue - (parallaxStartValue * (parallaxPercent/100)))); => parallaxStartValue - (parallaxStartValue * (parallaxPercent/100)) 위의 계산식 중에 min 계산부분이 이해가 가지 않습니다. 왜 저런 계산식이 나왔는지 의문이여서 질문드려요 ㅜㅜㅜ
-
해결됨BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래" 클론
action이 true일때 실행되는데 false에서 초기화가 안되요ㅠ
(()=>{ const actions = { birdFlies(key){ if(key){ document.querySelector('[data-index="2"] .bird').style.transform = `translateX(${window.innerWidth}px)`; } else{ document.querySelector('[data-index="2"] .bird').style.transform = `translateX(-100%)`; } }, birdFlies2(key){ if(key){ document.querySelector('[data-index="5"] .bird').style.transform = `translate(${window.innerWidth}px, ${-window.innerHeight * 0.7}px`; } else{ document.querySelector('[data-index="5"] .bird').style.transform = `translateX(-100%)`; } } }; const stepElems = document.querySelectorAll('.step'); const graphicElems = document.querySelectorAll('.graphic-item'); let currentItem = graphicElems[0]; let ioIndex; const io = new IntersectionObserver((entries, observer) => { ioIndex = entries[0].target.dataset.index * 1; }); for(let i = 0; i < stepElems.length; i++){ io.observe(stepElems[i]); stepElems[i].dataset.index = i; graphicElems[i].dataset.index = i; } function activate(action){//활성화 currentItem.classList.add('visible'); if(action){ actions[action](true); } } function inactivate(action){//비활성화 currentItem.classList.remove('visible'); if (action) { actions[action](false); } } window.addEventListener('scroll', () => { let step; let boundingRect; for(let i = ioIndex - 1; i < ioIndex + 2; i++){ step = stepElems[i]; if(!step) continue; boundingRect = step.getBoundingClientRect(); if(boundingRect.top > window.innerHeight * 0.1 && boundingRect.top < window.innerHeight * 0.8){ inactivate(); currentItem = graphicElems[step.dataset.index]; activate(currentItem.dataset.action); } } }); window.addEventListener('load', () => { setTimeout(() => scrollTo(0, 0), 100); }); activate(); })();
