월 15,400원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결애플 웹사이트 인터랙션 클론!
#scroll-section-3 부분 질문입니다!
#scroll-section-3 부분이 나오기 전에 강의예제는sticky 에서 sticky로 넘어가잖아요근데 제가 변형시켜서 normal로 바꾸고 그안에비디오를 넣어주었습니다!근데 #scroll-section-3 부분의 패딩값때문인지너무 뒤늦게 #scroll-section-3신이 등장을 하여 여백이 너무 커서normal부분에 나오는 비디오 부분을 scrollRatio로 지정해서픽스해주고 opacity로 자연스럽게 없어지고 #scroll-section-3이 자연스럽게 나올수 있게 하였는데모바일화면에서 기기별로 뚝뚝 끊겨서 픽스가 되어버려서 scrollRatio 를 만져줘야하는지 어디부분을 손데어야 하는지 도무지 모르겠어서 질문 남깁니다!제 설명이 이상해서 그부분 소스를 올려보겠습니다!case 4: // 비디오 고정되는 부분 if (scrollRatio <= 0.37) { $('.tetest').removeClass("fix-test"); } else { $('.tetest').addClass("fix-test"); } if (scrollRatio <= 0.06) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); } if (scrollRatio <= 0.99) { objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); } if(scrollRatio >= 0.65) { console.log('닿기전'); const objs = sceneInfo[5].objs; const values = sceneInfo[5].values; const widthRatio = window.innerWidth / objs.canvas.width; const heightRatio = window.innerHeight / objs.canvas.height; let canvasScaleRatio; if (widthRatio <= heightRatio) { //캔버스보다 브라우저 창이 홀쭉한 경우 canvasScaleRatio = heightRatio; } else { //캔버스보다 브라우저 창이 납작한 경우 canvasScaleRatio = widthRatio; } objs.canvas.style.transform = `scale(${canvasScaleRatio})`; objs.context.fillStyle = 'white'; objs.context.drawImage(objs.images[0], -370, -170); //캔버스 사이즈에 맞춰 가정한 innerWidth와 InnerHeight const recalculatedInnerWidth = document.body.offsetWidth / canvasScaleRatio; const recalculatedInnerHeight = window.innerHeight / canvasScaleRatio; const whiteRectWidth = recalculatedInnerWidth * 0.15; values.rect1X[0] = (objs.canvas.width - recalculatedInnerWidth) / 2; values.rect1X[1] = values.rect1X[0] - whiteRectWidth; values.rect2X[0] = values.rect1X[0] + recalculatedInnerWidth - whiteRectWidth; values.rect2X[1] = values.rect2X[0] + whiteRectWidth; //좌우 흰색 박스 그리기 // objs.context.fillRect(values.rect1X[0], 0, parseInt(whiteRectWidth), objs.canvas.height); // objs.context.fillRect(values.rect2X[0], 0, parseInt(whiteRectWidth), objs.canvas.height); // 좌우 흰색 박스 그리기 objs.context.fillRect( parseInt(values.rect1X[0]), 0, parseInt(whiteRectWidth), objs.canvas.height ); objs.context.fillRect( parseInt(values.rect2X[0]), 0, parseInt(whiteRectWidth), objs.canvas.height ); } break; -------------------------------------------case 5: // #scroll-section3 console.log('닿은후'); // 가로/세로 모두 꽉 차게 하기 위해 여기서 세팅(계산 필요) let step = 0; const widthRatio = window.innerWidth / objs.canvas.width; const heightRatio = window.innerHeight / objs.canvas.height; const gradient = objs.context.createLinearGradient(0, 0, 0, 1000); let canvasScaleRatio; if (widthRatio <= heightRatio) { //캔버스보다 브라우저 창이 홀쭉한 경우 canvasScaleRatio = heightRatio; } else { //캔버스보다 브라우저 창이 납작한 경우 canvasScaleRatio = widthRatio; } objs.canvas.style.transform = `scale(${canvasScaleRatio})`; objs.context.fillStyle = 'white'; objs.context.drawImage(objs.images[0], -370, -170); //캔버스 사이즈에 맞춰 가정한 innerWidth와 InnerHeight const recalculatedInnerWidth = document.body.offsetWidth / canvasScaleRatio; const recalculatedInnerHeight = window.innerHeight / canvasScaleRatio; if (!values.rectStartY){ // values.rectStartY = objs.canvas.getBoundingClientRect().top; values.rectStartY = objs.canvas.offsetTop + (objs.canvas.height - objs.canvas.height * canvasScaleRatio) / 2; console.log(values.rectStartY); values.rect1X[2].start = (window.innerHeight / 2) / scrollHeight; values.rect2X[2].start = (window.innerHeight / 2) / scrollHeight; values.rect1X[2].end = values.rectStartY / scrollHeight; values.rect2X[2].end = values.rectStartY / scrollHeight; } //좌우 박스 크기 const whiteRectWidth = recalculatedInnerWidth * 0.15; values.rect1X[0] = (objs.canvas.width - recalculatedInnerWidth) / 2; values.rect1X[1] = values.rect1X[0] - whiteRectWidth; values.rect2X[0] = values.rect1X[0] + recalculatedInnerWidth - whiteRectWidth; values.rect2X[1] = values.rect2X[0] + whiteRectWidth; //좌우 흰색 박스 그리기 // objs.context.fillRect(values.rect1X[0], 0, parseInt(whiteRectWidth), objs.canvas.height); // objs.context.fillRect(values.rect2X[0], 0, parseInt(whiteRectWidth), objs.canvas.height); // 좌우 흰색 박스 그리기 objs.context.fillRect( parseInt(calcValues(values.rect1X, currentYOffset)), 0, parseInt(whiteRectWidth), objs.canvas.height ); objs.context.fillRect( parseInt(calcValues(values.rect2X, currentYOffset)), 0, parseInt(whiteRectWidth), objs.canvas.height ); // Add three color stops gradient.addColorStop(0, "rgba(13, 12, 17, 0)"); gradient.addColorStop(0.3, "rgba(13, 12, 17, 0)"); gradient.addColorStop(0.5, "rgba(13, 12, 17, 0.1)"); gradient.addColorStop(0.6, "rgba(13, 12, 17, 0.3)"); gradient.addColorStop(0.8, "rgba(13, 12, 17, 0.7)"); gradient.addColorStop(1, "rgba(13, 12, 17, 1)"); if (scrollRatio < values.rect1X[2].end){ step = 1; // console.log('캔버스 닿기 전'); objs.canvas.classList.remove('stickyy'); } else { step = 2; // console.log('캔버스 닿을때'); // imageBlendY: [ 0, 0, { start: 0, end: 0 }] values.blendHeight[0] = 0; values.blendHeight[1] = objs.canvas.height; values.blendHeight[2].start = values.rect1X[2].end; values.blendHeight[2].end = values.blendHeight[2].start + 0.2; const blendHeight = calcValues(values.blendHeight, currentYOffset); // Set the fill style and draw a rectangle objs.context.fillStyle = gradient; objs.context.fillRect(0, objs.canvas.height - blendHeight, objs.canvas.width, blendHeight, 0, objs.canvas.height - blendHeight, objs.canvas.width, blendHeight); objs.canvas.classList.add('stickyy'); objs.canvas.style.top =`${-(objs.canvas.height - objs.canvas.height * canvasScaleRatio) / 2}px`; if (scrollRatio > values.blendHeight[2].end){ objs.canvas.classList.remove('stickyy'); objs.canvas.style.marginTop = `${scrollHeight * 0.2}px`; } else { objs.canvas.style.marginTop = 0; } // index2 추가 코드 values.messageA_opacity_in[2].start = values.rect1X[2].end; values.messageA_opacity_in[2].end = values.blendHeight[2].start + 0.1; values.messageA_opacity_out[2].start = values.messageA_opacity_in[2].end + 0.1; values.messageA_opacity_out[2].end = values.messageA_opacity_out[2].start + 0.1; if (scrollRatio < values.messageA_opacity_in[2].end + 0.05) { objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); } else { objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); } } // index2 추가 코드 if (scrollRatio <= values.messageA_opacity_in[2].start) { objs.messageA.style.opacity = values.messageA_opacity_in[0]; } if (scrollRatio >= values.messageA_opacity_out[2].end) { objs.messageA.style.opacity = values.messageA_opacity_out[1]; } // section-7 그라데이션 클래스 주기 if (scrollRatio <= 0.93) { $('.linear1').removeClass("linear-1"); $('.linear1').removeClass("linear1-1"); $('.tetest').removeClass("fix-test"); } else { $('.linear1').addClass("linear-1"); $('.linear1').addClass("linear1-1"); } break;
- 미해결애플 웹사이트 인터랙션 클론!
안녕하세요 꼭 좀 부탁드려요..4시간째 검색해도 답이없네요..
// (function() {}) (); 아래 함수와 같은 뜻 // (() => { // })(); (() => { //함수 안에 작성(전역변수 피하기 위함(지역변수)) 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, //창 사이즈 변경 대응해야해서 0값주고 따로 함수 처리 objs: { //html dom객체 요소들 container: document.querySelector('#scroll-section-0'), messageA: document.querySelector('#scroll-section-0 .main-massage.a'), //에니메이션 조작할 css들 가져옴 messageB: document.querySelector('#scroll-section-0 .main-massage.b'), messageC: document.querySelector('#scroll-section-0 .main-massage.c'), messageD: document.querySelector('#scroll-section-0 .main-massage.d') }, values: { messageA_opacity: [0, 1] } }, { //1 type: 'normal', heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight: 0, //창 사이즈 변경 대응해야해서 0값주고 따로 함수 처리 objs: { container: document.querySelector('#scroll-section-1') } }, { //2 type: 'sticky', heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight: 0, //창 사이즈 변경 대응해야해서 0값주고 따로 함수 처리 objs: { container: document.querySelector('#scroll-section-2') } }, { //3 type: 'sticky', heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight: 0, //창 사이즈 변경 대응해야해서 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`; } yOffset = window.pageYOffset; let totalScrollHeight = 0; for (let i = 0; i < sceneInfo.length; i++) { totalScrollHeight += sceneInfo[i].scrollHeight; //각 신의 scrollHeight를 더해서 넣어주고있음 if (totalScrollHeight >= yOffset) { //토탈스크롤에 들어가는 값이랑 현재y스크롤 위치를 비교해서 더 커지면 currentScene = i; //현재 i를 세팅하고 break; //for문을 멈추고 빠져나옴 } } document.body.setAttribute('id', `show-scene-${currentScene}`); } function calcValues(values, currentYOffset) { let rv; //현재 씬(스크롤섹션)에서 스크롤된 범위를 비율로 구하기 let scrollRatio = currentYOffset / sceneInfo[currentScene].scrollHeight; rv = scrollRatio * (values[1] - values[0]) + values[0]; return rv; } function playAnimation() { const objs = sceneInfo[currentScene].objs; const values = sceneInfo[currentScene].values; const currentYOffset = yOffset - prevScrollHeight; switch (currentScene) { case 0: // console.log('0 play'); let messageA_opacity_in = calcValues(values.messageA_opacity, currentYOffset); objs.messageA.style.opacity = messageA_opacity_in; break; case 1: // console.log('1 play'); break; case 2: // console.log('2 play'); break; case 3: // console.log('3 play'); break; } } function scrollLoop() { prevScrollHeight = 0; for ( let i = 0; i < currentScene; i++) { prevScrollHeight += sceneInfo[i].scrollHeight; } if (yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight) { currentScene++; document.body.setAttribute('id', `show-scene-${currentScene}`); //변수랑 문자열 섞여 있으니까 (``백틱 사용) } if (yOffset < prevScrollHeight) { if (currentScene === 0) return; //0이면 리턴 보낸다는 뜻으로 스트롤 위쪽으로 -되는거 방지(모바일에서) currentScene--; document.body.setAttribute('id', `show-scene-${currentScene}`); //변수랑 문자열 섞여 있으니까 (``백틱 사용) } playAnimation(); } window.addEventListener('scroll', () => { yOffset = window.pageYOffset; scrollLoop(); }); // window.addEventListener('DOMContentLoaded', setLayout); //DOMContentLoaded가 load보다 실행 시점이 빠르나 이미지 및 영상 출력 전에 HTML실행 window.addEventListener('load', setLayout); //load 되면 setLayout을 실행하는걸로 window.addEventListener('resize', setLayout); //윈도우 창의 사이즈에따라 setLayout대응 })(); 안녕하세요현재 스크롤 애니메이션 구현3를 들으면서코딩 따라하고 있는 도중에switch (currentScene) { case 0: // console.log('0 play'); let messageA_opacity_in = calcValues(values.messageA_opacity, currentYOffset); objs.messageA.style.opacity = messageA_opacity_in; break; 여기 부분에서objs.messageA.style.opacity = messageA_opacity_in;이 코드 를 빼면 에러표시가 안뜨는데추가하면 마우스 스크롤시 에러 표시가 이렇게 뜨네요...Uncaught TypeError: Cannot read properties of null (reading 'style')도움좀 부탁드려요..html에 스크립트 위치도 body 최하단에 잘 위치해 있어요.. - 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결애플 웹사이트 인터랙션 클론!
margin-right:auto 대신 flex-grow
product-name { margin-right:auto; flex-grow: 1; } 1.저 같은 경우는 auto대신 flex-glow:1로 영역을 잡았는데 딱히 뭘 써도 상관없을까요~? 2.이건 위 내용과 관계없지만 음 엘리먼트끼리 간격을 줄때 어떤 상황때 margin을 사용하고 padding을 사용하는 기준이 있을까요?
- 미해결애플 웹사이트 인터랙션 클론!
이미지가 폴더에 있는 부분까지 잘 불러와지는데 그 이후 반복문이 멈추지 않는것 같습니다
강의를 들으며 다른 이미지 파일들로 비슷한 페이지를 제작중에 있는데 setImages 함수부분에서 이미지가 totalImagesCount보다 더 불러와지는 현상이 발생하는 것같습니다 콘솔창에는Failed to load resource: the server responded with a status of 404 (Not Found)라는 오류와 함께 totalImagesCount로 저장한 1812 이후의(1813부터) 파일명을 가진 이미지들을 찾을 수 없다고 나오지만 스크롤 인터렉션은 잘 작동합니다스크롤이 끝나고나면 아래와같은 오류가 뜨고Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state. 자바스크립트 파일의 context.drawImage(videoImages[currentFrame], 0, 0);부분에 문제가 있다고 뜨는데 어떻게 해결해야할까요ㅜㅜ
- 미해결애플 웹사이트 인터랙션 클론!
아이폰 사파리 에서 밑에 하단bar 가 생겼다 안생겼다해서
아이폰 사파리 에서 밑에 하단bar 가 생겼다 안생겼다해서height가 이상하게 잡혔다 풀렸다 하는데 혹시 height의 오류에 관련된 꿀팁이 있는지 궁금합니다!
- 미해결애플 웹사이트 인터랙션 클론!
currentScene의 증감이 창 중간에서 이뤄집니다.
10강 보고 있는데요currentScene값이 창 젤 위엣부분이 아니라창 중간에서 값이 증감이 되는데도저히 모르것습니다 ㅠㅠ뭐가 잘못된건가요 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>AirMug Pro</title> <link rel="stylesheet" href="css/mymain.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;900&display=swap" rel="stylesheet"> </head> <body> <div class="container"> <nav class="global-nav"> <nav class="global-nav-links"> <a href="#" class="global-nav-item">Rooms</a> <a href="#" class="global-nav-item">Ideas</a> <a href="#" class="global-nav-item">Stores</a> <a href="#" class="global-nav-item">Contact</a> </nav> <nav class="local-nav"> <div class="local-nav-links"> <a href="#" class="product-name">AirMug Pro</a> <a href="#">개요</a> <a href="#">주요사항</a> <a href="#">구입하기</a> </div> </nav> </nav> <section class="scroll-section" id="scroll-section-0"> <h1>AirMug Pro</h1> <div class="sticky-elem main-message"> <p>온전히 빠져들게 하는<br>최고급 세라믹</p> </div> <div class="sticky-elem main-message"> <p>주변 맛을 느끼게 해주는<br>주변 맛 허용 모드</p> </div> <div class="sticky-elem main-message"> <p>온종일 편안한<br>맞춤형 손잡이</p> </div> <div class="sticky-elem main-message"> <p>새롭게 입가를<br>찾아온 매혹</p> </div> </section> <section class="scroll-section" id="scroll-section-1"> <p class="desciption"><strong>보통 스크롤 영역</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quae quo tempora, eligendi quia deleniti. Modi repudiandae, consequuntur quisquam aliquid veritatis, deleniti ea harum tempore maxime tenetur pariatur? Neque reprehenderit itaque ea optio, labore dolorem doloremque nobis sapiente iusto iure officia possimus distinctio maiores aspernatur? Natus illum maxime perspiciatis, blanditiis temporibus et cum dignissimos possimus commodi ea sint non, magnam maiores voluptatum unde accusamus praesentium explicabo harum a? Porro modi sequi eaque minus nulla animi iure deleniti corporis necessitatibus magni ullam laborum obcaecati doloremque, dignissimos iste delectus soluta. Quia corporis amet cupiditate, eligendi eum similique delectus nihil necessitatibus ex vitae debitis laboriosam consectetur officia obcaecati quis, excepturi qui laudantium incidunt nostrum? Tenetur iste aperiam ad odio aliquid vel magnam obcaecati impedit quas exercitationem omnis incidunt voluptas illo est deleniti aliquam vero ipsum facilis similique reprehenderit enim, quis voluptatibus voluptates neque! Natus unde saepe eaque tempore consequuntur reprehenderit vel necessitatibus a ab commodi, illum consequatur. Architecto commodi aspernatur, tenetur, molestiae quidem expedita, aliquam fuga sit quis veniam ducimus quaerat nulla eius ratione soluta accusantium quod laudantium unde ab sequi ea minima doloribus officiis? Inventore facere pariatur excepturi architecto nulla esse dicta at, hic consequatur tenetur aliquam ea aperiam laboriosam dolorum debitis. </p> </section> <section class="scroll-section" id="scroll-section-2"> <div class="sticky-elem main-message"> <p><small>편안하 촉감</small>입과 하나 되다</p> </div> <div class="sticky-elem desc-message"> <p> 편안한 목넘김을 완성하는 디테일한 여러 구성 요소들, 우리는 이를 하나하나 새롭게 살피고 재구성하는 과정을 거쳐 새로운 수준의 머그, AirMug Pro를 만들었습니다. 입에 뭔가 댔다는 감각은 어느새 사라지고 오롯이 당신과 음료만 남게 되죠. </p> <div class="pin"></div> </div> <div class="sticky-elem main-message"> <p> 디자인 앤 퀄리티 오브 스웨덴,<br>메이드 인 차이나 </p> <div class="pin"></div> </div> </section> <section class="scroll-section" id="scroll-section-3"> <p class="mid-message"> <strong>Retina 머그</strong><br> 아이디어를 광활하게 펼칠<br> 아름답고 부드러운 음료 공간. </p> <p class="canvas-caption"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat, alias molestias! At excepturi ad explicabo, voluptatum odio qui ipsam placeat similique officia. Obcaecati enim officiis perferendis ex repellendus maxime expedita quae animi blanditiis? Inventore neque eum reiciendis, reprehenderit, maiores eaque illo mollitia commodi dolorem accusamus vero optio veritatis dolore facere doloribus, quia sit labore sunt! Quos, voluptate soluta quam tempore assumenda dolorum aut at deleniti unde. Inventore itaque reiciendis doloribus quas nesciunt aperiam eius natus esse consectetur labore iure veritatis, dolor enim placeat quaerat quam quo culpa amet. Facere culpa ullam non recusandae error officiis aliquam laudantium, expedita similique exercitationem explicabo cum optio porro est saepe aspernatur neque corrupti quos pariatur totam at in quaerat autem. Aliquid quasi id eligendi at voluptates itaque omnis, necessitatibus nobis voluptatem magnam quas fugit delectus dicta molestias ab? A quod facilis blanditiis nulla perferendis tenetur odit. Culpa voluptates laudantium pariatur unde aspernatur hic, atque error. Culpa consequatur necessitatibus alias incidunt autem iusto molestias illo nemo minus. Id nemo pariatur esse suscipit inventore, distinctio hic, voluptas ad odit eum facilis debitis explicabo iste sunt alias nulla, qui maxime non aliquam! Veniam dolores deleniti aut illum sint, culpa eveniet quo quis praesentium consequuntur voluptatum ea cum. </p> </section> <footer class="footer"> 2020, 1분코딩 </footer> </div> <script src="js/myjs.js"></script> </body> </html> (()=>{ let yOffset = 0; //window.pageYOffset 대신에 쓸 변수 let prevScrollHeight = 0; //현재 스크롤위치(pageYOffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이값의 합 let currentScene = 0; //현재 활성화된 씬 const sceneInfo = [ { type : 'sticky', heightNum : 5, //브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight : 0, objs : { container : document.querySelector('#scroll-section-0') } }, { type : 'normal', heightNum : 5, //브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight : 0, objs : { container : document.querySelector('#scroll-section-1') } }, { type : 'sticky', heightNum : 5, //브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight : 0, objs : { container : document.querySelector('#scroll-section-2') } }, { 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){ currentScene-- ; } console.log(currentScene) } window.addEventListener('resize', setLayout) window.addEventListener('scroll', () => { yOffset = window.pageYOffset; scrollLoop(); }) setLayout(); })() @charset 'utf-8' html{ font-family: 'Noto Sans KR', sans-serif; font-size: 14px; } body{ overflow-x: hidden; /*가로스크롤 안생김*/ color: rgb(29, 29, 31); letter-spacing: -0.05em; background: white; } p{ line-height: 1.6; } a{ color: rgb(29,29,31); text-decoration: none; } .global-nav{ position: absolute; top: 0; left: 0; width: 100%; height: 44px; padding: 0 1rem; } .local-nav{ position: absolute; top: 45px; left: 0; width: 100%; height: 52px; border-bottom: 1px solid #ddd; padding: 0 1rem; } .global-nav-links, .local-nav-links{ display: flex; align-items: center; max-width: 1000px; margin: 0 auto; height: 100%; } .global-nav-links { justify-content: space-between; } .local-nav-links a{ font-size: 0.8rem; } .local-nav-links a:not(.product-name){ margin-left: 2em; } .local-nav-links .product-name{ margin-right: auto; font-size: 1.4rem; font-weight: bold; } .scroll-section{ border: 3px solid red; padding-top: 50vh; } #scroll-section-0 h1{ font-size: 4rem; text-align: center; } .main-message{ display: flex; align-items: center; justify-content: center; height: 3em; font-size: 2.5rem; margin: 5px 0; max-width: 1000px; margin: 0 auto; } .main-message p{ line-height: 1.2; font-weight: bold; text-align: center; } .main-message small{ display: block; font-size: 1.2rem; margin-bottom: 0.5em; } #scroll-section-2 .main-message{ font-size: 3.5rem; } .desciption{ padding: 0 1rem; font-size: 1.2rem; color: #888; margin: 0 auto; max-width: 1000px; } .desciption strong{ font-size: 3rem; color: rgb(29, 29, 31); float: left; margin-right: 0.2em; } .desc-message{ font-weight: bold; width: 50%; } .pin{ width: 1px; height: 100px; background: rgb(29, 29, 31); } .mid-message{ font-size: 2rem; padding: 1em; color: #888; } .mid-message strong{ color: rgb(29, 29, 31); } .canvas-caption{ color: #888; padding: 0 1rem; text-align: center; font-size: 1.2rem; max-width: 1000px; margin: 0 auto; } .footer{ display: flex; align-items: center; justify-content: center; height: 7rem; background: darkorange; } .sticky-elem{ display: none; position: fixed; top: 0; left: 0; width: 100%; } #show-scene-0 #scroll-section-0 .sticky-elem, #show-scene-1 #scroll-section-1 .sticky-elem, #show-scene-2 #scroll-section-2 .sticky-elem, #show-scene-3 #scroll-section-3 .sticky-elem{ display: block; } @media (min-width: 1024px) { #scroll-section-0 h1 { font-size: 9vw; } .main-message { font-size: 4vw; } .description { padding: 0; font-size: 2rem; } .description strong { font-size: 6rem; } #scroll-section-2 .main-message { font-size: 6vw; } .main-message small { font-size: 1.5vw; } .desc-message { width: 20%; } .mid-message { font-size: 4vw; } .canvas-caption { font-size: 2rem; } }
- 미해결애플 웹사이트 인터랙션 클론!
클래스 바로 입력하는 방법
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 섹션1. 웹페이지 골격 만들기 > 페이지 내용 HTML 작성 강의 내1:58 쯤에 클래스 바로 작성하는 부분이 있는데요. 이렇게 입력하려면 어떻게 해야하나요?검색 키워드도 모르겠어서 질문합니다.
- 해결됨애플 웹사이트 인터랙션 클론!
인터랙티브웹을 공부하기 위해서
안녕하세요 선생님 좋은 강의 정말 잘 보고 있습니다!공부하다보니 한가지 궁금한 점이 생겨서 질문 드립니다.제가 수학을 그리 잘 하지 못하는데..애플 클론 코딩을 해보니 혼자서 저렇게 값을 구하는 공식을 짜라고 하면 못할 것 같더라고요 ㅠㅠ..선생님께서도 보통적으로 자주 쓰는 저런 공식(?)들은 알아뒀다가 복붙해서 사용하시는 건지.. 아니면 전부 직접 연산식을 만드셔서 사용하는건지 궁금합니다..ㅠ 뭔가 자신이 없어지네요역시 수학 공부를 더 하는 것이 답이겠지만 혹시 어떻게 공부하는 것이 좋을 지 조언 해주실 수 있으신가요??
- 미해결애플 웹사이트 인터랙션 클론!
main-message css 질문
안녕하세요. 선생님 강의와 같이 main-message 파트 css 작성했는데, flex가 동작을 안하는 건지 하기 사진과 같은 상태입니다. HTML 오타있는지 꼼꼼히 살펴봤는데, 오타는 없구여.. 뭐가 문제인지 말씀해주시면 감사하겠습니다.
- 미해결애플 웹사이트 인터랙션 클론!
코드 이름 검색해서 찾아가는 거 혹시 이름 알 수 있을까욤??
코드 이름 검색해서 찾아가는 거 혹시 이름 알 수 있을까욤??
- 미해결애플 웹사이트 인터랙션 클론!
window.innerHeight 값에 대해 질문드립니다
* 실습 소스 / window.innerHeight : 1206다운로드 소스 / window.innerHeight : 956안녕하세요~ 캔버스 크기가 브라우저 높이 값에 따라 비율을 계산해서 scale()로 크기가 맞춰지는데,제가 실습하는 소스에서는 캔버스 크기가 맞춰지지 않더라고요~ (이로인해 윈도우창에 세로 스크롤바가 생성됩니다.) 그래서 각 값들을 비교해보니 window.innerHeight 값이 이상하게 확인되고 있습니다.강사님의 소스에서는 정확한 window.innerHeight이 나오는데 말이죠. ( 동일한 브라우저, 동일한 사이즈의 크기로 보는 상태입니다.) 이런 경우 어떠한 방법으로 해결을 할 수 있을까요?
- 미해결애플 웹사이트 인터랙션 클론!
이미지 대신 비디오 2
안녕하세요 선생님!저번에 이미지 대신에 비디오를 넣을수 있는지 물어본 학생입니다! 다름이아니라 어찌어찌 하여 이미지 대신 비디오를 넣긴 했는데 재생이 안됩니다. ㅠㅠ 그리고 유튜브에 선생님 강의보면서 적용을 시켜 비디오를 나오게 했는데 스크롤을 내리면 비디오 작동이 안되더라구요.. 어떻게 해결을 해야할지 너무 헷갈리고 모르겠습니다. 도와주시면 감사할거 같아요!
- 미해결애플 웹사이트 인터랙션 클론!
사이드 박스가 줄어들지 않다가 갑자기 한번에 이미지가 꽉 차집니다
저는 위에 다른것들을 활용해서 예제 case3을 case6까지 끌고와서 사용하는데 다른 예제 했던걸 그대로 가져와서 case6으로 변경해주고 변경해주어야할것들 다 변경해주었는데 오류? 오류라기보다 스크롤을 내렸을때 갑자기 양사이드 박스가 없어지면서 화면이 꽉차집니다.. 도대체 뭐가 문제인지 잘모르겠습니다..
- 미해결애플 웹사이트 인터랙션 클론!
id="scroll-section-0" 여기서 class를 사용하지 않으신 이유가
안녕하세요 !CSS선택자를 정할때 가급적 id 선택자는 향후 재활용이나 유연성이 떨어진다고 배웠습니다 class를 사용하지 않으신 다른 이유가 있으신지요?
- 미해결애플 웹사이트 인터랙션 클론!
css > left:0; width:100% 과 left:0; right:0; 의 차이점
선생님 강의듣다 궁금증이 생겨 질문 남깁니다!!position을 사용시,1. left:0; width:100%;2. left:0; right:0;이렇게 두가지 방식으로 화면을 다 채우는 방법을 있는것으로 알고있는데,둘의 차이점을 알고싶습니다!
- 미해결애플 웹사이트 인터랙션 클론!
미디어쿼리 px 소수점 단위 질문드립니다.
안녕하세요 선생님.영상을 보다 문득 궁금한게 있어 문의드립니다. !!보통 미디어 쿼리단위를 1px단위로 끊어서1024px이런식으로 작성하는거 같습니다.디바이스 화면크기가 소수점으로 떨어질 일은 없어보이지만저희가 실제 화면창을 리사이즈할시, 1023.9px이 나오는 경우도 있는데, 이런 경우에는 소수점으로 정의하는것이 좋은 방법인지 궁금하여 질문드립니다!
- 미해결애플 웹사이트 인터랙션 클론!
scrollRatio값
안녕하세요!~ function calcValues(values, currentYOffest) { let rv; // 현재 씬(스크롤섹션)에서 스크롤된 범위를 비율로 구하기 let scrollRatio = currentYOffest / sceneInfo[currentScene].scrollHeight //현재씬에 전체범위분에 현재얼마나 스크롤했는지 return scrollRatio; } console.log(calcValues(values, currentYOffest)); scrollRatio 값은 변수에 담고 scrollRatio 리턴을 했잖아요... console에 scrollRatio값을 console로 찍은값이 없는데 어떻게 수치가 찍혀서 나오는건지 이해가 안가네요...
- 미해결애플 웹사이트 인터랙션 클론!
글 나오는 구간을 좀더 짧고 빨리나오게 하고싶어요
case2글 나오는 구간을 좀더 짧고 빨리나오게 하고싶어요
- 미해결애플 웹사이트 인터랙션 클론!
다른 라이브러리 애니메이션 추가
스크롤 내렸을때 텍스트나 이미지들한테 라이브러리 애니메이션효과를 넣어봤는데 충돌이 난건지 안되더라구요..그래서 지금 배우고있는 스크립트 소스랑 라이브러리 효과들을 같이 사용할수 없는건지 궁금합니다!
- 미해결애플 웹사이트 인터랙션 클론!
Flex-direction column, align-items center
안녕하세요. 선생님의 Svg강의부터 유튜브 자바스크립트 강의 등 잘 듣고 여기까지 왔습니다. 정말 감사드립니다.#scroll-section-3{ Display : flex;Flex-direction: column;Align-items: center;}부분에서 display:flex를 하게되면 기본이 수평정렬이니 Flex-direction 세로방향을 통해 정렬해야하는건 잘 이해했습니다. Flex-direction을 통해 안에있는 아이템들이 본인들의 크기를 잘 가지면서 세로로 잘 정렬이 되며 특히 일분이 사진은 대략 810 x 456 크기로 화면 벗어남 없이 적정사이즈로 잘 들어옵니다. 그러다 align-items 센터로 변경하게되면 갑자기 비율에 맞게끔 화면에 가득차면서 크기조정이 되는데… 왜 align-items를 쓰면 변경이되고 align-tiems:center없이 flex-direction:column만 쓰게되면 크기조정이 안이루어지는지 궁금합니다. 혹시나 꼭 선생님이 아니시더라두…아시는분 있으시면 ㅠㅠ 답변 부탁드립니다..!