패럴랙스 스크롤링 효과 - 가로 모드
<div class="character"></div>
<main id="paraCont">
<div class="contentWrap">
<section id="section1" class="content__item">
<span class="content__item__num">01</span>
</section>
<!-- //section1 -->
<section id="section2" class="content__item">
<span class="content__item__num">02</span>
</section>
<!-- //section2 -->
<section id="section3" class="content__item">
<span class="content__item__num">03</span>
</section>
<!-- //section3 -->
<section id="section4" class="content__item">
<span class="content__item__num">04</span>
</section>
<!-- //section4 -->
<section id="section5" class="content__item">
<span class="content__item__num">05</span>
</section>
<!-- //section5 -->
<section id="section6" class="content__item">
<span class="content__item__num">06</span>
</section>
<!-- //section6 -->
<section id="section7" class="content__item">
<span class="content__item__num">07</span>
</section>
<!-- //section7 -->
<section id="section8" class="content__item">
<span class="content__item__num">08</span>
</section>
<!-- //section8 -->
<section id="section9" class="content__item">
<span class="content__item__num">09</span>
</section>
<!-- //section9 -->
</div>
</main>
<!-- //main -->
@font-face {
font-family: 'NEXONLv1Gothic';
font-weight: 300;
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Light.woff') format('woff');
font-style: normal;
}
@font-face {
font-family: 'NEXONLv1Gothic';
font-weight: 400;
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
font-style: normal;
}
* {
margin: 0; padding: 0;
}
.parallax {
background: #F4DED3;
color: #000;
font-family: 'NEXONLv1Gothic';
font-weight: 400;
}
#paraHeader {
position: fixed;
left: 0; top: 0;
padding: 20px;
z-index: 10000;
}
#paraHeader h1 a {
display: inline-block;
font-size: 20px;
color: #000;
border-bottom: 1px dashed #000;
margin-bottom: 8px;
text-decoration: none;
}
#paraCont {}
.contentWrap {
position: fixed;
left: 0;
top: 0;
display: flex;
}
.content__item {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
box-sizing: border-box;
}
.content__item:nth-child(even){
background: #F4DED3;
}
.content__item__num {
font-family: 'Lato';
font-size: 25vw;
font-weight: 100;
line-height: 1;
/* opacity: 0.07; */
position: absolute;
right: 5vw; top: 0vw;
color: #fff;
}
.content__item__title {
font-size: 2vw;
text-align: left;
max-width: 1000px;
width: 50vw;
}
.content__item__imgWrap {
width: 50vw;
height: 60vh;
position: relative;
overflow: hidden;
background: #000;
}
.content__item__img {
position: absolute;
left: -10%; top: -10%;
width: 120%;
height: 120%;
background-repeat: no-repeat;
background-size: cover;
filter: saturate(0%);
}
.content__item__desc {
font-size: 4vw;
line-height: 1.4;
word-break: keep-all;
margin-top: -6vw;
margin-right: -3vw;
position: relative;
z-index: 100;
padding-left: 30vw;
padding-right: 10vw;
}
.content__item:nth-child(1) .content__item__img {
background-image: url(https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg1.jpg);
}
.content__item:nth-child(2) .content__item__img {
background-image: url(https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg2.jpg);
}
.content__item:nth-child(3) .content__item__img {
background-image: url(https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg3.jpg);
}
.content__item:nth-child(4) .content__item__img {
background-image: url(https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg4.jpg);
}
.content__item:nth-child(5) .content__item__img {
background-image: url(https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg5.jpg);
}
.content__item:nth-child(6) .content__item__img {
background-image: url(https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg6.jpg);
}
.content__item:nth-child(7) .content__item__img {
background-image: url(https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg7.jpg);
}
.content__item:nth-child(8) .content__item__img {
background-image: url(https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg8.jpg);
}
.content__item:nth-child(9) .content__item__img {
background-image: url(https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg9.jpg);
}
/* nav */
.paraNav {
position: fixed;
right: 20px; top: 20px;
z-index: 1000;
background: rgba(0,0,0,.4);
padding: 15px 20px;
border-radius: 50px;
transition: top 0.4s ease;
}
.paraNav li {
display: inline-block;
list-style: none;
}
.paraNav li a {
color: #fff;
text-decoration: none;
display: inline-block;
padding: 5px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
border-radius: 30px;
}
.paraNav li.active a {
background: #fff;
color: #000;
}
/* info */
.info {
position: fixed;
left: 20px;
bottom: 20px;
z-index: 1000;
background: rgba(0,0,0,.4);
border-radius: 5px;
padding: 10px 20px;
}
.info li {
list-style: none;
font-size: 12px;
padding: 2px;
color: #fff;
}
.character {
width: 400px;
height: 300px;
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 0;
z-index: 1000;
background-image: url(../assets/img/dog.jpg);
}
.character.walking{
animation: walk 0.8s steps(18, start) infinite;
}
.character.left {
background-position: 0 -300px;
}
.character.left.walking {
animation: backwalk 0.8s steps(18, start) infinite;
}
@keyframes walk {
0% {background-position: 0 0;}
100% {background-position: -7200px 0;}
}
@keyframes backwalk {
0% {background-position: 0 -300px;}
100% {background-position: 7200px -300px;}
}
const contentWrap = $(".contentWrap").width();
$("body").css("height", contentWrap);
const scrollHeight = $(window).height();
let lastScrollTop = 0;
$(window).scroll(function(){
let scrollTop = $(window).scrollTop();
$(".contentWrap").css({"transform": "translateX(" + -scrollTop + "px)"});
clearTimeout($.data(this, "scrollCheck"));
$.data(this, "scrollCheck",setTimeout(function(){
$(".character").removeClass(".walking");
}, 1000));
if(scrollTop > lastScrollTop){
$(".character").removeClass("left");
$(".character").addClass("walking");
} else {
$(".character").addClass("left");
$(".character").addClass("walking");
}
lastScrollTop = scrollTop;
// 출력
$(".scrollTop span").text(parseInt(scrollTop));
$(".contentWrapWidth span").text(parseInt(contentWrap));
});