요소의 페이드 인/아웃 효과를 보여주는 예제를 6개 제공하겠습니다. 각 예제는 주석과 함께 설명되며, HTML과 CSS 코드로 구성되어 있습니다.
예제 1: 텍스트 페이드 인/아웃
<!DOCTYPE html>
<html>
<head>
<style>
/* 텍스트 페이드 인/아웃 */
.fade-text {
opacity: 1;
transition: opacity 1s ease-in-out;
}
.fade-text.hidden {
opacity: 0;
}
</style>
</head>
<body>
<p class="fade-text">이 텍스트는 페이드 인/아웃 됩니다.</p>
<button onclick="toggleFade()">토글</button>
<script>
function toggleFade() {
const text = document.querySelector('.fade-text');
text.classList.toggle('hidden');
}
</script>
</body>
</html>
예제 2: 이미지 페이드 인/아웃
<!DOCTYPE html>
<html>
<head>
<style>
/* 이미지 페이드 인/아웃 */
.fade-image {
opacity: 1;
transition: opacity 1s ease-in-out;
}
.fade-image.hidden {
opacity: 0;
}
</style>
</head>
<body>
<img class="fade-image" src="image.jpg" alt="페이드 이미지">
<button onclick="toggleFade()">토글</button>
<script>
function toggleFade() {
const image = document.querySelector('.fade-image');
image.classList.toggle('hidden');
}
</script>
</body>
</html>
예제 3: 배경색 페이드 인/아웃
<!DOCTYPE html>
<html>
<head>
<style>
/* 배경색 페이드 인/아웃 */
.fade-bg {
width: 200px;
height: 200px;
background-color: #3498db;
transition: background-color 1s ease-in-out;
}
.fade-bg.hidden {
background-color: #e74c3c;
}
</style>
</head>
<body>
<div class="fade-bg"></div>
<button onclick="toggleFade()">토글</button>
<script>
function toggleFade() {
const background = document.querySelector('.fade-bg');
background.classList.toggle('hidden');
}
</script>
</body>
</html>
예제 4: 크기 변화와 투명도 조절
<!DOCTYPE html>
<html>
<head>
<style>
/* 크기 변화와 투명도 조절 페이드 인/아웃 */
.fade-size {
width: 100px;
height: 100px;
background-color: #3498db;
opacity: 1;
transition: width 1s ease-in-out, height 1s ease-in-out, opacity 1s ease-in-out;
}
.fade-size.hidden {
width: 50px;
height: 50px;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="fade-size"></div>
<button onclick="toggleFade()">토글</button>
<script>
function toggleFade() {
const element = document.querySelector('.fade-size');
element.classList.toggle('hidden');
}
</script>
</body>
</html>
예제 5: 텍스트와 이미지 조합 페이드 인/아웃
<!DOCTYPE html>
<html>
<head>
<style>
/* 텍스트와 이미지 조합 페이드 인/아웃 */
.fade-combo {
text-align: center;
}
.fade-combo .fade-text {
opacity: 1;
transition: opacity 1s ease-in-out;
}
.fade-combo .fade-image {
opacity: 1;
transition: opacity 1s ease-in-out;
}
.fade-combo .hidden {
opacity: 0;
}
</style>
</head>
<body>
<div class="fade-combo">
<p class="fade-text">이 텍스트는 페이드 인/아웃 됩니다.</p>
<img class="fade-image" src="image.jpg" alt="페이드 이미지">
</div>
<button onclick="toggleFade()">토글</button>
<script>
function toggleFade() {
const text = document.querySelector('.fade-text');
const image = document.querySelector('.fade-image');
text.classList.toggle('hidden');
image.classList.toggle('hidden');
}
</script>
</body>
</html>
예제 6: 버튼 페이드 인/아웃
<!DOCTYPE html>
<html>
<head>
<style>
/* 버튼 페이드 인/아웃 */
.fade-button {
opacity: 1;
transition: opacity 1s ease-in-out;
}
.fade-button.hidden {
opacity: 0;
}
</style>
</head>
<body>
<button class="fade-button">이 버튼은 페이드 인/아웃 됩니다.</button>
<button onclick="toggleFade()">토글</button>
<script>
function toggleFade() {
const button = document.querySelector('.fade-button');
button.classList.toggle('hidden');
}
</script>
</body>
</html>
'CSS' 카테고리의 다른 글
| 반복 배경 이미지: 배경 이미지 반복 설정. (0) | 2023.12.23 |
|---|---|
| 뒷 배경 이미지: 요소의 배경에 이미지 추가. (0) | 2023.12.23 |
| 화면 가운데 정렬: 요소를 화면 가운데 정렬. (0) | 2023.12.23 |
| 툴팁 스타일링: 툴팁 디자인 커스터마이징. (0) | 2023.12.23 |
| 텍스트 회전: 텍스트 회전 효과 적용. (0) | 2023.12.23 |