묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결애플 웹사이트 인터랙션 클론!
선생님 이해가 잘 안가는 문구가 있어서 질문 드립니다.
setLayout 함수 끝에 들어가는${sceneInfo[i].scrollHeight}px;부분에서 따옴표로 잘못 작성해서 좀 해맸었습니다 ㅎㅎ;${}부분을 풀어 쓰면 정확하게 어떤식으로 표기가 되는건지.. 궁금합니다.제 예상으로는 for문 안에 따로 변수를 선언하지 않고, 계산된 값을 바로 가져오기 위해 사용한 것 같은데 맞을까요..??
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
질문 있습니다
일분코딩님처럼 영상이 나오게 하고 싶은데 texture를 비디오로 불러와서 mapping한 것 같은데 어떻게 하신 것인지 궁금합니다. VideoTexture를 사용하신 것일까요?그리고 홈페이지 임베디드 같은 경우에는 어떤 방식을 사용하면 가능한지도 궁금합니다
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
apply 후 전체선택
apply 후 edit mode 에서 전체선택을 했는데, 캡쳐화면처럼 부분 부분 선택이 되고 한번에 전체 선택이 되지 않습니다. 제가 제대로 따라하고 있는 게 맞나요?
-
미해결실전! 웹사이트제작! Step By Step! ('포메인'_풀페이지사이트 제작)
right nav에 active 질문입니다
<!--오른쪽 네비--> <ul class="rightNav" id="rightNav"> <li data-menuanchor="firstPage" class="active"><a href="#firstPage"><span>홈</span></a></li> <li data-menuanchor="secondPage"><a href="#secondPage"><span>브랜드</span></a></li> <li data-menuanchor="thirdPage"><a href="#thirdPage"><span>메뉴</span></a></li> <li data-menuanchor="fourthPage"><a href="#fourthPage"><span>서비스</span></a></li> <li data-menuanchor="fifthPage"><a href="#fifthPage"><span>사회공헌</span></a></li> <li data-menuanchor="sixthPage"><a href="#sixthPage"><span>SNS</span></a></li> <li data-menuanchor="seventhPage"><a href="#seventhPage"><span>커뮤니티</span></a></li> </ul>css/* rightNav motion*/ .fullPageWrap .rightNav li.active a span{opacity: 1;right: 30px; transition: all 0.5s ease-in-out;} .fullPageWrap .rightNav li.active a:after{right:-2px; width: 12px; height: 12px; border: 2px solid #96cc29; border-radius: 12px; background: rgba(255,255,255,0);box-sizing: border-box;margin-top: -6px;} html에 active가 첫 firstpage에만 붙어있는데 어떻게 다른 secondpage,thirdpage... 에도 적용이 되는지 궁금합니다! fullpage.js 에 붙어있는 기능인지 , 아니면 :active를 붙여서 사용된건지 자세하게 알고싶습니다!
-
미해결애플 웹사이트 인터랙션 클론!
영상 속 코드와 배포하신 소스 코드가 다르네요.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { height: 500vh; } .sample-video { position: fixed; top: 0; left: 0; width: 100%; } </style> </head> <body> <div class="container"> <!-- <video class="sample-video" src="../video/sample-low.mp4" muted></video> --> <video class="sample-video" src="../video/sample-high.mp4" muted></video> </div> <script> const videoElem = document.querySelector('.sample-video'); let videoDuration; videoElem.addEventListener('loadeddata', function() { console.log('비디오 로드 완료'); videoDuration = videoElem.duration; init(); }) let progress; let currentFrame; function init() { window.addEventListener('scroll', function () { progress = pageYOffset / (document.body.offsetHeight - window.innerHeight); console.log(progress); if (progress < 0) progress = 0; if (progress > 1) progress = 1; requestAnimationFrame(function() { videoElem.currentTime = videoElem.duration * progress; }) }); } </script> </body> </html>복붙해서 사용하세요.
-
미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
배경질문
배경을 색 대신에 이미지 넣을 수 있는거죠?
-
미해결실전! 웹사이트제작! Step By Step! ('포메인'_풀페이지사이트 제작)
3:30 에 제공해드린 파일이 어디있나요..?
3:30 에 제공해드린 파일이 어디있나요..?최종결과물 파일 외에 또 새로운 파일을 어디에서 받아야하는건가요..?카운트업 js 랑 플러그인 js는 어디서 받아야하는건가요,,?
-
미해결애플 웹사이트 인터랙션 클론!
pageYOffset || scrollY
안녕하세요-!선생님께서 pageYOffset을 사용하셨는데, 그 이유가 IE에서도 호환되기하기 위함이 맞을까요?IE를 고려하지 않는다면 scrollY를 사용하는게 맞는지 궁금합니다.
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
질문드립니다
안녕하세요 강의 너무 재밌게 잘 수강하고 있습니다.일분이 캐릭터 위에 이것처럼 이름을 띄우고 싶은데 어떤 방식으로 해야할 지 막막해서 여쭤봅니다.
-
미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
css 질문 드립니다
.bottom 클래스 스타일에background: url(../image/bottom.png) center bottom/100% no-repeat;로 되어있는데 center bottom/100% 부분은 background-position 속성값일까요?bottom/100% 부분이 이해가 안되서 질문 남깁니다.
-
미해결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(); })();
