반응형
이미지 슬라이더쇼 에 낙엽 애니메이션을 추가해 보았습니다..
index.html
<!DOCTYPE html>
<html lang="ko" >
<head>
<meta charset="UTF-8">
<title>xpx.kr</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="tsparticles"></div>
<div class="slideshow">
<img src="https://iili.io/2ofb7kl.webp" alt="Slide 1" class="fade-in">
<img src="https://iili.io/2ofb574.webp" alt="Slide 2">
<img src="https://iili.io/2ofbYp2.webp" alt="Slide 3">
<img src="https://iili.io/2ofbcIS.webp" alt="Slide 4">
<img src="https://iili.io/2ofbR2f.webp" alt="Slide 5">
<img src="https://iili.io/2oftvwP.webp" alt="Slide 6">
<img src="https://iili.io/2oftUoF.webp" alt="Slide 7">
<img src="https://iili.io/2oftgMg.webp" alt="Slide 8">
<img src="https://iili.io/2oft6KJ.webp" alt="Slide 9">
<img src="https://iili.io/2oftrPa.webp" alt="Slide 10">
<img src="https://iili.io/2oftPcv.webp" alt="Slide 11">
<img src="https://iili.io/2oftiSR.webp" alt="Slide 12">
<img src="https://iili.io/2oftQAN.webp" alt="Slide 13">
<img src="https://iili.io/2oftZNI.webp" alt="Slide 14">
</div>
<script src="https://cdn.jsdelivr.net/npm/tsparticles@2.11.0/tsparticles.bundle.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
script.js
tsParticles.load("tsparticles", {
particles: {
number: {
value: 30,
density: {
enable: true,
value_area: 800
}
},
shape: {
type: "image",
image: [
{
src: "https://iili.io/2ofIXAN.png",
width: 34,
height: 50
},
{
src: "https://iili.io/2ofIW9p.png",
width: 50,
height: 50
},
{
src: "https://iili.io/2ofIMSR.png",
width: 19,
height: 50
},
{
src: "https://iili.io/2ofSQuj.png",
width: 48,
height: 50
}
]
},
opacity: {
value: 0.9,
random: true
},
size: {
value: 10,
random: false
},
move: {
enable: true,
speed: 2,
direction: "bottom",
random: true,
straight: false,
out_mode: "out",
bounce: false
},
rotate: {
value: 45,
random: true,
animation: {
enable: true,
speed: 10,
sync: false
}
}
},
interactivity: {
events: {
onhover: {
enable: false
},
onclick: {
enable: true,
mode: "push"
}
},
modes: {
push: {
particles_nb: 4
}
}
},
retina_detect: true
});
let currentIndex = 0;
const slides = document.querySelectorAll(".slideshow img");
const totalSlides = slides.length;
const intervalTime = 4000;
function showNextSlide() {
slides[currentIndex].classList.remove("fade-in");
slides[currentIndex].classList.add("fade-out");
currentIndex = (currentIndex + 1) % totalSlides;
slides[currentIndex].classList.remove("fade-out");
slides[currentIndex].classList.add("fade-in");
}
setInterval(showNextSlide, intervalTime);
style.css
body,
html {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
background-color: black;
}
#tsparticles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.slideshow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 333px;
overflow: hidden;
border-radius: 10px;
border: 8px solid black;
outline: 12px solid #222;
}
.slideshow img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1.5s ease, transform 1.5s ease;
transform-origin: center center;
}
.slideshow img.fade-out {
opacity: 0;
transform: scale(1.2);
}
.slideshow img.fade-in {
opacity: 1;
transform: scale(1);
z-index: 1;
}
@media (max-width: 768px) {
.slideshow {
width: 80%;
top: 50%;
}
}
반응형
'디자인소스' 카테고리의 다른 글
| 웹표준 마크업을 사용한 깔끔한 사이트 맵 (1) | 2024.11.22 |
|---|---|
| 오디오 비주얼라이저 플레이어 만들기 연속 재생 (1) | 2024.11.15 |
| CSS3 로 구성된 간단한 시계 소스 (0) | 2024.11.12 |
| 이미지 필터 생성기 (0) | 2024.11.01 |
| mp3 음악입자 그래픽 이퀄라이저 시각화 플레이어 가사자막 생성기 (2) | 2024.09.10 |
| 반응형 G5 BEST (2) | 2024.06.02 |
| 워드프레서 와 G5 기반 미디어 홈제작 (0) | 2024.05.23 |
| 스마트 웹 사이트 디자인 동영상 슬라이드 메뉴 (0) | 2023.12.13 |
댓글