묻고 답해요
129만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결애플 웹사이트 인터랙션 클론!
게속 오류떠서 글 작성해봐요....
Uncaught TypeError: Cannot read properties of undefined (reading 'scrollHeight') at scrollLoop (main.js:367:65) at main.js:388:9 이런 오류 떠서 제 자바 스크립트 코드도 여기 올려볼께요....
-
미해결SVG 마스터
곡선에 따라 글자쓰기에서 path 대신 circle은 안되나요?
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg"> <style> .svg-circleText {font-size: 1.5rem; font-weight: bold; fill: red;} .svg-circleText tspan {display: inline-block; margin-right: 30px;} </style> <defs> <circle id="text-circle" cx="250" cy="250" r="240" stroke="blue" fill="transparent" /> </defs> <text x="20" y="20" class="svg-circleText"> <textPath href="#text-circle"> <tspan>My Work</tspan><tspan>My Work</tspan><tspan>My Work</tspan> <tspan>My Work</tspan><tspan>My Work</tspan><tspan>My Work</tspan> <tspan>My Work</tspan><tspan>My Work</tspan><tspan>My Work</tspan> </textPath> </text> </svg>위처럼 circle로 하고싶은데 나오지 않습니다. 각각 따로 하면 circle도 잘 보이고 글자도 잘 보입니다. 하지만 id와 textPath를 사용하여 연결하면 보이지 않습니다ㅠ
-
미해결지금 바로 D3.js 시작하기 : 웹 데이터 시각화
d3 cdn 연동 링크를 찾을 수 없네요
섹션1 1강 7:30에 d3를 활용하기 위한 script 태그를 홈페이지에서 가져오고 있는데 현재 홈페이지 에서는 아무리 찾아봐도 그 테그를 찾을 수 없어요 어디서 찾아오는 거죠?
-
미해결Next + React Query로 SNS 서비스 만들기
svg를 public으로 빼지않고 그대로 컴포넌트에 넣는 이유가 궁금합니다.
svg를 public으로 빼지않고 그대로 컴포넌트에 넣는 이유가 궁금합니다. 저는 public에 사용되는 svg를 다 넣어놓고 svgr을 이용해서 필요한 컴포넌트마다 import해서 사용하고 있습니다. (처음 next를 시작할 때 알려주신 분이 이렇게 사용하셔서)그런데 Section 2까지 강의를 들으면서 보니 제로초님은 컴포넌트에 바로 svg를 삽입하시던데 혹시 성능에 차이가 있을까요? 두 방법중 어떤 것이 나을까요? 혹시 성능에 큰 차이가 없다면 제로초님의 방식이 편해보이는데.. 고민입니다.
-
미해결SVG 마스터
선생님 질문 있습니다! svg 태그에 object-fit: cover; 같은 속성을 적용하기는 어려울까요?
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결따라하며 배우는 리액트 네이티브 기초
Unable to resolve "../assets/checkbox-unchecked.svg" from "components/TodoItem.js"
강의 흐름대로 모든 설정을 하고 SVG 파일을 불러왔는데 제목과 같은 에러가 계속 생깁니다... ㅠㅠ여기저기 검색해서 해결하려고 했지만 쉽게 안되네요.다음과 같이 안드로이드 스튜디오에 에러가 나고 제목에 있는 에러는 터미널에서 나오는 메시지입니다.package.json의 일부는 다음과 같고metro.config.js는 다음과 같이 했습니다..const { getDefaultConfig } = require("expo/metro-config"); module.exports = (() => { const config = getDefaultConfig(__dirname); const { transformer, resolver } = config; config.transformer = { ...transformer, babelTransformerPath: require.resolve("react-native-svg-transformer"), }; config.resolver = { ...resolver, assetExts: resolver.assetExts.filter((ext) => ext !== "svg"), sourceExts: [...resolver.sourceExts, "svg"], }; return config; })(); 윈도우 운영체제에서 생기는 문제일까요 ㅠㅠ 버전 호환성 문제일까요...
-
미해결애플 웹사이트 인터랙션 클론!
특정 타이밍 스크롤 애니메이션 적용하기 섹션 수강중입니다.
초반부 messageA_opacity_in 을 콘솔로 찍었는데요,partScrollStart보다 currentYOffset이 작을때는rv에 values[0] 즉 '0'을 리턴해야하는데,그러지 않고 -1부터 0까지 쭉 커지다가 css가 적용되는 구간부터 1로 점점 커집니다...const sceneInfo = [ { //0 type:'sticky', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-0'), messageA: document.querySelector('#scroll-section-0 .main-message.a'), messageB: document.querySelector('#scroll-section-0 .main-message.b'), messageC: document.querySelector('#scroll-section-0 .main-message.c'), messageD: document.querySelector('#scroll-section-0 .main-message.d') }, values:{ messageA_opacity: [0, 1, { start: 0.1, end: 0.2}], messageB_opacity: [0, 1, { start: 0.3, end: 0.4}] } }, { //1 type:'normal', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-1') } }, { //2 type:'sticky', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-2') } }, { //3 type:'sticky', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-3') } } ];function calcValues(values, currentYOffset){ let rv; const scrollHeight = sceneInfo[currentScene].scrollHeight const scrollRatio = currentYOffset / scrollHeight if(values.length === 3){ // start ~ end 사이의 애니메이션 실행 const partScrollStart = values[2].start * scrollHeight; const partScrollEnd = values[2].end * scrollHeight; const partScrollHeight = partScrollEnd - partScrollStart; if(currentYOffset => partScrollStart && currentYOffset <= partScrollEnd){ rv = (currentYOffset - partScrollStart) / partScrollHeight * (values[1] - values[0]) + values[0]; } else if (currentYOffset < partScrollStart){ rv = values[0]; } else if (currentYOffset > partScrollEnd){ rv = values[1]; } } else { 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: let messageA_opacity_in = calcValues(values.messageA_opacity, currentYOffset) objs.messageA.style.opacity = messageA_opacity_in console.log(messageA_opacity_in) break; case 1: break; case 2: break; case 3: break; } } 도와주세요 ㅠ
-
해결됨애플 웹사이트 인터랙션 클론!
[#svg, #이미지프레임과 텍스트 싱크] 스크롤 값에 움직이는 svg path, 이미지프레임과 텍스트 싱크 맞추는 것, 2가지 질문이 있습니다.
안녕하세요,유익하고 좋은 강좌 만들어주셔서 감사드립니다! 덕분에 브라우저 스크롤 애니메이션에 대한 개념이해를 갖게 됐습니다!. 이런 내용을 바탕으로 '미려한' 애니메이션을 만들고 싶은 욕심이 생겼는데요,해당 강좌를 시청하며 2가지 문의사항이 있습니다.감사합니다! #질문1. svg의 path의 생성하는 법, 만들어주신 강좌 중 svg 강의를 보면 아이디어를 얻을 수 있을까요?보너스로 추가해주신 아이패드 강좌 부분을 보면서, svg의 path를 커스텀으로 만들고 싶은 생각이 들었습니다. 아직 svg 로딩 강좌 섹션은 보지 못했는데, 혹시 인터렉티브 로드맵 중 svg강좌를 들으면, path를 만들 수 있는 힌트를 얻을 수 있을까요? 예를 들어 '안녕하세요 반갑습니다' 라는 svg를 브라우저 스크롤 하면서 하나씩 그려내고 싶습니다.#질문2. 3번째 섹션, 이미지프레임과 fixed된 텍스트들을 서로 싱크를 맞추려면, 어떻게 한땀한땀 해야할까요?강좌에서 공부한 스크립트와 마크업/스타일을 바탕으로, 새로운 애니메이션을 만들때, 이미지/비디오 프레임과 fixed된 텍스트를 서로 싱크 맞추는 요령? 방법?이 무엇이 있을까요? 혹시 이미지 애니메이션을 완성하고, 수작업으로 텍스트의 fixed위치를 변경하면서, 수치를 정하는건가요?
-
미해결애플 웹사이트 인터랙션 클론!
페이지가 처음 로딩 되었을 때 애니메이션 처리가 되지 않는 느낌입니다
페이지가 맨 처음 로딩 되었을 때에는 애니메이션이 작동하지 않다가... 페이지 섹션을 일정 부분 진행하고 다시 윗방향 스크롤을 걸었을때 애니메이션이 정상작동을 합니다.그 후부터는 페이지의 시작 위치로 이동해서 시작부터 차근차근 내렸을때 정상작동을 합니다.원인이 잘 생각이 나지 않네요 Main.js(() => { let yOffset = 0; // window.pageYOffset 대신에 쓸 변수 let prevScrollHeight = 0; // 현재 스크롤 위치(yOffset) 보다 이전에 위치한 스크롤 섹션들의 스크롤 높이값의 합 let currentScene = 0; // 현재 활성화된 (눈 앞에 보고있는) 씬 (Scrollsection) let enterNewScene = false; // 새로운 Scene이 시작된 순간 true // sceneInfo는 각 scene에 대한 정보를 담고 있다. const sceneInfo = [ { // 0 type: 'sticky', heightNum: 5, // 브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-0'), messageA: document.querySelector('#scroll-section-0 .main-message.a'), messageB: document.querySelector('#scroll-section-0 .main-message.b'), messageC: document.querySelector('#scroll-section-0 .main-message.c'), messageD: document.querySelector('#scroll-section-0 .main-message.d') }, values: { messageA_opacity_in: [0, 1, { start: 0.1, end: 0.2 }], messageB_opacity_in: [0, 1, { start: 0.3, end: 0.4 }], messageC_opacity_in: [0, 1, { start: 0.5, end: 0.6 }], messageD_opacity_in: [0, 1, { start: 0.7, end: 0.8 }], messageA_translateY_in: [20, 0, { start: 0.1, end: 0.2 }], messageB_translateY_in: [20, 0, { start: 0.3, end: 0.4 }], messageC_translateY_in: [20, 0, { start: 0.5, end: 0.6 }], messageD_translateY_in: [20, 0, { start: 0.7, end: 0.8 }], messageA_opacity_out: [1, 0, { start: 0.25, end: 0.3 }], messageB_opacity_out: [1, 0, { start: 0.45, end: 0.5 }], messageC_opacity_out: [1, 0, { start: 0.65, end: 0.7 }], messageD_opacity_out: [1, 0, { start: 0.85, end: 0.9 }], messageA_translateY_out: [0, -20, { start: 0.25, end: 0.3 }], messageB_translateY_out: [0, -20, { start: 0.45, end: 0.5 }], messageC_translateY_out: [0, -20, { start: 0.65, end: 0.7 }], messageD_translateY_out: [0, -20, { start: 0.85, end: 0.9 }] } }, { // 1 type: 'normal', // heightNum: 5, // type normal에서는 필요 없음 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-1'), content: document.querySelector('#scroll-section-1 .description') } }, { // 2 type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-2'), messageA: document.querySelector('#scroll-section-2 .a'), messageB: document.querySelector('#scroll-section-2 .b'), messageC: document.querySelector('#scroll-section-2 .c'), pinB: document.querySelector('#scroll-section-2 .b .pin'), pinC: document.querySelector('#scroll-section-2 .c .pin') }, values: { messageA_translateY_in: [20, 0, { start: 0.15, end: 0.2 }], messageB_translateY_in: [30, 0, { start: 0.5, end: 0.55 }], messageC_translateY_in: [30, 0, { start: 0.72, end: 0.77 }], messageA_opacity_in: [0, 1, { start: 0.15, end: 0.2 }], messageB_opacity_in: [0, 1, { start: 0.5, end: 0.55 }], messageC_opacity_in: [0, 1, { start: 0.72, end: 0.77 }], messageA_translateY_out: [0, -20, { start: 0.3, end: 0.35 }], messageB_translateY_out: [0, -20, { start: 0.58, end: 0.63 }], messageC_translateY_out: [0, -20, { start: 0.85, end: 0.9 }], messageA_opacity_out: [1, 0, { start: 0.3, end: 0.35 }], messageB_opacity_out: [1, 0, { start: 0.58, end: 0.63 }], messageC_opacity_out: [1, 0, { start: 0.85, end: 0.9 }], pinB_scaleY: [0.5, 1, { start: 0.5, end: 0.55 }], pinC_scaleY: [0.5, 1, { start: 0.72, end: 0.77 }], pinB_opacity_in: [0, 1, { start: 0.5, end: 0.55 }], pinC_opacity_in: [0, 1, { start: 0.72, end: 0.77 }], pinB_opacity_out: [1, 0, { start: 0.58, end: 0.63 }], pinC_opacity_out: [1, 0, { start: 0.85, end: 0.9 }] } }, { // 3 type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-3'), canvasCaption: document.querySelector('.canvas-caption') }, values: { } } ]; function setLayout() { // 각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { if(sceneInfo[i].type === 'sticky') { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; // window.innerHeight는 브라우저 창의 높이 } else if(sceneInfo[i].type === 'normal') { sceneInfo[i].scrollHeight = sceneInfo[i].objs.container.offsetHeight } sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px` } yOffset = window.scrollY; let totalScrollHeight = 0; for (let i = 0; i < sceneInfo.length; i++) { totalScrollHeight += sceneInfo[i].scrollHeight; if(totalScrollHeight >= yOffset) { // 이미지로 그려보면 이해가 쉬움 currentScene = i; break; } } document.body.setAttribute('id', `show-scene=${currentScene}`) } function calcValues (values, currentYOffset) { // currentYOffset은 현재 씬에서 얼마나 스크롤 됐는지를 의미 let rv; // 현재 씬(스크롤섹션)에서 스크롤된 범위를 비율로 구하기 const scrollHeight = sceneInfo[currentScene].scrollHeight const scrollRatio = currentYOffset / sceneInfo[currentScene].scrollHeight; if (values.length === 3) { // start ~ end 사이의 애니메이션을 실행 const partScrollStart = values[2].start * scrollHeight; const partScrollEnd = values[2].end * scrollHeight; const partScrollHeight = partScrollEnd - partScrollStart if (currentYOffset >= partScrollStart && currentYOffset <= partScrollEnd) { rv = (currentYOffset - partScrollStart) / partScrollStart * (values[1] - values[0]) + values[0]; } else if (currentYOffset < partScrollStart) { rv = values[0]; } else if (currentYOffset > partScrollEnd) { rv = values[1]; } } else { 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; const scrollHeight = sceneInfo[currentScene].scrollHeight; const scrollRatio = currentYOffset / scrollHeight; switch (currentScene) { case 0: // console.log('0 play'); if (scrollRatio <= 0.22) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.42) { // in objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.62) { // in objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset); objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset); objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.82) { // in objs.messageD.style.opacity = calcValues(values.messageD_opacity_in, currentYOffset); objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageD.style.opacity = calcValues(values.messageD_opacity_out, currentYOffset); objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_out, currentYOffset)}%, 0)`; } break; case 2: // console.log('2 play'); if (scrollRatio <= 0.32) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.67) { // in objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`; objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`; } else { // out objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`; objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`; } if (scrollRatio <= 0.93) { // in objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`; objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset); objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`; } else { // out objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`; objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset); objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`; } break; case 3: // console.log('3 play'); break; } } function scrollLoop() { enterNewScene = false; prevScrollHeight = 0; // PrevScrollHeight의 초기화가 함수 내에 있어야 맥북 기준 4 scene의 총합 11540이 찍히고 다음 scrollLoop() 이 실행될 때 다시 초기화 된다. (값이 누적되지 않는다.) for (let i = 0; i < currentScene; i++) { prevScrollHeight += sceneInfo[i].scrollHeight; } if(yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight) { enterNewScene = true; currentScene++; document.body.setAttribute('id', `show-scene-${currentScene}`); } if(yOffset < prevScrollHeight) { enterNewScene = true; if (currentScene === 0) return; // scene 0에서 바운싱 스크롤이 일어났을 때 콘솔에 -값을 찍히지 않게 방지 currentScene--; document.body.setAttribute('id', `show-scene-${currentScene}`); } if (enterNewScene) return; playAnimation(); } window.addEventListener('scroll', () => { yOffset = window.scrollY; // window.pageYOffset은 deprecated 되었다. scrollLoop() }); // window.addEventListener('DOMContentLoaded', setLayout) window.addEventListener('load', setLayout) window.addEventListener('resize', setLayout) // 화면 크기가 바뀌었을때를 기준으로 setLayout을 정의하기 })();main.css@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; padding: 0 1rem; border-bottom: 1px solid #ddd; } .global-nav-links, .local-nav-links { display: flex; align-items: center; max-width: 1000px; height: 100%; margin: 0 auto; /* background-color: gold; */ } .global-nav-links { justify-content: space-between; } .local-nav-links .product-name { margin-right: auto; font-size: 1.4rem; font-weight: bold; } .local-nav-links a { font-size: 0.8rem; } .local-nav-links a:not(.product-name) { margin-left: 2em; } .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; top: 35vh; margin: 5px 0; height: 3em; font-size: 2.5rem; opacity: 0; } .main-message p { font-weight: bold; text-align: center; line-height: 1.2; } .main-message small { display: block; margin-bottom: 0.5em; font-size: 1.2rem; } #scroll-section-2 .main-message { font-size: 3.5rem; } .description { max-width: 1000px; margin: 0 auto; padding: 0 1rem; font-size: 1.2rem; color: #888 } .description strong { float: left; margin-right: 0.2em; /* font-size: 3rem; */ color: rgb(29, 29, 31); } .desc-message { width: 50%; font-weight: bold; } .pin { width: 1px; height: 100px; background: rgb(29,29,31); } #scroll-section-2 .b { top: 10%; left: 40%; } #scroll-section-2 .c { top: 15%; left: 45%; } .mid-message { max-width: 1000px; margin: 0 auto; padding: 0 1rem; font-size: 2rem; color: #888; } .mid-message strong { color: rgb(29,29,31); } .canvas-caption { max-width: 1000px; margin: 0 auto; padding: 0 1rem; font-size: 1.2rem; color: #888; } .footer { display: flex; align-items: center; justify-content: center; height: 7rem; color: white; background: darkorange; } .sticky-elem { display: none; position: fixed; left: 0; width: 100%; } body#show-scene-0 #scroll-section-0 .sticky-elem, body#show-scene-1 #scroll-section-1 .sticky-elem, body#show-scene-2 #scroll-section-2 .sticky-elem, body#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 { 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%; } #scroll-section-2 .b { top: 20%; left: 53%; } #scroll-section-2 .c { left: 55%; } .mid-message { font-size: 4vw; } .canvas-caption { font-size: 2rem; } }blank.html<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>AirMug Pro</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/default.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="container"> <nav class="global-nav"> <div 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> </div> </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> <section class="scroll-section" id="scroll-section-0"> <h1>AirMug Pro</h1> <div class="sticky-elem main-message a"> <p>온전히 빠져들게 하는<br>최고급 세라믹</p> </div> <div class="sticky-elem main-message b"> <p>주변 맛을 느끼게 해주는<br>주변 맛 허용 모드</p> </div> <div class="sticky-elem main-message c"> <p>온전히 편안한<br>맞춤형 손잡이</p> </div> <div class="sticky-elem main-message d"> <p>새롭게 입가를<br>찾아온 매혹</p> </div> </section> <section class="scroll-section" id="scroll-section-1"> <p class="description"> <strong>보통 스크롤 영역</strong> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore explicabo commodi facere nisi expedita eaque quasi doloremque eligendi natus architecto, facilis velit nobis voluptatum suscipit autem soluta debitis neque illum quibusdam similique odio maiores. Ab optio laborum eum sit praesentium, aperiam voluptatem nihil modi tempore a magni necessitatibus hic exercitationem temporibus doloremque error omnis. Sequi, repudiandae dolor eaque non soluta praesentium doloremque, doloribus, ea consequuntur sit perferendis ex! Repellendus natus harum soluta dolorem voluptas alias qui, ipsa vero! Alias voluptate libero, facilis molestias nam aspernatur, amet accusantium consequatur a nostrum temporibus. Qui obcaecati optio quod iusto totam, aut iste dolor ea. Explicabo dolorem ducimus natus, officiis aut minima, ad sapiente voluptatem repellat aliquid suscipit at. Architecto nostrum perferendis, fugiat velit perspiciatis illum dignissimos, vitae delectus magnam blanditiis omnis ratione nihil minus deserunt repudiandae necessitatibus et, tempore cupiditate sapiente? Debitis obcaecati repellendus corrupti odit incidunt deleniti exercitationem dolorum ipsum consequatur rerum maxime, corporis placeat deserunt veniam cum qui dolorem nulla fugit eius ipsam quibusdam saepe! Aut culpa excepturi perferendis, sint animi tempora. Officia necessitatibus libero impedit alias commodi excepturi accusamus molestiae modi laudantium voluptates totam earum autem eos numquam at consequuntur ipsam repellat, perspiciatis veniam? Expedita nobis ducimus quisquam accusantium! Velit! </p> </section> <section class="scroll-section" id="scroll-section-2"> <div class="sticky-elem main-message a"> <p> <small>편안한 촉감</small> 입과 하나 되다 </p> </div> <div class="sticky-elem desc-message b"> <p> 편안한 목넘김을 완성하는 디테일한 여러 구성 요소들, 우리는 이를 하나하나 새롭게 살피고 재구성하는 과정을 거쳐 새로운 수준의 머그, AirMug Pro를 만들었습니다. 입에 뭔가 댔다는 감각은 어느새 사라지고 오롯이 당신과 음료만 남게 되죠. </p> <div class="pin"></div> </div> <div class="sticky-elem desc-message c"> <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> 아름답고 부드러운 음료 공간. </p> <p class="canvas-caption"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nulla nesciunt tempora asperiores culpa, illo et assumenda vel odio voluptatem? Saepe rerum qui accusamus maiores ex libero natus obcaecati accusantium aperiam eligendi ut et facere quis molestias quos repudiandae, omnis facilis deserunt cum! Expedita ipsam aliquid beatae doloremque, officia explicabo non neque reprehenderit qui quo, recusandae incidunt saepe totam! Adipisci dolorem inventore soluta. Natus pariatur sit quisquam dicta placeat! Molestias voluptas eos asperiores maxime, dolorem corporis eum quos iste dolores eveniet, cumque officiis beatae adipisci! Corporis quibusdam voluptates explicabo officiis quis cupiditate qui officia expedita. Praesentium placeat debitis recusandae ipsa similique optio accusamus, omnis vero a ducimus blanditiis fugit asperiores maiores mollitia? Pariatur exercitationem culpa, fugiat accusantium soluta incidunt beatae debitis laborum, harum neque aliquam, asperiores quod! Error numquam voluptate aut corrupti nam! Iusto illum accusamus sapiente asperiores quo eum perspiciatis aliquam blanditiis dolorem natus, modi magnam molestiae accusantium porro quisquam iure tempora laborum deserunt recusandae omnis dolore eos pariatur eveniet. Exercitationem mollitia inventore at quasi aperiam blanditiis minima accusantium, delectus, possimus quidem labore sapiente eius sint molestias doloribus est autem cupiditate iure veniam optio! Placeat dolor et, eos, saepe nemo tempore aliquid alias, facere pariatur optio sint nam ea. </p> </section> <footer class="footer"> 2023-08-01 Jun </footer> </div> <script src="js/main.js"></script> </body> </html>
-
해결됨애플 웹사이트 인터랙션 클론!
섹션2 번째, opacity=0 되지 않고 잔상이 남습니다.
섹션2 번째 내용입니다.해당과정을 리액트에서 적용하면서 따라가고 있습니다. 돔접근에 대해서는 useRef를 사용해서 잘 따라가고 있는데, scrollSection1 의 부분에서 scrollSection1Msg1~scrollSection1Msg4 의 opacity 부분에서 아래와 같이 작업했습니다. 그런데 화면에 잔상이 남습니다. 완전히 opacity=0 가 되지 않는 것처럼 희미하게 글자들이 중첩되며 남아 있습니다. (맥북 M1) values : { selectionMsgA_opacity : [0 ,1, {start: 0.1, end:0.2}], selectionMsgA_opacity_out : [1 ,0, {start: 0.25, end:0.3}], else if (scrollRatio <= 0.3) { obj.Section1Msg1.current.style.opacity = calcValues(values.selectionMsgA_opacity_out, currentYoffset) obj.Section1Msg1.current.style.transform = `translateY(${ calcValues(values.selectionMsgA_translateY_out, currentYoffset)}%)`
-
미해결애플 웹사이트 인터랙션 클론!
원래 쿼리셀렉터에서는 띄워쓰기 하면안되나요?
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 원래 위처럼 document.querySelector("#scroll-section-0 .main-message.a"),.main-message.a 와 같이 클래스는 붙여서 작성해야하나요? 띄워서 작성하니까 안찾아지던데아이디와 클래스는 다른 속성이라서 띄워주고, 클래스끼리는 붙여서 작성해야하는 건가요아니면main-message클래스랑 a클래스는 형제클래스니까 부모 자식의 관계를 뜻할 때만 띄워주는 건가요?
-
미해결SVG 마스터
atom 서비스 종료, emmet 설치안됨
안녕하세요. SVG 강의를 이번에 구매하게 되면서 이제 막 준비단계를 하고 있는데요.강의에선 atom을 설치하고 emmet 패키지를 다운로드 하라고 되어있더라고요.근데 emmet을 install에 검색해도 안뜨고 구글이던 유튜브에 쳐도 emmet을 다르게 설치하는 방법이 나오지도 않고요.찾다보니 atom이 22년 12월에 종료 되었다는걸 알게 되었는데 계속 atom으로 공부해도 되는지 모르겠어요. 패키지 설치가 안되니 진도가 나가지지도 않고요 ㅜ 어떻게 해야되나요?
-
미해결애플 웹사이트 인터랙션 클론!
라이브러리 질문
혹시 강의내용과 같은 페이지를 쉽게 만드는 라이브러리 같은게 있을까요? 저런 스크롤 애니메이션 페이지를 만들 때 바닐라 자바스크립트가 아닌 더 쉽게 만들 수 있게 해주는게 혹시 있나 궁금합니다
-
미해결애플 웹사이트 인터랙션 클론!
translateY대신 애플에서 사용한 것 처럼 matrix로 scale의 크기를 주려고 하는데
안녕하세요!! 강의를 전부 듣고 코드를 뜯어보며 복습중에 있습니다. section-0에서 사용한 것을 이용해 스크롤 될 때 matrix로 Text에 scale(80)정도로 주려고 코드를 입력해보니 적용은 되었으나 스크롤을 빠르게 올릴시에 정상적으로 사이즈가 줄어들지 않고 줄어들다 말거나 그러더라구요...ㅠㅠ 폰트 픽셀도 많이 깨지는 현상이 발생하구요. 혹시 해결하려면 어떤식으로 접근해야 할까요? 해당 코드 첨부드립니다. const sectionInfo = [ { // section-0 type: "sticky", heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector("#scroll-section-0"), messageA: document.querySelector("#scroll-section-0 .main-message.a"), messageB: document.querySelector("#scroll-section-0 .main-message.b"), messageC: document.querySelector("#scroll-section-0 .main-message.c"), messageD: document.querySelector("#scroll-section-0 .main-message.d"), }, values: { messageA_opacity_in: [0.4, 1, { start: 0, end: 0.05 }], messageA_opacity_out: [1, 0, { start: 0.15, end: 0.2 }], messageA_scale_in: [1, 80, { start: 0.05, end: 0.25 }], messageA_scale_out: [80, 1, { start: 0.25, end: 0.05 }], messageB_opacity_in: [0, 1, { start: 0.2, end: 0.25 }], messageB_opacity_out: [1, 0, { start: 0.35, end: 0.4 }], messageB_translateY_in: [50, 0, { start: 0.2, end: 0.25 }], messageB_translateY_out: [0, -50, { start: 0.35, end: 0.4 }], messageC_opacity_in: [0, 1, { start: 0.4, end: 0.45 }], messageC_opacity_out: [1, 0, { start: 0.55, end: 0.6 }], messageC_translateY_in: [50, 0, { start: 0.4, end: 0.45 }], messageC_translateY_out: [0, -50, { start: 0.55, end: 0.6 }], messageD_opacity_in: [0, 1, { start: 0.6, end: 0.65 }], messageD_opacity_out: [1, 0, { start: 0.75, end: 0.8 }], messageD_translateY_in: [50, 0, { start: 0.6, end: 0.65 }], messageD_translateY_out: [0, -50, { start: 0.75, end: 0.8 }], }, }, ]; function calcValues(values, currentScrollY) { let returnValue; const currentSectionHeight = sectionInfo[currentSection].scrollHeight; // 현재 스크롤 섹션에서 스크롤 된 범위를 비율로 구하는 식 const scrollRatio = currentScrollY / currentSectionHeight; if (values.length === 3) { const scrollAniStart = values[2].start * currentSectionHeight; const scrollAniEnd = values[2].end * currentSectionHeight; const scrollAniHeight = scrollAniEnd - scrollAniStart; if (currentScrollY >= scrollAniStart && currentScrollY <= scrollAniEnd) { returnValue = ((currentScrollY - scrollAniStart) / scrollAniHeight) * (values[1] - values[0]) + values[0]; } else if (currentScrollY < scrollAniStart) { returnValue = values[0]; } else if (currentScrollY > scrollAniEnd) { returnValue = values[1]; } } else { returnValue = scrollRatio * (values[1] - values[0]) + values[0]; } return returnValue; } function playAnimation() { const objs = sectionInfo[currentSection].objs; const values = sectionInfo[currentSection].values; const currentScrollY = scrollY - prevScrollHeight; const currentSectionHeight = sectionInfo[currentSection].scrollHeight; const scrollRatio = currentScrollY / currentSectionHeight; switch (currentSection) { case 0: // message if (scrollRatio <= 0.05) { objs.messageA.style.opacity = calcValues( values.messageA_opacity_in, currentScrollY ); } else { objs.messageA.style.opacity = calcValues( values.messageA_opacity_out, currentScrollY ); objs.messageA.style.transform = `matrix(${calcValues( values.messageA_scale_in, currentScrollY )}, 0, 0, ${calcValues( values.messageA_scale_in, currentScrollY )}, 0, 0)`; }
-
미해결애플 웹사이트 인터랙션 클론!
[스크롤 높이 세팅] scrollHeight값이 3990아닌 4645로만 나오는데 뭐가 문제일까요? ㅠㅠ
(() => { const sceneInfo = [ { // 0 type: 'sticky', heightNum: 5, // 브라우저 높이의 5배로 scrollHeight 세팅(디바이스 마다 높이가 다르기에 각 기계가 가진 높이를 불러오고 곱해준다.) scrollHeight: 0, }, { // 1 type: 'normal', heightNum: 5, scrollHeight: 0, }, { // 2 type: 'sticky', heightNum: 5, scrollHeight: 0, }, { // 3 type: 'sticky', heightNum: 5, scrollHeight: 0, } ]; function setLayout() { //각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; } console.log(sceneInfo); } setLayout(); })(); 4645값으로 그대로 진행해도 될까요?
-
미해결애플 웹사이트 인터랙션 클론!
scrollLoop 함수 질문
const scrollLoop = () => { prevScroll = 0; // 스크롤값이 다시 0으로 시작하게 for (let i = 0; i < current; i++) { prevScroll += sceneInfo[i].scrollHeight; } console.log('prev', prevScroll) if (currentScroll > prevScroll + sceneInfo[current].scrollHeight) { current++; alert() } console.log('next', prevScroll) if (currentScroll < prevScroll) { current--; } };선생님 여기서 prevScroll에 for문으로 돌때 sceneInfo[i].scrollHeight; 여기서 이미 값을 더해줄텐데 왜 if (currentScroll > prevScroll) { current++; alert() }조건문에 저렇게 하면 작동이 안돼나요 제가 이해를 잘못하고 있는지 ...
-
미해결지금 바로 D3.js 시작하기 : 웹 데이터 시각화
foreach 문 자동완성하는 익스텐션 알려주세요!
foreach 문 자동완성하는 익스텐션 알려주세요!
-
미해결애플 웹사이트 인터랙션 클론!
load 이벤트시 첫 비디오 이미지가 뜨네요.
window.addEventListener('load' ... 중략sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0], 0, 0);안녕하세요.작업하다 이상해서, 강의자료도 같이 확인해보니 중간에 새로고침시 videoImages의 첫 이미지가 잠시 뜨는데, 아마 위의 코드 때문이 아닌가 합니다. 저 부분은 첫 scene의 장면임에도 불구하고, 뜬다는 것은 찰나이긴 하지만, 첫영역부터 순간적으로 중간으로 이동하면서 나타나는 현상같기도 한데, 이게 컴퓨터의 성능차이일수도 있다는 생각이 들기도 합니다. 저만 이런건지 모르겠습니다만..저 코드를 제거하고 중간에서 새로고침해보니 안보여서 문제가 없지만, 최상단 첫화면에서 새로고침하면 이미지가 안보이니 또 문제더군요.그래서 위 코드를 제거후, 새로고침시 조금 스크롤되는 코드에서 추가 조건문(else)를 붙여서 아래와 같이 수정해보았습니다. if (tempYOffset > 0) { let siId = setInterval(() => { scrollTo(0, tempYOffset); tempYOffset += 5; if (tempScrollCount > 20) { clearInterval(siId); } tempScrollCount++; }, 20); } else { sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0], 0, 0); } 이렇게 처리하니 문제가 없는 듯 한데, 이게 저한테만 생기는 문제인지, 아니라면 제가 위와 같이 처리한 방법이 맞는것인지 궁금합니다.
-
미해결애플 웹사이트 인터랙션 클론!
마지막 강의 js파일로 바꿀 시 스크롤 프레임 렉? 버벅임?
마지막 강의에서 올리신 js파일로 바꾸니 애니메이션이 들어가있는 section 0, 2에서 터치패드로 스크롤 시 멈추는 부분에서 몇프레임 앞뒤 왔다갔다 하는 현상이 좀 심하게 발생합니다. 이전만큼 부드럽게 진행이 되지 않고 좀 간격이 넓게 스크롤 되는 느낌입니다. 이미지 로딩 후 정렬 때문에 이렇게 되는건가요? 아니라면 혹시 팁을 좀 주실 수 있나요?다시 확인해본 바 새로고침을 하면 이러한 문제가 사라지긴 합니다만 원인을 잘 모르겠네요. 좀 더 알아보겠습니다. 제가 진행한 파일입니다!https://leealvinlee.github.io/Leeum_Maurizio_Catellan/
-
미해결애플 웹사이트 인터랙션 클론!
선생님 이해가 잘 안가는 문구가 있어서 질문 드립니다.
setLayout 함수 끝에 들어가는${sceneInfo[i].scrollHeight}px;부분에서 따옴표로 잘못 작성해서 좀 해맸었습니다 ㅎㅎ;${}부분을 풀어 쓰면 정확하게 어떤식으로 표기가 되는건지.. 궁금합니다.제 예상으로는 for문 안에 따로 변수를 선언하지 않고, 계산된 값을 바로 가져오기 위해 사용한 것 같은데 맞을까요..??