728x90
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur quod provident dignissimos veritatis rem a dolores aperiam ex. Maiores obcaecati nulla, dolor unde praesentium repellat nemo magni temporibus? Et, esse?</p></section>
<section><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit nobis, provident nam delectus vel ea odit, veniam ullam similique tenetur, magni dolore commodi possimus aliquam amet culpa sit ipsam quam.
Quibusdam velit neque odit a ratione natus unde mollitia ad expedita architecto. Accusantium atque nemo enim sint qui vel non sit odio aspernatur. Tenetur minus blanditiis consectetur nobis nam inventore.</p></section>
<section><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure harum adipisci praesentium ut distinctio optio quibusdam rerum quam non accusamus, perspiciatis reiciendis veniam, excepturi placeat error ab exercitationem, nihil quis?</p></section>
<section><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis magnam a iusto quos dolores laborum illo non. Molestiae, ratione! Non facere officiis dolor cupiditate inventore adipisci facilis dicta. Veniam, dolorum.</p></section>
<section><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum delectus officia tempora ipsum, sint eius vero unde accusamus architecto suscipit! Sit minima, iusto nisi officia molestiae aliquam suscipit cum unde.
Rerum natus quasi, ducimus cupiditate illo incidunt itaque nobis ratione sint tempora odio, minus praesentium, molestiae unde explicabo vel laboriosam voluptates beatae earum at repellendus esse velit obcaecati. Nisi, et.</p></section>
</main>
<script src="app.js"></script>
</body>
</html>index.html 파일을 위와 같이 작성한다.
body{
margin: 0; padding: 0;
box-sizing: border-box;
}
main{
background-color: #0e1111;
width: 100vw; height: 100vh;
scroll-snap-type: y mandatory;
overflow-y: auto;
}
main section{
scroll-snap-align: start;
width: 100%; height: 100%;
font-size: 1.5rem;
font-weight: bold;
color: wheat;
display: flex;
justify-content: center;
align-items: center;
}
main section:nth-child(1){
background-color: #0e1111;
}
main section:nth-child(2){
background-color: saddlebrown;
}
main section:nth-child(3){
background-color: blueviolet;
}
main section:nth-child(4){
background-color: yellowgreen;
}
main section:nth-child(5){
background-color: salmon;
}
main section p{
padding: 0; margin: 0;
opacity: 0;
transform: translateY(-50px);
transition: 1s ease-in-out;
width: 30%;
overflow-wrap: break-word; /* 글자가 p 태그 밖으로 삐져나오는것 방지함 */
/* border: 1px solid red; */
}
main section:nth-child(1) p{
opacity: 1;
}
.fade{
opacity: 1;
transform: translateY(0);
}style.css 파일을 위와 같이 작성한다.
const main = document.querySelector('main')
const sections = main.querySelectorAll('section')
main.addEventListener('scroll', (e) => {
sections.forEach(function(section){
if(section.getBoundingClientRect().top < 100 && section.getBoundingClientRect().top > 0){
console.log(section, section.getBoundingClientRect().top)
section.querySelector('p').classList.add('fade')
}
})
})요소의 getBoundingClientRect 메서드를 이용하여 해당 섹션이 브라우저 상단에 가까워지면 텍스트 애니메이션을 적용한다.
728x90
'프론트엔드 > 컴포넌트' 카테고리의 다른 글
| 모달창 드래그앤 드롭 (0) | 2024.06.18 |
|---|---|
| 드롭다운 메뉴 (0) | 2024.05.31 |
| 위로 증가하는 바 그래프 (0) | 2024.02.16 |
| 돋보기 효과 (0) | 2024.02.14 |
| 입력창에서 숫자만 입력 가능하게 하기 (36) | 2023.08.24 |