• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

currentScene의 증감이 창 중간에서 이뤄집니다.

22.11.21 19:56 작성 조회수 205

0

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;
	}
}

 

 

 

course-thumbnail

애플 웹사이트 인터랙션 클론!

답변 1

답변을 작성해보세요.

0

1분코딩님의 프로필

1분코딩

지식공유자

2022.11.25

<div class="loading"> ... </div> 부분이 위치를 차지하고 있어서 그렇습니다.
그 높이 만큼 차이가 발생하는 걸 확인하실 수 있을 거예요~
position이나 display 조정이 되고 나면 공간 차지를 안하게 되므로 신경 안쓰셔도 되겠습니다.

이 글과 비슷한 Q&A