Django 포스팅
Doyeon0430 | 2023년 09월 05일
이번시간에는 자바스크립트를 사용해서 시작 페이지에 글자 모션과 연기 애니메이션을 만들어 보겠습니다.
글자 모션은 자바스크립트에 이벤트 리스너를 사용하고 연기 애니메이션은 CSS에 키프레임을 사용할 겁니다.
그럼 지금부터 코드 리뷰 포스팅을 시작하겠습니다.
HTML 코드에서 2개의 클래스를 선언했습니다.
HTML 코드
<div class="splash-container">
<h1 class="splash-text">Welcome to My Website</h1>
</div>splash-container는 태그들의 전체 영역을 지정해줍니다.
splash-text는 글자의 모션 효과를 넣어줍니다.
CSS 코드에서 글자에 기본 디자인과 연기 애니메이션 효과를 만들었습니다.
CSS 코드
body {
margin: 0;
overflow: hidden;
background-color: #3a3a3a;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.splash-text {
text-align: center;
font-size: 50px;
opacity: 0;
transform: translateY(-100px);
transition: opacity 1s, transform 1s;
position: relative;
z-index: 1;
}
.smoke {
position: absolute;
width: 30px;
height: 30px;
background-color: #ca9fff;
border-radius: 50%;
transform: scale(1);
animation: smokeAnimation 1s ease-out;
}
@keyframes smokeAnimation {
0% {
transform: scale(1);
opacity: 0.5;
}
100% {
transform: scale(30);
opacity: 0;
}
}splash-text는 폰트에 디자인을 조절해줍니다.
smoke는 연기 애니메이션을 만드는 기능으로 키프레임을 넣어줬습니다.
키프레임에서 사라지는 효과를 나타내기 위해 opacity를 투명하게 설정해야 합니다.
마지막으로 자바스크립트를 사용해 글자의 모션과 연기 애니메이션에 위치를 지정하겠습니다.
JavaScript 코드
document.addEventListener('DOMContentLoaded', () => {
const splashText = document.querySelector('.splash-text');
setTimeout(() => {
splashText.style.opacity = '1';
splashText.style.transform = 'translateY(0)';
createSmoke(splashText);
}, 500);
function createSmoke(container) {
const smoke = document.createElement('div');
smoke.classList.add('smoke');
container.appendChild(smoke);
const x = container.clientWidth / 2;
const y = container.clientHeight / 2;
smoke.style.left = `${x}px`;
smoke.style.top = `${y}px`;
setTimeout(() => {
smoke.remove();
}, 1000);
}
})DOMContentLoaded은 HTML이 로드되고 DOM이 완전히 생성된 후 실행하는 이벤트 리스너입니다.
setTimeout에서 글자가 0.5초 뒤에 나오도록 조절합니다.
createElement로 div에 연기 애니메이션 클래스를 추가해 줍니다.
마지막으로 해당 값에 위치를 잡아주고 remove로 연기 애니메이션 클래스를 제거합니다.
아래 플랫폼을 통해 결과물을 확인할 수 있습니다.
새로고침을 하면 글자 모션과 연기 애니메이션이 작동합니다.
이렇게 함으로써 시작 페이지에 메인 화면을 생동감있게 구현할 수 있습니다.
글을 마치며 자바스크립트를 사용해서 시작 페이지 애니메이션 효과를 넣어봤습니다.
지금까지 긴 글 읽어주셔서 감사합니다.
댓글 (0)
간편 댓글 작성
