-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
switch(currentScene) 질문 드립니다 ㅠㅠ
20.08.17 18:23 작성 조회수 54
0
삭제된 글입니다
답변을 작성해보세요.
0
0
1분코딩
지식공유자2020.08.24
답변이 좀 늦었습니다.
case 0: 부분에 break; 가 빠져서, case 1까지 실행이 되는 문제였네요^^
switch 문 밖에서 currentScene을 출력해보시면 문제없이 잘 바뀌는 것을 확인할 수 있습니다.
0
박주혁
질문자2020.08.19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>main-index</title>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="../asset/css/default.css" />
<!-- <link rel="stylesheet" href="../asset/css/main.css" /> -->
<style>
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;
transition: 2s;
}
.change_background {
background-color: rgb(24, 27, 27);
transition: 2s;
}
p {
line-height: 1.6;
}
a {
color: rgb(29, 29, 31);
text-decoration: none;
}
strong {
font-size: 100px;
}
.product-name h1 {
font-size: 1.9rem;
}
.global-nav {
height: 44px;
}
.local-nav {
height: 52px;
border-bottom: 1px solid #ddd;
}
.global-nav-links,
.local-nav-links {
display: flex;
align-items: center;
max-width: 1000px;
height: 100%;
margin: 0 auto;
}
.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.9rem;
}
.local-nav-links a:not(.product-name) {
margin-left: 2em;
}
.scroll-section {
padding-top: 50vh;
}
#scroll-section-0 h1 {
font-size: 4rem;
text-align: center;
}
#scroll-section-1 {
color: white;
}
#scroll-section-1 .a {
top: 20vh;
width: 80%;
left: 30vw;
}
#scroll-section-1 .b {
width: 80%;
height: 50%;
left: 30vw;
}
#scroll-section-1 .c {
width: 80%;
height: 50%;
left: 34vw;
top: 10vh;
}
#scroll-section-1 .d {
width: 80%;
height: 50%;
left: 26vw;
top: 3vh;
}
.main-message {
display: flex;
align-items: center;
justify-content: center;
height: 3em;
top: 35vh;
font-size: 2.5rem;
margin: 5px 0;
opacity: 0;
width: 100%;
}
.main-message p {
font-weight: bold;
text-align: center;
line-height: 1.28;
}
.footer {
display: flex;
align-items: center;
justify-content: center;
height: 7rem;
background-color: rgb(248, 244, 244);
}
.sticky-elem {
display: none;
position: fixed;
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: 6vw;
}
.main-message {
font-size: 6rem;
}
}
</style>
</head>
<body>
<div class="container">
<nav class="global-nav">
<div class="global-nav-links">
<a href="" class="global-nav-item">About</a>
<a href="route-index.html" class="global-nav-item">Route</a>
<a href="together-index.html" class="global-nav-item">Together</a>
<a href="" class="global-nav-item">Contact</a>
</div>
</nav>
<nav class="local-nav">
<div class="local-nav-links">
<a href="main-index.html" class="product-name"
><h1>Danny's Portfolio</h1></a
>
<a href="#">개요</a>
<a href="#">설명서</a>
<a href="#">바로가기</a>
</div>
</nav>
</div>
<section class="scroll-section" id="scroll-section-0">
<h1>이동거리 최소화 앱 <strong>"루트"</strong></h1>
<div class="sticky-elem main-message a">
<p>
경유지들 부터 <br />
마지막 목적지 까지 <br />
</p>
</div>
<div class="sticky-elem main-message b">
<p>
최적의 루트를 <br />
찾아줍니다.
</p>
</div>
</section>
<section class="scroll-section" id="scroll-section-1">
<div class="sticky-elem main-message a">
<img src="../asset/images/지도.png" />
</div>
<div class="sticky-elem main-message b">
<img src="../asset/images/마커.png" />
</div>
<div class="sticky-elem main-message c">
<img src="../asset/images/마커.png" />
</div>
<div class="sticky-elem main-message d">
<img src="../asset/images/마커.png" />
</div>
<div class="sticky-elem main-message e">
<h1>
당신의 아름다운 시간<br />
루트로 지켜주세요
</h1>
</div>
</section>
<section class="scroll-section" id="scroll-section-2"></section>
<section class="scroll-section" id="scroll-section-3"></section>
<footer class="footer">
2020, 박주혁
</footer>
<script>
(function () {
let yOffset = 0; //window.pageYoffset 변수
let prevScrollHeight = 0;
let currentScene; //현재 활성화된 씬
let enterNewScene = false; // 새로운 씬이 시작되는 순간 true
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("body"),
},
values: {
messageA_opacity_in: [0, 1, { start: 0.2, end: 0.3 }],
messageA_translateY_in: [20, 0, { start: 0.2, end: 0.3 }],
messageA_opacity_out: [1, 0, { start: 0.35, end: 0.4 }],
messageA_translateY_out: [0, -20, { start: 0.35, end: 0.4 }],
messageB_opacity_in: [0, 1, { start: 0.5, end: 0.6 }],
messageB_translateY_in: [20, 0, { start: 0.5, end: 0.6 }],
messageB_opacity_out: [1, 0, { start: 0.65, end: 0.7 }],
messageB_translateY_out: [0, -20, { start: 0.65, end: 0.7 }],
messageC_opacity_in: [0, 1, { start: 0.8, end: 0.9 }],
},
},
{
//3
type: "sticky",
heightNum: 5,
scrollHeight: 0,
objs: {
container: document.querySelector("#scroll-section-1"),
messageA: document.querySelector(
"#scroll-section-1 .main-message a"
),
messageB: document.querySelector(
"#scroll-section-1 .main-message b"
),
messageC: document.querySelector(
"#scroll-section-1 .main-message c"
),
messageD: document.querySelector(
"#scroll-section-1 .main-message d"
),
messageE: document.querySelector(
"#scroll-section-1 .main-message e"
),
},
values: {
messageA_opacity_in: [0, 1, { start: 0.1, end: 0.3 }],
},
},
{
//3
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 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;
if (totalScrollHeight >= yOffset) {
currentScene = i;
break;
}
}
document.body.setAttribute("id", `show-scene-${currentScene}`);
}
function calcValues(values, currentYOffset) {
let rv;
const scrollHeight = sceneInfo[currentScene].scrollHeight;
const scrollRatio = currentYOffset / scrollHeight;
if (values.length === 3) {
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;
const scrollHeight = sceneInfo[currentScene].scrollHeight;
const scrollRatio = currentYOffset / scrollHeight;
const body_background = document.querySelector("body");
switch (currentScene) {
case 0:
console.log("0");
case 1:
console.log("1");
break;
case 2:
console.log("2");
break;
case 3:
console.log("3");
break;
}
}
function scrollLoop() {
enterNewScene = false;
prevScrollHeight = 0;
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;
currentScene--;
document.body.setAttribute("id", `show-scene-${currentScene}`);
}
if (enterNewScene) return;
playAnimation();
}
window.addEventListener("scroll", function () {
yOffset = window.pageYOffset;
scrollLoop();
});
window.addEventListener("resize", setLayout);
window.addEventListener("load", setLayout);
})();
</script>
</body>
</html>
말씀하신 전체 코드입니다! 아직 css와 스크립트를나누지 못한 코드입니다 ㅠㅠ
죄송하지만 제가 혼자서 변경하면서 공부중이여서
원본과 조금 다른 점이 있습니다 ㅠㅠ 양해 부탁드리며
답장 감사합니다!!
공부중이여서 코드가 조금
0
답변 4