inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

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

345

YoungIl Ko

작성한 질문수 1

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

 

 

 

javascript 인터랙티브-웹 svg 웹 디자인 HTML/CSS 클론코딩

답변 1

0

1분코딩

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

이미지 배경 문의

0

69

1

[크로스브라우징] safari에서 동영상 영역 미노출

0

108

1

항상 궁금했는데 크림슨 컬러 선택하셨을때 활용했던 사이트 좀 알려주세요~

0

111

2

vue강의는안하시나요?!

0

104

1

스크롤 속도에 따른 messageA_opacity_out

0

119

1

drawImage(objs.videoImages[sequence], 0, 0); error

0

91

1

선생님 캔버스 width 크기는 이미지 크기에맞게 해줘야하나요?

0

131

0

선생님 안녕하세요. 혹시 메인개발(?)분야가 뭔지 궁금합니다.

0

211

1

React에서 load 상태를 어떻게 감지할 수 있을까요?

0

685

1

[섹션7-3: 버그수정 2] tempYOffset 오류

0

197

1

스크롤할 때 캔버스로 하신 이유가 있으신가요? 그냥 성능 떄문에 캔버스로 하신건가요?

0

317

2

게속 오류떠서 글 작성해봐요....

0

512

2

Vanilla JavaScript로 SPA 만드는 자료 혹은 선택 기준을 추천해주실 수 있으신가요?

1

492

1

특정 타이밍 스크롤 애니메이션 적용하기 섹션 수강중입니다.

0

459

2

[#svg, #이미지프레임과 텍스트 싱크] 스크롤 값에 움직이는 svg path, 이미지프레임과 텍스트 싱크 맞추는 것, 2가지 질문이 있습니다.

0

452

2

페이지가 처음 로딩 되었을 때 애니메이션 처리가 되지 않는 느낌입니다

0

435

1

섹션2 번째, opacity=0 되지 않고 잔상이 남습니다.

0

536

1

원래 쿼리셀렉터에서는 띄워쓰기 하면안되나요?

0

598

2

라이브러리 질문

1

413

2

translateY대신 애플에서 사용한 것 처럼 matrix로 scale의 크기를 주려고 하는데

0

411

1

[스크롤 높이 세팅] scrollHeight값이 3990아닌 4645로만 나오는데 뭐가 문제일까요? ㅠㅠ

0

599

2

scrollLoop 함수 질문

0

481

2

도메인 웹호스팅시 이미지가 안 뜨는데 누가 좀 알려주세요ㅠㅜ

0

1237

2

load 이벤트시 첫 비디오 이미지가 뜨네요.

0

509

2