25%
57,750원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결애플 웹사이트 인터랙션 클론!
스크롤 section 0-3 정확하지가 않습니다.
section별로 currentScene 0,1,2,3이 정확하게 안떨어집니다. .scroll-section { padding-top: 50vh; border:1px solid red; } 여기서 padding-top: 50vh 를 비활성화 하니 정확하게 들어맞습니다. javscript 에서 scrollHeight 계산시 padding-top 50vh 값을 제외하는것 같아요.
- 해결됨애플 웹사이트 인터랙션 클론!
scene 번호가 안찍혀요~ 현재 활성화시킬 신 결정하기에서 문제가 생겼내요. console에 0이라고만 뜹니다.
(() => { let yOffset = 0; //window.pageyOffset let prevScrollHeight = 0; // 현재 스크롤 위치(yOffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이값의 합 let currentScene = 0; // 현재 활성화된(눈 앞에 보고있는) 씬(scroll-section) const sceneInfo = [ { // 0 type:'sticky', heightNum:5,//브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight :0, objs:{ container:document.querySelector('#scroll-section-0') } }, { // 1 type:'normal', heightNum:5,//브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight :0, objs:{ container:document.querySelector('#scroll-section-1') } }, { // 2 type:'sticky', heightNum:5,//브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight :0, objs:{ container:document.querySelector('#scroll-section-2') } }, { // 3 type:'sticky', heightNum:5,//브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight :0, objs:{ container:document.querySelector('#scroll-section-3') } }, ] function setLayout(){ //각 스크롤 섹션의 높이 세팅 for(let i =0 ; i<sceneInfo.length; i++){ sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; sceneInfo[i].objs.container.style.height =`${sceneInfo[i].scrollHeight}px` } console.log(sceneInfo) } function scrollLoop(){ prevScrollHeight=0; for (let i=0; i<currentScene; i++){ prevScrollHeight += sceneInfo[i].scrollHeight; } if(yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight){ currentScene++; } if(yOffset < prevScrollHeight) { if(currentScene === 0) return; currentScene--; } console.log(currentScene); } window.addEventListener('resize',setLayout); window.addEventListener('scroll', () =>{ yOffset=(window.pageyOffset); scrollLoop(); }) setLayout(); })()
- 해결됨애플 웹사이트 인터랙션 클론!
scroll-section-4에서 resizing시 화면이 깨집니다.
scroll-section-4의 마지막 스크롤 화면에서 작은 화면 -> 큰화면 resizing 후 스크롤하면 이미지 위치가 뒤죽박죽되며 깨집니다. 막강까지 들으면 버그 수정이 있나 했는데 없더라고요..ㅠㅠ
- 미해결애플 웹사이트 인터랙션 클론!
작은 의견 :)
선생님 강의 잘 듣고 있습니다! 다름이 아니고, 인트로 음악은 큰데 선생님 목소리는 작은 편이라, 목소리에 맞춰 소리를 키워놓으면 다음 강의로 넘어갈 때 인트로 소리가 빰하고 크게 나와서 약간 불편한 감이 있습니다나중에 영상 찍으신다면 두 소리가 비슷한 크기면 더 좋을 것 같아요 :) 오늘도 열공하겠습니다~
- 미해결애플 웹사이트 인터랙션 클론!
클래스명 드래그 영역지정 어떻게 하시나요?
저는 클래스 명에 하이픈(-)이 둘어가면 언더바와 다르게 더블클릭으로 한 번에 영역 지정이 안 되던데 어떻게 한 번에 클래스명을 복사하시는 건가요? 약간 쓸데없는 질문이었습니다 ㅎㅎ
- 미해결애플 웹사이트 인터랙션 클론!
scrollRation 수치가 다릅니다ㅣ
강사님 강의하시는 내용의 scrollRatio 수치와 다운로드 받은 예제의 main.js scrollRatio 수치가 다른데 괜챦은 건가요?
- 미해결애플 웹사이트 인터랙션 클론!
다운로드 파일에 강의 화면보다 파일이 많음
파일 다운로드 받으니 css 말고도 폴더가 많은데 상관 없나요?
- 미해결애플 웹사이트 인터랙션 클론!
강사님! 제 질 문에 답변 좀 부탁 드립니다.
어제 질문한 내용에 대한 답변 좀 부탁 드립니다. http://tioletter.com/cellcardi/
- 해결됨애플 웹사이트 인터랙션 클론!
스크롤 애니메이션 구현 3강에서 문제 발생요
잘 따라하다가 스크롤 애니메이션 3 강 12분 근처에서 주석처리 하고 main.css 에서 opcity 0 입력 이후 갑자기 에러 메세지 뜨면서 안되는데 이유를 모르겠습니다.http://tioletter.com/cellcardi/ 코칭 부탁 드립니다.
- 미해결애플 웹사이트 인터랙션 클론!
[캔버스를 창사이즈에 맞추기] 질문.
sticky-elem-canvas (div container)의 위치를 top left 50% 50%으로 한 후에 canvas elemen에 translate3d(-50%,-50%,0)을 하면 센터정렬이 된다고 하셨는데요. 이 원리가 어떻게 되는지 궁금합니다. 정확히말하자면 div 50% 후에 translate3d에서의 -50%값들이 어떤식으로 계산되길래, 가운데로 딱 맞춰지는지 궁금합니다. 50% 말고, 10%&-10% 등 다른값들은 정확히 센터정렬이 안되더라구요. ----------------------------------------- +) 마지막 섹션의 canvas는 센터정렬할때 flex로 하셨었죠. 첫번째 섹션의 canvas 센터정렬도 translate3d() + scale() 대신 flex로 센터정렬을 해도 괜찮을까요? 예를들어, <div class="sticky-elem sticky-elem-canvas"> <div class="wrapper"> <canvas id="video-canvas-0" width="1920" height="1080"></canvas> </div> </div> 이런식으로 wrapper를 하나 추가하고, .wrapper{ width:100%; height:100%; display:flex; align-items: center; justify-content: center; } .sticky-elem-canvas canvas { /* position: absolute; top: 50%; left: 50%; */ } .sticky-elem-canvas { top: 0; height: 100%; } 이런식으로 wrapper에 height와 width를 배정한뒤에 flex로 center로 처리하니 canvas가 가운데로 오긴하더라구요. 이렇게 할경우에 따로 문제가 생길 수 있는게 있을까요?
- 해결됨애플 웹사이트 인터랙션 클론!
function setLayout이 적용 안되요
강사님 따라 했는데 왜 setLayout 적용이 안되는지 모르겠습니다. 스크롤 바가 작아지지 않아요. 코칭 부탁 드립니다.~ http://tioletter.com/cellcardi/ 제가 작업하고 있는 url 보내 드립니다. 감사합니다.
- 미해결애플 웹사이트 인터랙션 클론!
calcValue 함수 질문입니다 ㅠ
calcValue 함수 질문입니다 ㅠ calc 함수 역할을 '알맞은 비율까지 스크롤하였을때, 애니메이션에 사용되어야할 css값을 리턴한다' 로 이해하였습니다. 그런데 이해가 잘 안가는 부분이..rv 값을 계산식이 'rv = scrollRatio + 전체 범위 + 시작값' 으로 해주셨는데, 시작값을 더해야 하는 이유가 정확히 잘 이해가 가지 않습니다. ㅠ 다시 정리하자면 1. 강의에서 calcValue 함수 역할을 제대로 제가 이해했는지 궁금합니다. 2. rv값 계산식에서 시작값을 더한 이유가 궁금합니다. 입니다. 해당 코드: function calcValues(values, currentYoffset) { let rv; let scrollRatio = currentYoffset / sceneInfo[currentScene].scrollHeight; rv = scrollRatio * (values[1] - values[0]) + values[0]; return rv; }
- 해결됨애플 웹사이트 인터랙션 클론!
섹션 1에 텍스트 표시가 안되는 이유를 알고 싶습니다.
똑같이 따라했는데 섹션 1에 <h1>태그만 텍스트가 표시되고 나머지 텍스트는 표시가 안되는 이유를 모르겠습니다. 섹션2 는 표시가 됩니다. 화면 캡쳐해서 보내드립니다.
- 미해결애플 웹사이트 인터랙션 클론!
네비 div a 태그 문의드려요
애플 사이트 네비의 경유 li로 a를 감쌌는데사님은 div로 감싼 이유가 있나요?요즘 실무 추세가 ul li 없이 a태그만 쓰는건가요??저도 항상 리스트 태그없이 a 태그만 쓰고 싶었는데 학원이나 일반 사이트에서 전부 ul li로 감싸더라구요,,div에 a만 써도 표준기법이 아니라는둥 지적하나요..?(포트폴리오 코드검사시...) 포트폴리오에 이렇게 간단하게 만들어서 넣고싶은데 전 ul li쓰는게 css 적용하면 딱히 의미가 없다고 보거든요 ㅠㅠ
- 해결됨애플 웹사이트 인터랙션 클론!
[Main.js 적용내용 강의] 질문.
pinB & pinC같은경우는, sticky-elem desc-message의 하위속성인데요. <div class="sticky-elem desc-message b"> ... <div class="pin"> </div> </div> 그래서 sticky-elem desc-message b 의 태그에 대해서 js로 opacity를 정해주면 desc-message b 뿐만아니라 pin까지 opacity가 조정되더라구요. 근데 완성코드와 강의영상에는 (1) 메세지에대한 opacity정보와 messageB_opacity_in: [0, 1, { start: 0.6, end: 0.65 }] (2) 추가적으로 pinB에 대한 opacity값까지 설정하고 조정하시던데.. pinB_opacity_in: [0, 1, { start: 0.6, end: 0.65 }], 이렇게하는 특별한 이유가 있을까요? +) 또 opacity속성에 scaleY로 된 값을 넣어주는 특별한 이유가 있을까요? objs.pinC.style.opacity = `scaleY(${calcValues(values.pinC_opacity_in, currentYOffset)})`; 감사합니다.
- 미해결애플 웹사이트 인터랙션 클론!
br관련
이 부분에서 small에 display:block을 주셧는데 그냥 br 태그를 써서 내려도 상관없을까요?? <div class="scroll__message stickyelement"> <p> <small>편안한 촉감</small><br /> 입과 하나 되다 </p> </div>
- 미해결애플 웹사이트 인터랙션 클론!
애플홈페이지 다른 기능에 대해 궁금한 점이 있습니다!
안녕하세요! 애플 공식사이트 https://www.apple.com/kr/iphone-se/ 에서 스크롤 시 svg이미지가 투명해지면서 커지면서 안쪽부터 이미지 또는 동영상이 나오는데. 아무리 개발자 창을 보아도 이해가 되지를 않습니다. 제가 봐야할 키워드 또는 원리를 잠시 가르쳐주실 수 있으실까요??
- 미해결애플 웹사이트 인터랙션 클론!
페이지 중간에서 F5 새로고침했을때
페이지 중간이나 상단에서 조금만 떨어진 후 F5 새로고침했을때 보이지 말아야할 다른 씬이 나옵니다. 그리고 씬2 부분에서 새로고침을 했을때 이미지가 바로 보이지가 않습니다. 스크롤 액션이 먹힌 뒤 나오는데 이는 텍스트 부분도 그렇습니다. 전반적으로 페이지 첫 부분이 아닌 다른 부분에서 새로고침을 했을때 조금 이상하네요!
- 미해결애플 웹사이트 인터랙션 클론!
강의가 다 안끝난거 같은데요?
강의가 다 안끝난거 같은데 동영상이 끝났어요
- 미해결애플 웹사이트 인터랙션 클론!
씬이 바뀔 때 나오는 마이너스 스크롤값에 보완에 대한 질문입니다
질문이 있습니다! scene이 바뀌는 순간 스코롤 값이 마이너스 값이 나오는 오류를 막기 위해 true/false를 사용하셨는데, true/false가 왜 이런 오류를 막아주었는지 이해가 되지 않습니다!