참고: https://www.digitalocean.com/community/tutorials/js-simple-page-fade-in
페이지 전환 효과는 애플리케이션 사용자의 사용자 경험에 심미적 효과를 줍니다. javascript는 dom(document object model)이 로드될 때를 감지해 css 클래스를 추가/제거 하여 화면 전환 fade-in 효과를 만들 수 있습니다.
Step 1 - CSS opacity와 transition 사용하기
먼저 페이지가 열리는 시간과 fade-in되는 시간에 대한 css 규칙을 만들어야 합니다. 이 효과가 어떻게 보일지는 css의 opacity와 transition 속성에 의해 달라집니다. body 항목에 fade 클래스를 추가/제거 함으로 opacity가 0에서 1로 전환되도록 할 수 있습니다.
index.html:
<head>
<style>
body {
opacity: 1;
transition-duration: 1s;
transition-property: opacity;
}
body.fade {
opacity: 0;
}
</style>
</head>
...fade-in 코드는 body 클래스에 바로 적용해서 opacity가 없도록(0) 설정합니다. 일단 페이지가 로드되면 fade 클래스를 제거하여 body 항목의 opacity가 0에서 1까지 1초 동안 서서히 올라가도록 할 것입니다.
Step 2 - fade-in 클래스 적용
이제 페이지의 body 열리자마자 body 항목에 fade 클래스를 추가하도록 합니다.
index.html:
...
<body>
<!-- ... -->
<script>
document.body.className = 'fade';
</script>
<!-- ... -->
</body>위의 코드는 body의 클래스에 fade만 존재하도록 하는데 이 대신 body에 다른 클래스가 이미 존재하고 있었고 fade를 거기에 추가해야 한다면 classList 객체의 .add() 메소드를 사용하여 fade 클래스를 추가합니다. 다음 예제 처럼 classList 객체의 .add() 메소드를 사용하고 매개변수로 fade 클래스를 넘겨줍니다.
index.html:
...
<body>
<!-- ... -->
<script>
document.body.classList.add('fade');
</script>
<!-- ... -->
</body>위와 같이 작성하면 기존 클래스 목록에 fade 클래스를 추가하게 됩니다.
Step 3 - fade-in 클래스 제거
dom이 로드됐을 때 클래스 목록에서 fade-in 전환을 지우려면 이벤트리스너를 등록해야합니다. 또한 화면 전환 효과가 눈으로 보이게 하기 위해 딜레이를 줘야합니다. 다음 예제 처럼 이벤트리스너를 추가하고 body의 클래스를 빈 문자열로 할당합니다.
<body>
<!-- ... -->
<script>
document.addEventListener("DOMContentLoaded", () => {
window.setTimeout(() => {
document.body.className = '';
});
});
</script>
<!-- ... -->
</body>페이지가 로드되었을 때 빈 문자열은 할당하는 것은 javascript에게 클래스 명을 모두 지우라는 의미 입니다. 하지만 위의 클래스명을 추가하는 것과 마찬가지로 body 항목에 다른 클래스 명이 여러개 있을 때 fade만 지우기 위해서는 classList 객체의 .remove() 메소드를 사용해야 합니다.
<body>
<!-- ... -->
<script>
document.addEventListener("DOMContentLoaded", () => {
window.setTimeout(() => {
document.body.classList.remove('fade');
});
});
</script>
<!-- ... -->
</body>.remove() 메소드는 fade 클래스를 지울 것 입니다.
이제 페이지를 로드하면 body 항목에 fade 클래스가 추가되어서 opacity가 0인 상태로 시작해서 페이지 로딩이 모두 완료되면 fade 클래스가 지워지면서 css transition에 의해 opacity가 0에서 1로 1초 동안 서서히 보이게됩니다.
전체 코드
<html>
<head>
<style>
body {
opacity: 1;
transition-duration: 1s;
transition-property: opacity;
}
body.fade {
opacity: 0;
}
div {
font-size: 100px;
font-weight: bold;
}
</style>
</head>
<body class="fade">
<div>
PAGE
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
window.setTimeout(() => {
document.body.classList.remove('fade');
});
});
</script>
</body>
</html>정리
이 글에서는 javascript와 css의 조합을 사용하여 페이지가 로드될 때 fade-in(서서히 보이기) 효과를 만들었습니다. 효과를 만들기 위해서 opacity 및 transition을 사용했습니다. 그 다음 dom을 조작하여 화면전환을 시키는 클래스를 추가/제거 했습니다.
'dev > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 버튼 클릭 (0) | 2022.06.14 |
|---|---|
| [javascript] 자바스크립트 공백 제거(trim, strip whitespace) (0) | 2022.06.14 |
| [javascript] 자바스크립트 forEach 사용 방법 (루프돌기) (0) | 2022.06.13 |
| [javascript] 자바스크립트 Date 사용 방법 (현재 날짜 가져오기) (0) | 2022.06.09 |
| [javascript] 자바스크립트 로컬스토리지 사용 방법 (1) | 2022.06.03 |
댓글