인프런 커뮤니티 질문&답변
작성한 질문수
currentScene이 바뀌기 전에 다음에 나올 sticky-elem 요소가 미리 보여지게끔 하려면 어떻게 해야할까요??
작성
·
203
0
안녕하세요! 꼼꼼하고 재밌는 강의 너무 잘 듣고 있습니다:)
해당 강의를 통해서 회사 서비스 소개 페이지를 제작하고 있습니다.
인터랙티브한 효과 덕에 대표님께 칭찬도 받았네요ㅎ 다 강사님 덕분입니다!
근데 제작 중에 조금 수정하고 싶은 부분이 생겼는데요
강사님이 주신 예제 파일 중 @simple-version/index.html 파일로 예를 들자면
scroll-section-0에서 scroll-section-1로 넘어갈 때 currentScene이 바뀌기 전
이 노란 여백 공간에 보통 스크롤이 되어 지나가는 텍스트 요소를 추가 하고 싶습니다!ㅠ
강의 영상 중 case 3 안에서 그려주었던 캔버스를 case 2 구문 안에 코드를 추가하여 미리 그려놓는 것과
같은 개념으로 텍스트나 이미지가 미리 보여지게끔 하고 싶은데 어떤 식으로 구현을 해야 할까요...?
원하는대로 커스텀 하려니 매우 어렵네요ㅠㅠ
강의와 관련있는 질문을 남겨주세요.
• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)
• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)
• 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등)
질문 전달에도 요령이 필요합니다.
• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.
• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.
• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요.
• 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요!
구체적인 질문일수록 명확한 답을 받을 수 있어요.
• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.
• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.
• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다.
기본적인 예의를 지켜주세요.
• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다.
• 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요.
• 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다.
답변 1
1
1분코딩
지식공유자
하하, 업무에 도움 받으셨다니 보람차네요^^ 화이팅입니다! ㅎㅎ
아래 부분을 수정해보세요~
아래는 html 이고요(두번째 섹션을 보통 스크롤 영역으로 만든다고 가정했습니다),
<!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 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/simple-main.css">
</head>
<body class="before-load">
<div class="loading">
<svg class="loading-circle">
<circle cx="50%" cy="50%" r="25"></circle>
</svg>
</div>
<div class="container">
<section class="scroll-section" id="scroll-section-0">
<h1>AirMug Pro</h1>
<div class="sticky-elem sticky-elem-canvas">
<canvas id="video-canvas-0" width="1920" height="1080"></canvas>
</div>
<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" style="padding-top: 0">
<p class="description">
<strong>보통 스크롤 영역</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae est ipsa minima, eligendi error cum vel dolorum pariatur officia facilis ipsam voluptatibus ad quasi porro quod quisquam quidem tempora accusantium accusamus, quaerat aliquam velit exercitationem incidunt? Id vitae quisquam saepe quasi accusantium tempore enim! Aperiam dolorum a vero repellat dolor, inventore ab odit totam molestias expedita? Enim quia dolor maiores veniam ea! Quam illo, est incidunt ipsa reiciendis modi quisquam reprehenderit fuga velit dolorem odit sequi autem blanditiis, ullam commodi quibusdam. Accusamus repellat aperiam quis neque laudantium, dignissimos hic nisi magnam praesentium enim beatae sint architecto cum numquam inventore rerum animi sed nostrum quae delectus, voluptas molestiae placeat aliquid! Vel quaerat error officiis magnam dolorum iste aspernatur at est! Quo, consequuntur? Reiciendis, dolor. Quo at cupiditate in iure obcaecati voluptatum vel ea! Ab vel harum facere hic fuga ducimus sapiente dolore dolorem, nobis sint perferendis cumque esse! Omnis fugiat sint error laborum eveniet labore nam ducimus quisquam in repudiandae impedit excepturi dignissimos tenetur libero placeat rerum maxime tempore, aut nihil. Qui, quam? Voluptate fuga possimus itaque quas nesciunt iste, facilis mollitia illo qui placeat temporibus inventore obcaecati. Recusandae, sequi dignissimos in natus eum maiores dolorem, deleniti nobis accusantium, aspernatur beatae.
</p>
</section>
<section class="scroll-section" id="scroll-section-2">
<div class="sticky-elem main-message hero-message a">
<p>
<small>편안한 촉감</small>
입과 하나 되다
</p>
</div>
<div class="sticky-elem main-message b">
<p>
오롯이,<br>당신과 음료만
</p>
</div>
<div class="sticky-elem main-message c">
<p>
디자인 오브 스웨덴,<br>메이드 인 차이나
</p>
</div>
</section>
<div class="normal-content">
<section>
<p class="mid-message">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur corrupti distinctio nulla explicabo. Molestiae, cum explicabo nisi architecto est animi corporis optio vel eligendi maxime temporibus, dicta, adipisci libero obcaecati error! Quidem quibusdam nesciunt aperiam qui reprehenderit distinctio est velit facere. Earum doloribus, maiores pariatur sequi alias repudiandae distinctio dolore voluptatibus, animi aliquid quos, repellendus ipsa tenetur id. Quam voluptatum nam consequuntur ratione fugit totam repellat, nulla velit omnis odio aperiam recusandae hic quibusdam officia. Iste ducimus voluptas culpa harum neque tenetur reiciendis ullam quae, quas numquam a sunt cupiditate exercitationem quod doloribus at. Id repudiandae dolor aut facilis pariatur!
</p>
</section>
<section>
<p class="mid-message">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur corrupti distinctio nulla explicabo. Molestiae, cum explicabo nisi architecto est animi corporis optio vel eligendi maxime temporibus, dicta, adipisci libero obcaecati error! Quidem quibusdam nesciunt aperiam qui reprehenderit distinctio est velit facere. Earum doloribus, maiores pariatur sequi alias repudiandae distinctio dolore voluptatibus, animi aliquid quos, repellendus ipsa tenetur id. Quam voluptatum nam consequuntur ratione fugit totam repellat, nulla velit omnis odio aperiam recusandae hic quibusdam officia. Iste ducimus voluptas culpa harum neque tenetur reiciendis ullam quae, quas numquam a sunt cupiditate exercitationem quod doloribus at. Id repudiandae dolor aut facilis pariatur!
</p>
</section>
</div>
</div>
<script src="js/simple-main.js"></script>
</body>
</html>
해당 씬(섹션)을 활성화할 때, 해당 씬의 sticky-elem을 보여주는 부분도 2번으로 수정해주어야겠지요~
(1번은 보통 스크롤 영역이니까 제외)
#show-scene-0 #scroll-section-0 .sticky-elem,
#show-scene-2 #scroll-section-2 .sticky-elem {
display: block;
will-change: transform, opacity;
}스크립트에서 sceneInfo도 아래처럼 수정해주시고요. 중간에 1번을 끼워넣었습니다.
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'),
canvas: document.querySelector('#video-canvas-0'),
context: document.querySelector('#video-canvas-0').getContext('2d'),
videoImages: []
},
values: {
videoImageCount: 300,
imageSequence: [0, 299],
canvas_opacity: [1, 0, { start: 0.9, end: 1 }],
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',
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')
},
values: {
messageA_translateY_in: [20, 0, { start: 0.1, end: 0.15 }],
messageB_translateY_in: [30, 0, { start: 0.35, end: 0.4 }],
messageC_translateY_in: [30, 0, { start: 0.6, end: 0.65 }],
messageA_opacity_in: [0, 1, { start: 0.1, end: 0.15 }],
messageB_opacity_in: [0, 1, { start: 0.35, end: 0.4 }],
messageC_opacity_in: [0, 1, { start: 0.6, end: 0.65 }],
messageA_translateY_out: [0, -20, { start: 0.3, end: 0.35 }],
messageB_translateY_out: [0, -20, { start: 0.55, end: 0.6 }],
messageC_translateY_out: [0, -20, { start: 0.8, end: 0.85 }],
messageA_opacity_out: [1, 0, { start: 0.25, end: 0.3 }],
messageB_opacity_out: [1, 0, { start: 0.55, end: 0.6 }],
messageC_opacity_out: [1, 0, { start: 0.8, end: 0.85 }]
}
}
];그리고 playAnimation 함수에서, case 별로 처리하는 부분도 1번이 아니라 2번으로 수정해주셔야겠지요~
.....
case 2:
if (scrollRatio <= 0.2) {
// in
objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset);
.....이런 식으로 수정해보시면 될거에요.
작업 화이팅입니다!