“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
자바스크립트 패럴랙스 이펙트 _애니메이션
💜 패럴랙스 이펙트
scrollTop
<div class="scrollTop"></div>scrollTop값을 먼저 구해줘야 합니다.
script
<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
<script type="text/javascript">
let s = skrollr.init();
window.addEventListener("scroll", () => {
let scrollTop = window.pageYOffset || window.scrollY;
document.querySelector(".scrollTop").innerText = parseInt(scrollTop);
});
</script>스크롤에 따라 요소를 애니메이션 하는 라이브러리 skrollr을 불러오는 스크립트 태그를 사용해 작업해줍니다.
let a = skrollr.init() Skroll라이브러리를 초기화 하여 s 라는 변수에 할당합니다.
window.addEventListener("scroll", () => {}) 윈도우의 스크롤 이벤트를 감지하고 콜백 함수를 실행합니다.
let scrollY scrollTop 변수에 스크롤의 상단위치를 저장
window.pageYOffset은 IE에서 사용되는 스크롤 위치 속성이고, window.scrollY는 다른 브라우저에서 사용되는 스크롤 위치 속성입니다.
document.querySelector(".scrollTop").innerText = parseInt(scrollTop)클래스 이름이 scrollTop인요소를 선택해 해당 요소의 텍스트 내용을 현재 스크롤의 상단 위치로 업뎃합니다.
parseInt() 함수를 사용해 소수점을 제거하고 정수로 변환합니다.
<section id="section1">
<div class="s1-text1 fixed"
data-0="font-size: 0vw"
data-1000="font-size: 30vw; opacity:1"
data-2000="font-size: 30vw; opacity:1"
data-3000="font-size: 0vw; opacity:0"
>hyunmi</div>
<div class="s1-text2 fixed"
data-2500="font-size: 0vw; transform: translate(-50%, -50%) rotate(0deg)"
data-3000="font-size: 50vw; transform: translate(-50%, -50%) rotate(720deg)"
data-7000="font-size: 50vw; opacity:1"
data-7500="font-size: 50vw; opacity:0"
>hello</div>
<div class="s1-text3 fixed"
data-7500="font-size: 0vw; transform: translate(-50%, -50%) rotate(0deg)"
data-8000="font-size: 50vw; transform: translate(-50%, -50%) rotate(720deg)"
data-8500="font-size: 30vw; opacity:1"
data-9000="font-size: 30vw; opacity:0"
>next</div>
<div class="s1-text3 fixed"
data-10000="font-size: 0vw; transform: translate(-50%, -50%) rotate(0deg)"
data-11000="font-size: 30vw; transform: translate(-50%, -50%) rotate(720deg)"
data-11500="font-size: 30vw; opacity:1"
data-12000="font-size: 10vw; opacity:1"
data-16000="font-size: 10vw;"
data-16500="font-size: 20vw;"
data-17000="font-size: 0vw; transform: translate(-50%, -50%) rotate(720deg)"
>hhmm</div>
<div class="s1-img1 fixed"
data-3000="width: 200vw; transform: translate(-50%, -50%) rotate(0deg)"
data-4000="width: 20vw; transform: translate(-50%, -50%) rotate(720deg)"
>
<div class="s1-img1-1">
<div
data-3500="transform: scale(2)"
data-4000="transform: scale(1)"
data-4500="transform: scale(1)"
data-5000="transform: scale(0)"
></div>
<div
data-3500="transform: scale(2)"
data-4000="transform: scale(1)"
data-4500="transform: scale(1)"
data-5000="transform: scale(0)"
></div>
</div>
<div class="s1-img1-2">
<div
data-3500="transform: scale(2)"
data-4000="transform: scale(1)"
data-4500="transform: scale(1)"
data-5000="transform: scale(0)"
></div>
<div
data-3500="transform: scale(2)"
data-4000="transform: scale(1)"
data-4500="transform: scale(1)"
data-5000="transform: scale(0)"
></div>
</div>
<div class="s1-img1-3">
<div
data-3500="transform: scale(2)"
data-4000="transform: scale(1)"
data-4500="transform: scale(1)"
data-5000="transform: scale(1)"
data-5500="transform: scale(4)"
data-6000="transform: scale(0)"
></div>
<div
data-3500="transform: scale(2)"
data-4000="transform: scale(1)"
data-4500="transform: scale(1)"
data-5000="transform: scale(1)"
data-6500="transform: scale(4)"
data-7000="transform: scale(0)"
></div>
</div>
<div class="s1-img1-4">
<div
data-3500="transform: scale(2)"
data-4000="transform: scale(1)"
data-4500="transform: scale(1)"
data-5000="transform: scale(0)"
></div>
<div
data-3500="transform: scale(2)"
data-4000="transform: scale(1)"
data-4500="transform: scale(1)"
data-5000="transform: scale(0)"
></div>
</div>
<div class="s1-img1-5">
<div
data-3500="transform: scale(2)"
data-4000="transform: scale(1)"
data-4500="transform: scale(1)"
data-5000="transform: scale(0)"
></div>
<div
data-3500="transform: scale(2)"
data-4000="transform: scale(1)"
data-4500="transform: scale(1)"
data-5000="transform: scale(0)"
></div>
</div>
</div>
<div class="s1-img2 fixed"
data-9000="width: 200vw; transition: translate(0%, -30%)"
data-9500="width: 20vw; transform: translate(-50%, -50%) rotate(720deg)"
>
<div class="s1-img2-1">
<div
data-9500="transform: scale(2)"
data-10000="transform: scale(1)"
data-14500="transform: scale(1)"
data-15000="transform: scale(0)"
></div>
<div
data-9500="transform: scale(2)"
data-10000="transform: scale(1)"
data-14500="transform: scale(1)"
data-15000="transform: scale(0)"
></div>
</div>
<div class="s1-img2-2">
<div
data-9500="transform: scale(2)"
data-10000="transform: scale(1)"
data-14500="transform: scale(1)"
data-15000="transform: scale(0)"
></div>
<div
data-9500="transform: scale(2)"
data-10000="transform: scale(1)"
data-14500="transform: scale(1)"
data-15000="transform: scale(0)"
></div>
</div>
</div>
<div class="s1-img3 fixed"
data-12000="width: 200vw; transition:"
data-12500="width: 20vw; transform: translateY(10%) translateX(-50%)"
>
<div class="s1-img3-4">
<div
data-12500="transform: scale(2)"
data-13000="transform: scale(1)"
data-13500="transform: scale(1)"
data-14000="transform: scale(0)"
></div>
<div
data-12500="transform: scale(2)"
data-13000="transform: scale(1)"
data-13500="transform: scale(1)"
data-14000="transform: scale(0)"
></div>
</div>
<div class="s1-img3-5">
<div
data-12500="transform: scale(2)"
data-13000="transform: scale(1)"
data-13500="transform: scale(1)"
data-14000="transform: scale(0)"
></div>
<div
data-12500="transform: scale(2)"
data-13000="transform: scale(1)"
data-13500="transform: scale(1)"
data-14000="transform: scale(0)"
></div>
</div>
</div>
</div>
</section>font size 속성을 조정해 화면에 나타나고 사라지는 텍스트를 표시합니다.
data * 속성을 통해 font-sizw 와 opacity 를 조절해 애니메이션 효과를 부여하고 있습니다.
다른 텍스트들도 마찬가지 입니다.
이미지 부분은 div 요소 내부에 div요소들이 존재하며 각각의 div 요소들은 이미지의 일부를 나타내고 있습니다.
마찬가지로 data * 속성을 통해 width, transform, sclae 속성을 조정해 이미지의 크기와 변형에 애니메이션 효과를 부여하고 있습니다.
style
<link href="https://webfontworld.github.io/recia/ReciaSerifDisplay.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "ReciaSerifDisplay";
}
body {
height: 20000px;
background-color: #E0E4DD;
}
.scrollTop {
position: fixed;
left: 10px;
top: 10px;
z-index: 1000;
width: 40px;
height: 40px;
color: #fff;
text-align: center;
font-size: 14px;
line-height: 40px;
background-color: rgba(0, 0, 0, 0.6);
}
.fixed {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.s1-text1 {
font-size: 30vw;
line-height: 1;
padding-top: 8vw;
}
.s1-text2 {
font-size: 0vw;
line-height: 1;
padding-top: 8vw;
/* background-color: #fff; */
}
.s1-text3 {
font-size: 0vw;
line-height: 1;
padding-top: 2vw;
z-index: 100;
}
.s1-img1 {
width: 200vw;
height: 100vh;
/* background-color: #ccc; */
}
/* .s1-img1 > div:nth-child(1) {padding: 0 40vh;}
.s1-img1 > div:nth-child(2) {padding: 0 30vh;}
.s1-img1 > div:nth-child(3) {padding: 0 20vh;}
.s1-img1 > div:nth-child(4) {padding: 0 10vh;}
.s1-img1 > div:nth-child(5) {padding: 0 0vh;} */
.s1-img1>div {
height: 20vh;
display: flex;
justify-content: space-between;
align-items: center;
}
.s1-img1>div>div {
width: 19vh;
height: 19vh;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: 5px solid #000;
filter: saturate(0%);
}
.s1-img1-1>div:first-child {background-image: url(https://source.unsplash.com/500x500/?pink);}
.s1-img1-1>div:last-child {background-image: url(https://source.unsplash.com/500x500/?red);}
.s1-img1-2>div:first-child {background-image: url(https://source.unsplash.com/500x500/?dog);}
.s1-img1-2>div:last-child {background-image: url(https://source.unsplash.com/500x500/?yellow);}
.s1-img1-3>div:first-child {z-index: 1; background-image: url(https://source.unsplash.com/500x500/?black);}
.s1-img1-3>div:last-child {background-image: url(https://source.unsplash.com/500x500/?white);}
.s1-img1-4>div:first-child {background-image: url(https://source.unsplash.com/500x500/?green);}
.s1-img1-4>div:last-child {background-image: url(https://source.unsplash.com/500x500/?park);}
.s1-img1-5>div:first-child {background-image: url(https://source.unsplash.com/500x500/?sky);}
.s1-img1-5>div:last-child {background-image: url(https://source.unsplash.com/500x500/?blue);}
.s1-img2 {
width: 200vw;
height: 100vh;
/* background-color: #ccc; */
}
/* .s1-img1 > div:nth-child(1) {padding: 0 40vh;}
.s1-img1 > div:nth-child(2) {padding: 0 30vh;}
.s1-img1 > div:nth-child(3) {padding: 0 20vh;}
.s1-img1 > div:nth-child(4) {padding: 0 10vh;}
.s1-img1 > div:nth-child(5) {padding: 0 0vh;} */
.s1-img2>div {
height: 20vh;
display: flex;
justify-content: space-between;
align-items: center;
}
.s1-img2>div>div {
width: 19vh;
height: 19vh;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: 5px solid #000;
filter: saturate(0%);
}
.s1-img2-1>div:first-child { background-image: url(https://source.unsplash.com/500x500/?pink);}
.s1-img2-1>div:last-child {background-image: url(https://source.unsplash.com/500x500/?red);}
.s1-img2-2>div:first-child {background-image: url(https://source.unsplash.com/500x500/?dog);}
.s1-img2-2>div:last-child {background-image: url(https://source.unsplash.com/500x500/?yellow);}
.s1-img3 {
width: 200v;
height: 100vh;
/* background-color: #ccc; */
}
/* .s1-img1 > div:nth-child(1) {padding: 0 40vh;}
.s1-img1 > div:nth-child(2) {padding: 0 30vh;}
.s1-img1 > div:nth-child(3) {padding: 0 20vh;}
.s1-img1 > div:nth-child(4) {padding: 0 10vh;}
.s1-img1 > div:nth-child(5) {padding: 0 0vh;} */
.s1-img3>div {
height: 20vh;
display: flex;
justify-content: space-between;
}
.s1-img3>div>div {
width: 19vh;
height: 19vh;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: 5px solid #000;
filter: saturate(0%);
}
.s1-img3-4>div:first-child { background-image: url(https://source.unsplash.com/500x500/?sky);}
.s1-img3-4>div:last-child {background-image: url(https://source.unsplash.com/500x500/?red);}
.s1-img3-5>div:first-child {background-image: url(https://source.unsplash.com/500x500/?dog);}
.s1-img3-5>div:last-child {background-image: url(https://source.unsplash.com/500x500/?yellow);}
</style>폰트스타일을 적용해줍니다.
body 요소에 배경 색상을 지정하고, 스크롤 버튼을 만들기 위한 스타일을 설정했습니다.
s-1-text1, 2, 3 등의 클래스를 사용해 섹션 1의 텍스트 요소들의 스타일을 설정하고
s1-img1, 2 등의 클래스를 사용해 섹션 1의 이미지 요소들의 스타일을 설정했습니다.
공통 요소들은 한번에 지정해주고
이미지만 따로 지정해줬습니다.
first-child와 last-child를 사용해 각각의 이미지를 넣어줍니다.
filter: saturate(0%)로 필터처리해줍니다.
반응형