173만명의 커뮤니티!! 함께 토론해봐요.
미해결
실전! 웹사이트제작! Step By Step! ('포메인'_풀페이지사이트 제작)
3:30 에 제공해드린 파일이 어디있나요..? 최종결과물 파일 외에 또 새로운 파일을 어디에서 받아야하는건가요..? 카운트업 js 랑 플러그인 js는 어디서 받아야하는건가요,,?
미해결
애플 웹사이트 인터랙션 클론!
안녕하세요-! 선생님께서 pageYOffset 을 사용하셨는데, 그 이유가 IE에서도 호환되기하기 위함이 맞을까요? IE를 고려하지 않는다면 scrollY 를 사용하는게 맞는지 궁금합니다.
미해결
Three.js로 시작하는 3D 인터랙티브 웹
안녕하세요 강의 너무 재밌게 잘 수강하고 있습니다. 일분이 캐릭터 위에 이것처럼 이름을 띄우고 싶은데 어떤 방식으로 해야할 지 막막해서 여쭤봅니다.
미해결
인터랙티브 개발 실무 끝장내기 [역량 강화편]
.bottom 클래스 스타일에 background: url(../image/bottom.png) center bottom/100% no-repeat; 로 되어있는데 center bottom/100% 부분은 background-position 속성값일까요? bottom/100% 부분이 이해가 안되서 질문 남깁니다.
미해결
Three.js로 시작하는 3D 인터랙티브 웹
일반적으로 모델링 자료를 공유할 떄는 fbx나 obj를 많이 사용하곤해서 익숙합니다. glb 파일을 사용하는 이유는 텍스쳐를 따로 저장하지 않고 한번에 묶여서 저장되기 때문에 glb를 사용하는걸까요?
미해결
초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
안녕하세요? 강사님 해당 강의 중 챕터 수식에 해당하는 부분이 이해가 가지 않아 질문드립니다. parallaxMoveDistance = Math.max(parallaxStartValue - parallaxStartValue, Math.min(parallaxStartValue, parallaxStartValue - (parallaxStartValue * (parallaxPercent/100)))); => parallaxStartValue - (parallaxStartValue * (parallaxPercent/100)) 위의 계산식 중에 min 계산부분이 이해가 가지 않습니다. 왜 저런 계산식이 나왔는지 의문이여서 질문드려요 ㅜㅜㅜ
해결됨
BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래" 클론
(() => { 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 (); })();
