“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
728x90
오늘은 플러그인을 사용하여 스크롤을 내릴수록 애니메이션이 진행되는 효과를 주었습니다.
미리 말씀드리지만 소스가 길어요😂
css
*{
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);
border-radius: 50%;
}
.fixed {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.s1-text1 {
font-size: 30vw;
line-height: 1;
color: #000;
}
.s1-text2 {
font-size: 30vw;
line-height: 1;
padding-top: 8vw;
}
.s1-text3 {
font-size: 15vw;
line-height: 1;
}
.s1-text4 {
text-align: right;
word-break: keep-all;
font-size: 3vw;
line-height: 1.2;
font-family: "Rebecca";
background-color: #E0E4DD;
}
.s1-text4 .pp {
font-size: 2vw;
font-family: "Rebecca";
}
.s1-text4 .last {
font-size: 1vw;
font-family: "Rebecca";
}
.s1-img1 {
width: 200vw;
height: 100vh;
}
.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;
color: #980088;
/* filter: saturate(0%); */
}
.s1-img1 > div > div:first-child {
width: 19vh;
height: 19vh;
background-position: center;
background-size: cover;
}
.s1-img1 > div > div:last-child {
width: 19vh;
height: 19vh;
background-position: center;
background-size: cover;
}
.s1-img1-1 {
}
.s1-img1-1 > div:first-child {background-image: url(https://jo0132.github.io/web2023/assets/ico/icon.jpg)}
.s1-img1-1 > div:last-child {background-image: url(https://siyoenkim.github.io/web2023/assets/ico/icon.jpg)}
.s1-img1-2 {
}
.s1-img1-2 > div:first-child {background-image: url(https://kebab000.github.io/web2023/assets/ico/icon01.jpg)}
.s1-img1-2 > div:last-child {background-image: url(https://dkseho9121.github.io/web2023/assets/ico/icon01.jpg);
}
....- body 요소에는 높이와 배경 색상이 지정되어 있습니다.
- .scrollTop 클래스는 화면 상단으로 스크롤하는 버튼을 만들기 위한 스타일을 지정합니다.
- .fixed 클래스는 화면 중앙에 고정되어 나타나는 요소의 위치와 스타일을 지정합니다.
- s1-text1, s1-text2, s1-text3, s1-text4 클래스는 각각 텍스트의 스타일을 지정합니다.
- s1-img1 클래스는 이미지 요소의 스타일을 지정하며, s1-img1 > div는 이미지 요소 내부의 div 요소에 대한 스타일을 지정합니다.
- s1-img1-1과 s1-img1-2 클래스는 각각 이미지 요소 내부의 첫 번째와 두 번째 div 요소에 대한 스타일을 지정합니다.
html
<div class="scrollTop"></div>
<section id="section1">
<div class="s1-text1 fixed"
data-0="font-size: 0vw; color: #000000; opacity:1;"
data-1000="font-size: 30vw; color: #000000; opacity:1;"
data-2000="font-size: 30vw; color: #990000; opacity:1;"
data-3000="font-size: 0vw; color: #99000; opacity:0;"
>Viola</div>
<div class="s1-text2 fixed"
data-2500="font-size: 0vw; transform: translate(-50%, -50%) rotate(0deg); opacity:1"
data-3000="font-size: 40vw; transform: translate(-50%, -50%) rotate(360deg); opacity:1"
data-3500="font-size: 40vw; transform: translate(-50%, -50%) rotate(360deg); opacity:0"
>Hello</div>
<div class="s1-img1 fixed"
data-3000="width: 200vw;"
data-4000="width: 20vw;"
>
<div class="s1-img1-1">
<div
data-3000="transform: translateX(100px) rotate(60deg);"
data-4000="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(-60deg);"
></div>
<div
data-3000="transform: translateX(-100px) rotate(-60deg);"
data-4000="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(60deg);"
></div>
</div>
<div class="s1-img1-2">
<div
data-3000="transform: translateX(200px)rotate(60deg)"
data-4000="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(60deg);"
></div>
<div
data-3000="transform: translateX(-200px) rotate(-60deg)"
data-4000="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(-60deg);"
></div>
</div>
<div class="s1-img1-3">
<div
data-3000="transform: translateX(300px) rotate(60deg)"
data-4000="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(60deg);"
></div>
<div
data-3000="transform: translateX(-300px) rotate(-60deg)"
data-4000="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(-60deg);"
></div>
</div>
<div class="s1-img1-4">
<div
data-3000="transform: translateX(400px) rotate(60deg)"
data-4000="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(-60deg);"
></div>
<div
data-3000="transform: translateX(-400px) rotate(-60deg)"
data-4000="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(60deg);"
></div>
</div>
<div class="s1-img1-5">
<div
data-3000="transform: translateX(500px) rotate(60deg)"
data-4000="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(-60deg);"
></div>
<div
data-3000="transform: translateX(-500px) rotate(-60deg)"
data-4000="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(60deg);"
></div>
</div>
</div>
<div class="s1-img1 fixed"
data-3500="width: 200vw;"
data-4500="width: 40vw;"
>
<div class="s1-img1-6">
<div
data-3500="transform: translateX(100px) rotate(60deg);"
data-4500="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(60deg);"
></div>
<div
data-3500="transform: translateX(-100px) rotate(-60deg);"
data-4500="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(-60deg);"
></div>
</div>
<div class="s1-img1-7">
<div
data-3500="transform: translateX(200px)rotate(60deg)"
data-4500="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(60deg);"
></div>
<div
data-3500="transform: translateX(-200px) rotate(-60deg)"
data-4500="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(-60deg);"
></div>
</div>
<div class="s1-img1-8">
<div
data-3500="transform: translateX(300px) rotate(60deg)"
data-4500="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(-60deg);"
></div>
<div
data-3500="transform: translateX(-300px) rotate(-60deg)"
data-4500="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(60deg);"
></div>
</div>
<div class="s1-img1-9">
<div
data-3500="transform: translateX(400px) rotate(60deg)"
data-4500="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(-60deg);"
></div>
<div
data-3500="transform: translateX(-400px) rotate(-60deg)"
data-4500="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(60deg);"
></div>
</div>
<div class="s1-img1-10">
<div
data-3500="transform: translateX(500px) rotate(60deg)"
data-4500="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(60deg);"
></div>
<div
data-3500="transform: translateX(-500px) rotate(-60deg)"
data-4500="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(60deg);"
></div>
</div>
</div>
<div class="s1-img1 fixed"
data-4000="width: 200vw;"
data-5000="width: 60vw;"
>
<div class="s1-img1-11">
<div
data-4000="transform: translateX(100px) rotate(60deg);"
data-5000="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(60deg);"
></div>
<div
data-4000="transform: translateX(-100px) rotate(-60deg);"
data-5000="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(-60deg);"
></div>
</div>
<div class="s1-img1-12">
<div
data-4000="transform: translateX(200px)rotate(60deg)"
data-5000="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(-60deg);"
></div>
<div
data-4000="transform: translateX(-200px) rotate(-60deg)"
data-5000="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(60deg);"
></div>
</div>
<div class="s1-img1-13">
<div
data-4000="transform: translateX(300px) rotate(60deg)"
data-5000="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(-60deg);"
></div>
<div
data-4000="transform: translateX(-300px) rotate(-60deg)"
data-5000="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(60deg);"
></div>
</div>
<div class="s1-img1-14">
<div
data-4000="transform: translateX(400px) rotate(60deg)"
data-5000="transform: translateX(0px) rotate(0deg);"
data-6000="transform: translateY(0px) rotate(0deg);"
data-7000="transform: translateY(-3000px) rotate(-60deg);"
></div>
</div>
</div>
</section>
<section id="section2">
<div class="s1-text3 fixed"
data-5500="opacity:0; transform: rotate(45deg) translate(800px)"
data-6500="opacity:1; transform: rotate(45deg) translate(800px)"
data-8500="opacity:1;transform: rotate(45deg) translate(-6000px)"
>
javascriptjavascriptjavascript<br>
css css css css css css css css css css css css css<br>
php php php php php php php php php php php<br>
sql sql sql sql sql sql sql sql<br>
javascriptjavascriptjavascript<br>
css css css css css css css css css css css css css<br>
php php php php php php php php php php php<br>
sql sql sql sql sql sql sql sql<br>
</div>
</section>
<section id="section">
<div class="s1-text4 fixed"
data-8500="opacity:0; transform: scale(1)"
data-10500="opacity:1; transform: scale(1)"
data-12500="opacity:1; transform: scale(0)"
>
끊임 없이 노력하라. 체력이나 지능이 아니라 노력이야 말로 잠재력의 자물쇠를 푸는 열쇠다. <br>
<span class="pp">- 윈스턴 처칠</span><br>
<span class="last"
data-9500="opacity:0"
data-10500="opacity:1"
>모두 화이팅!😆</span>
</div>
</section>
<section id="section">
<div class="s1-text4 fixed"
data-12500="opacity:1; transform: translateY(-1000px)"
data-12700="opacity:1; transform: translateY(0px)"
>
끝!
</div>
</section>- 이 페이지는 스크롤을 내리면서 다양한 애니메이션 효과를 보여주는 페이지로 보입니다.
- HTML은 웹 페이지의 구조를 결정하며, 이 코드에서는 "section1"이라는 섹션과 그 안에 "s1-text1", "s1-text2", "s1-img1"이라는 클래스가 정의되어 있습니다.
- CSS는 HTML 요소의 스타일을 지정하며, 이 코드에서는 각 클래스에 대해 다양한 스타일이 지정되어 있습니다. 예를 들어, "s1-text1" 클래스에는 폰트 크기와 색상, 투명도 등의 스타일이 설정되어 있습니다.
- JavaScript는 HTML과 CSS로 구성된 웹 페이지를 동적으로 만들 수 있습니다. 이 코드에서는 "data-" 접두어를 가진 속성들을 이용하여 스크롤을 내리면서 특정 시간에 도달할 때의 요소의 상태를 지정하는 것으로 애니메이션 효과를 구현하고 있습니다. 예를 들어, "s1-text" 클래스의 "data-" 속성은 스크롤이 내려가면서 폰트 크기, 색상, 투명도를 시간에 따라 변경하게 됩니다.
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.min.js 라이브러리를 호출하여 skrollr 객체를 생성합니다. 이 객체는 페이지 스크롤 이벤트를 추적하고, 스크롤 애니메이션을 생성하기 위한 다양한 메소드와 속성을 가지고 있습니다.
- 다음으로, window.addEventListener 메소드를 사용하여 스크롤 이벤트를 감지합니다. 이벤트가 발생하면, window.pageYOffset 또는 window.scrollY를 사용하여 현재 스크롤 위치 값을 가져옵니다. 이 값은 parseInt() 함수를 사용하여 정수 형태로 변환되고, document.querySelector를 사용하여 scrollTop 클래스가 지정된 요소에 할당됩니다.
- 따라서 이 코드는 페이지 스크롤 위치 값을 scrollTop 클래스가 지정된 요소에 표시하는 간단한 예제입니다. 이렇게 스크롤 위치 값을 감지하고 표시하는 기능은 웹사이트에서 다양한 애니메이션 및 상호작용 효과를 만드는 데 사용될 수 있습니다.