안녕하세요 코더입니다! Codewithrandom 블로그에 오신 것을 환영합니다. 이 블로그에서는 CSS를 사용하여 스크롤 애니메이션을 만드는 방법에 대해 알아봅니다. 웹 페이지를 스크롤할 때 콘텐츠는 다른 측면의 애니메이션에서 가져옵니다.
스크롤 애니메이션에는 Html, CSS 및 JavaScript를 사용합니다. 이 프로젝트에서 JavaScript를 사용하는 이유는 더 좋고 부드러운 스크롤 애니메이션을 얻을 수 있기 때문입니다.
CSS를 사용한 스크롤 애니메이션[/caption]
스크롤 애니메이션은 방문자가 웹 사이트를 위아래로 스크롤하는 동안 발생하는 모든 종류의 애니메이션입니다. 스크롤 애니메이션에서 사용자가 웹 사이트 양식을 아래로 스크롤하면 웹 사이트에 적용한 이미지 및 비디오 효과가 다른 효과를 제공합니다.
블로그가 마음에 드셨으면 좋겠으니 스크롤 애니메이션의 기본 html 구조부터 시작하겠습니다.
스크롤 애니메이션을 위한 HTML 코드:-
<body>
<h1>Scroll animation codewithrandom</h1>
<div class="box"><h2>image</h2></div>
<div class="box"><h2>image</h2></div>
<div class="box"><h2>image</h2></div>
<div class="box"><h2>image</h2></div>
<div class="box"><h2>image</h2></div>
<div class="box"><h2>image</h2></div>
<div class="box"><h2>image</h2></div>
</body>이제 스크롤 애니메이션을 위한 프레임워크를 구현해야 합니다. 먼저 h1> 태그 선택기를 사용하여 스크롤 애니메이션의 제목을 추가합니다. 다음으로 클래스 상자와 함께 div> 태그를 사용하여 컨테이너를 만들고 컨테이너 내부에 h2 태그를 사용하여 제목 그림을 추가합니다. 수많은 이미지의 경우 비슷한 방식으로 고유한 컨테이너를 만듭니다.
스크롤 동작의 경우 전체 HTML 코드가 있습니다. 현재 JavaScript 및 CSS는 결과에 없습니다. 그런 다음 CSS를 사용하여 스크롤 애니메이션의 스타일이 지정되고 JavaScript를 사용하여 스크롤 기능이 추가됩니다.
HTML 코드 출력 : -
스크롤 애니메이션 Css 코드:-
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #eee;
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
overflow-x: hidden;
}
h1 {
margin: 10px;
}
.box {
background: url(https://source.unsplash.com/1600x900/?nature,water) ;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 200px;
margin: 10px;
border-radius: 6px;
box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
transform: translateX(400%);
transition: transform 0.4s ease;
}
.box:nth-of-type(even) {
transform: translateX(-400%);
}
.box.show {
transform: translateX(0);
}
.box h2 {
font-size: 45px;
}1 단계 : Google 가져오기 링크를 사용하여 Google 글꼴을 스크롤 애니메이션 프로젝트에 통합합니다. Google 가져오기 링크를 사용하여 프로젝트에 Roboto Google 글꼴을 추가할 것입니다. 범용 선택기를 사용하여 상자 크기를 "border-box"로 조정합니다.
h1 태그 선택기를 사용하여 여백을 "10px"로 설정하고, 배경색 속성을 "흰색"으로 설정하고, 글꼴 패밀리를 "Roboto"로 설정하고, 디스플레이를 flex로 설정하고, body 태그 선택기를 사용하여 배경색과 글꼴 패밀리를 설정합니다.
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #eee;
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
overflow-x: hidden;
}
h1 {
margin: 10px;
}2 단계 : 이미지는 url 링크를 사용하여 상자의 배경에 추가되고, hue 속성은 흰색으로 설정되고, 텍스트는 text align 속성을 사용하여 가운데 정렬되며, 클래스 선택기(.box)는 상자의 배경에 이미지를 추가하는 데 사용됩니다. 따라서 "300px" 및 "200px"는 너비와 높이의 값입니다. transform 속성을 사용하여 상자를 수정합니다.
.box {
background: url(https://source.unsplash.com/1600x900/?nature,water) ;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 200px;
margin: 10px;
border-radius: 6px;
box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
transform: translateX(400%);
transition: transform 0.4s ease;
}
.box:nth-of-type(even) {
transform: translateX(-400%);
}
.box.show {
transform: translateX(0);
}
.box h2 {
font-size: 45px;
}이제 Css 섹션 스크롤을 완료했습니다. 다음은 업데이트된 출력 HTML + CSS입니다.
출력
이제 Div 및 Scroll Animation 기능에 이미지를 표시하기 위한 JavaScript를 추가합니다.
스크롤 애니메이션을 위한 JavaScript 코드:-
const boxes = document.querySelectorAll('.box')
window.addEventListener('scroll', checkBoxes)
checkBoxes()
function checkBoxes() {
const triggerBottom = window.innerHeight /5 * 4
boxes.forEach(box => {
const boxTop = box.getBoundingClientRect().top
if(boxTop < triggerBottom) {
box.classList.add('show')
} else {
box.classList.remove('show')
}
})
}boxes라는 변수를 만들고 const 키워드를 사용하여 문서를 사용합니다. queryselectorHTML 구성 요소가 모두 선택됩니다. 창문을 사용합니다. AddEventListener: checkBoxes() 메서드와 스크롤 이벤트 리스너를 만드는 것 외에도 창을 축소합니다. 클래스 목록은 innerheight 속성을 확인하여 상자 상단이 표시되는지 확인한 후 추가되고 사용자가 웹 사이트를 위로 스크롤하면 제거됩니다.
CSS를 사용한 스크롤 애니메이션의 최종 출력:-
CSS를 사용한 스크롤 애니메이션[/caption]
CSS를 사용한 스크롤 애니메이션[/caption]
다음은 Html, CSS 및 JavaScript로 업데이트된 출력입니다. 스크롤 애니메이션이 마음에 드셨으면 합니다. 출력 비디오 및 프로젝트 스크린샷을 볼 수 있습니다. 다른 블로그를 참조하고 프론트엔드 개발에 대한 지식을 얻으십시오.
감사합니다!
작성자 — Random/Anki가 있는 코드
스크롤 애니메이션이란 무엇입니까?
스크롤 애니메이션은 방문자가 웹 사이트를 위아래로 스크롤하는 동안 발생하는 모든 종류의 애니메이션입니다. 스크롤 애니메이션에서 사용자가 웹 사이트 양식을 아래로 스크롤 할 때 웹 사이트에 적용한 이미지 및 비디오 효과는 다른 효과를 제공합니다.
스크롤 애니메이션의 목적은 무엇입니까?
뷰어가 웹 사이트를 스크롤할 때 웹 사이트를 동적으로 보이게 하려면 스크롤 애니메이션이 사용됩니다.
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 프로그래밍 「 자바스크립트 편」HTML 및 CSS를 사용하여 텍스트 애니메이션 입력(소스 코드) (0) | 2023.06.17 |
|---|---|
| 프로그래밍 「 자바스크립트 편」CSS 및 JavaScript 코드를 사용하여 햄버거 메뉴를 만드는 방법 (0) | 2023.06.17 |
| 프로그래밍 「 자바스크립트 편」JavaScript를 사용하여 미리보기로 파일 업로드 드래그 앤 드롭 (0) | 2023.06.17 |
| 프로그래밍 「 자바스크립트 편」GraalVM 언어의 새로운 기능 (0) | 2023.06.17 |
| 프로그래밍 「 자바스크립트 편」HTML 코드를 사용하는 난수 생성기 (1) | 2023.06.17 |
