티스토리 뷰
안녕하세요!
Parallax Effect(패럴럭스 이펙트)로 포트폴리오 느낌을 연출해봤습니다.
아직저는 미숙하지만 제걸 보시고 따라시면 여러분은 더 잘하실수 있을거에요!!
각각의 스크롤값에 transform을 줘서 느낌을 연출했습니다~
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PARALLAX</title>
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
font-family: 'NexonLv1Gothic';
font-weight: 300;
}
body {
height: 20000px;
}
.scrollTop {
position: fixed;
left: 20px;
top: 20px;
background: rgba(0, 0, 0, 0.4);
color: #fff;
width: 70px;
height: 30px;
text-align: center;
line-height: 30px;
z-index: 10000;
}
/* *common */
.fixed {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
img {
width: 100%;
vertical-align: top;
object-fit: cover;
}
#contents {}
#section1 {}
/* section1*/
.section1__bg img {
width: 70%;
height: 17vh;
}
.section1__text1 {
color: #fff;
font-size: 7vw;
transform: translate(-50%, -50%) scale(0);
}
.section1__text2 {
color: #fff;
font-size: 7vw;
transform: translate(-50%, -50%) scale(1);
white-space: nowrap;
font-weight: 500;
}
.section1__text3 {
color: #fff;
font-size: 7vw;
transform: translate(-50%, -50%) scale(1);
white-space: nowrap;
font-weight: bold;
}
/* section2 bg */
.section2__bg {
width: 100%;
height: 100vh;
background: #444;
}
.section2__text1 {
font-size: 4vw;
color: #fff;
white-space: nowrap;
}
.section2__img1 {
width: 70vw;
top: 80%;
}
.section__img1__site {
position: absolute;
left: 50%;
top: 1.5vw;
transform: translate(-50%);
width: 55vw;
height: calc(100% - 6vw);
/* border: 1px solid #fff; */
border-radius: 1vw 1vw 0 0;
overflow: hidden;
}
.move01 {
position: absolute;
top: 0;
}
.button01 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.button01 a {
font-size: 1vw;
border: 1px solid #000;
background: #000;
color: #fff;
padding: 1vh 1vw 1vh 1vw;
border-radius: 0.5vw;
font-weight: bold;
text-decoration: none;
}
.section2__img2 {
width: 70vw;
top: 80%;
}
.section2__img3 {
width: 70vw;
top: 80%;
}
.section2__img4 {
width: 70vw;
top: 80%;
}
</style>
</head>
<body>
<div class="scrollTop"></div>
<div id="contents">
<section id="section1" data-8500="display: block;" data-8501="display: none;">
<div class="section1__bg">
<img class="fixed" src="img/city.jpg" alt="이미지" data-0="width: 70%; height: 17vh"
data-1000="width: 100%; height: 17vh" ; data-2000="width: 100%; height: 50vh" ;
data-7000="width: 100%; height: 50vh" ; data-8000="width: 100%; height: 0vh" ;>
</div>
<div class="section1__text1 fixed" data-1100="transform: translate(-50%, -50%) scale(0); top; 50%;"
data-2000="transform: translate(-50%, -50%) scale(1); top: 50%;"
data-3000="transform: translate(-50%, -50%) scale(1); top: 50%;"
data-4000="transform: translate(-50%, -50%) scale(1); top: -10%;">안녕하세요!</div>
<div class="section1__text2 fixed"
data-3000="transform: translate(-50%, -50%) scale(1); top: 100%; left:50%;"
data-4000="transform: translate(-50%, -50%) scale(1); top: 50%; left:50%"
data-5000="transform: translate(-50%, -50%) scale(1); top: 50%; left:50%"
data-6000="transform: translate(-50%, -50%) scale(1); top: 50%; left:-50%">포트폴리오 사이트입니다.</div>
<div class="section1__text3 fixed"
data-5000="transform: translate(-50%, -50%) scale(1); top: 50%; left: 150%"
data-6000="transform: translate(-50%, -50%) scale(1); top: 50%; left: 50%"
data-7000="transform: translate(-50%, -50%) scale(1); top: 50%; left: 50%"
data-8000="transform: translate(-50%, -50%) scale(1); top: 50%; left: -50%">사이트를 소개해드릴게요!</div>
</section>
<!-- //section1 -->
<section id="section2" data-8700="display: none;" data-8701="display: block;">
<div class="section2__bg fixed" data-9000="width: 0%; height: 0vh; border-radius: 500px;"
data-10000="width: 100%; height: 100vh; border-radius: 0px;"></div>
<div class="section2__text1 fixed" data-8500="transform: translate(-50%, -50%) scale(0.4);"
data-10500="transform: translate(-50%, -50%) scale(0.6);"
data-11500="transform: translate(-50%, -420%) scale(1.0);"
data-35000 = "transform: translate(-50%, -420%) scale(1); top: 50%;"
data-36000 = "transform: translate(-50%, -50%) scale(1); top: 50%;" >I`ve Been Working In On Sites
</div>
<div class="section2__img1 fixed"
data-8500="transform: translate(-50%, -50%) rotate(0deg) scale(0.2); top: 150%;"
data-10500="transform: translate(-50%, -50%) rotate(0deg) scale(0.4); top: 150%;"
data-11500="transform: translate(-50%, -50%) rotate(0deg) scale(0.9); top: 60%;"
data-14000="transform: translate(-50%, -50%) rotate(0deg) scale(0.9); top: 60%;"
data-15000="transform: translate(-50%, -50%) rotate(0deg) scale(0.9); top: 60%;"
data-15500="transform: translate(-50%, -50%) rotate(720deg) scale(0); top: 60%;">
<!-- data-10500 = "top: 200%;"
data-12000 = "top: 70%;" -->
<img src="img/mockup01.png" alt="노트북">
<div class="section__img1__site">
<div class="move01" data-12000="left: 0%; top: 0%;" data-13500="left: 0%; top: -330%;"
data-14000="left: 0%; top: -330%;"><img src="img/site01.jpg" alt="사이트01"></div>
<div class="button01" data-13500="transform: translate(-50%, -50%); top: 170%;"
data-14500="transform: translate(-50%, -50%); top: 50%;"><a
href="../site/webClass/index.html">사이트 바로가기</a></div>
</div>
</div>
<div class="section2__img2 fixed"
data-14500="transform: translate(-50%, -50%) rotate(0deg) scale(0.2); top: 150%;"
data-16500="transform: translate(-50%, -50%) rotate(0deg) scale(0.4); top: 150%;"
data-17500="transform: translate(-50%, -50%) rotate(0deg) scale(0.9); top: 60%;"
data-20000="transform: translate(-50%, -50%) rotate(0deg) scale(0.9); top: 60%;"
data-21000="transform: translate(-50%, -50%) rotate(0deg) scale(0.9); top: 60%;"
data-22000="transform: translate(-50%, -50%) rotate(720deg) scale(0); top: 60%;">
<img src="img/mockup01.png" alt="노트북">
<div class="section__img1__site">
<div class="move01" data-18000="left: 0%; top: 0%;" data-19500="left: 0%; top: -330%;"
data-20000="left: 0%; top: -330%;"><img src="img/site01.jpg" alt="사이트01"></div>
<div class="button01" data-19500="transform: translate(-50%, -50%); top: 170%;"
data-20500="transform: translate(-50%, -50%); top: 50%;"><a
href="../site/webClass/index.html">사이트 바로가기</a></div>
</div>
</div>
<div class="section2__img3 fixed"
data-21000="transform: translate(-50%, -50%) rotate(0deg) scale(0.2); top: 150%;"
data-23000="transform: translate(-50%, -50%) rotate(0deg) scale(0.4); top: 150%;"
data-24000="transform: translate(-50%, -50%) rotate(0deg) scale(0.9); top: 60%;"
data-26500="transform: translate(-50%, -50%) rotate(0deg) scale(0.9); top: 60%;"
data-27500="transform: translate(-50%, -50%) rotate(0deg) scale(0.9); top: 60%;"
data-28500="transform: translate(-50%, -50%) rotate(720deg) scale(0); top: 60%;">
<img src="img/mockup01.png" alt="노트북">
<div class="section__img1__site">
<div class="move01" data-24500="left: 0%; top: 0%;" data-26000="left: 0%; top: -330%;"
data-26500="left: 0%; top: -330%;"><img src="img/site01.jpg" alt="사이트01"></div>
<div class="button01" data-26000="transform: translate(-50%, -50%); top: 170%;"
data-27000="transform: translate(-50%, -50%); top: 50%;"><a
href="../site/webClass/index.html">사이트 바로가기</a></div>
</div>
</div>
<div class="section2__img4 fixed"
data-27500="transform: translate(-50%, -50%) rotate(0deg) scale(0.2); top: 150%;"
data-29500="transform: translate(-50%, -50%) rotate(0deg) scale(0.4); top: 150%;"
data-30500="transform: translate(-50%, -50%) rotate(0deg) scale(0.9); top: 60%;"
data-30500="transform: translate(-50%, -50%) rotate(0deg) scale(0.9); top: 60%;"
data-34000="transform: translate(-50%, -50%) rotate(0deg) scale(0.9); top: 60%;"
data-35000="transform: translate(-50%, -50%) rotate(720deg) scale(0); top: 60%;">
<img src="img/mockup01.png" alt="노트북">
<div class="section__img1__site">
<div class="move01" data-31000="left: 0%; top: 0%;" data-32500="left: 0%; top: -330%;"
data-33000="left: 0%; top: -330%;"><img src="img/site01.jpg" alt="사이트01"></div>
<div class="button01" data-32500="transform: translate(-50%, -50%); top: 170%;"
data-33500="transform: translate(-50%, -50%); top: 50%;"><a
href="../site/webClass/index.html">사이트 바로가기</a></div>
</div>
</div>
</section>
<!-- //section2 -->
<section id="section3"></section> <!-- //section3 -->
<section id="section4"></section> <!-- //section4 -->
<section id="section5"></section> <!-- //section5 -->
<section id="section6"></section> <!-- //section6 -->
<section id="section7"></section> <!-- //section7 -->
</div>
<script type="text/JavaScript" src="js/skrollr.min.js"></script>
<!-- script -->
<script>
var s = skrollr.init();
function scroll() {
let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;
document.querySelector(".scrollTop").innerText = Math.round(scrollTop);
//document.querySelector(".section1__bg img").style.width = scrollTop + "px";
requestAnimationFrame(scroll)
}
scroll();
</script>
<!-- //script -->
</body>
</html>반응형
'Script Sample > Parallax Effect' 카테고리의 다른 글
| Parallax Effect 스크롤링 효과 - 리빌 효과 (3) | 2022.03.11 |
|---|---|
| Parallax Effect 스크롤링 효과 - 텍스트 효과 (4) | 2022.03.10 |
| Parallax Effect 스크롤링 효과 - 이질감 효과 (0) | 2022.03.10 |
| Parallax Effect 스크롤링 효과 - 나타나기 (2) | 2022.03.10 |
| Parallax Effect 스크롤링 효과 - 숨김메뉴 (5) | 2022.03.08 |
UP NEXT : Script Sample/Parallax Effect
댓글
© 2022 babydevelop