<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valentine's Day Slideshow</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #fd297b, #ff5864, #ff655b);
font-family: Arial, sans-serif;
perspective: 1000px;
}
.container {
position: relative;
width: 800px;
height: 500px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
border-radius: 20px;
overflow: hidden;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
transform-style: preserve-3d;
}
.slideshow {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transform: translateZ(-500px) rotateY(30deg);
transition: all 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.slide.active {
opacity: 1;
transform: translateZ(0) rotateY(0);
}
.slide.prev {
opacity: 0;
transform: translateZ(-500px) rotateY(-30deg);
}
.slide.next {
opacity: 0;
transform: translateZ(-500px) rotateY(30deg);
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.controls {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 20px;
z-index: 10;
}
.control-btn {
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.4);
padding: 12px 24px;
border-radius: 25px;
cursor: pointer;
color: white;
font-weight: bold;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}
.control-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.audio-control {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.4);
padding: 12px;
border-radius: 50%;
cursor: pointer;
backdrop-filter: blur(5px);
z-index: 10;
transition: all 0.3s ease;
}
.audio-control:hover {
transform: scale(1.1);
background: rgba(255, 255, 255, 0.3);
}
.indicators {
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
z-index: 10;
}
.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid rgba(255, 255, 255, 0.4);
}
.indicator:hover {
transform: scale(1.2);
}
.indicator.active {
background: white;
transform: scale(1.2);
}
.progress-bar {
position: absolute;
bottom: 0;
left: 0;
height: 6px;
background: rgba(255, 255, 255, 0.1);
width: 100%;
overflow: hidden;
}
.progress {
height: 100%;
background: linear-gradient(90deg, #ff6b6b, #feca57);
width: 0;
transition: width 0.1s linear;
box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}
/* เพิ่ม Animation ตกแต่ง */
.hearts {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.heart {
position: absolute;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.6);
transform: rotate(45deg);
animation: floatingHeart 4s ease-in infinite;
}
.heart:before,
.heart:after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
}
.heart:before {
left: -10px;
}
.heart:after {
top: -10px;
}
@keyframes floatingHeart {
0% {
transform: rotate(45deg) translateY(0) scale(0);
opacity: 0;
}
20% {
transform: rotate(45deg) translateY(-20px) scale(1);
opacity: 0.8;
}
100% {
transform: rotate(45deg) translateY(-100px) scale(0);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="hearts" id="hearts"></div>
<div class="slideshow" id="slideshow">
<div class="slide active">
<img src="./images/pexels-pixabay-258421.jpg" alt="Valentine 1">
</div>
<div class="slide next">
<img src="./images/pexels-pixabay-326612.jpg" alt="Valentine 2">
</div>
<div class="slide">
<img src="./images/pexels-visoesdomundo-2494701.jpg" alt="Valentine 3">
</div>
</div>
<div class="indicators" id="indicators"></div>
<div class="progress-bar">
<div class="progress" id="progress"></div>
</div>
<div class="controls">
<button class="control-btn" onclick="prevSlide()">Previous</button>
<button class="control-btn" onclick="nextSlide()">Next</button>
</div>
<button class="audio-control" onclick="toggleAudio()" id="audioBtn">
🔊
</button>
</div>
<audio id="bgMusic" loop>
<source src="./songs/One_My_Choose.mp3" type="audio/mpeg">
</audio>
<script>
/**
* Initialize slideshow variables
*/
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const audio = document.getElementById('bgMusic');
const audioBtn = document.getElementById('audioBtn');
const progress = document.getElementById('progress');
let isPlaying = false;
let progressInterval;
const slideDuration = 5000;
/**
* Create floating hearts animation
*/
function createHearts() {
const heartsContainer = document.getElementById('hearts');
const createHeart = () => {
const heart = document.createElement('div');
heart.className = 'heart';
heart.style.left = Math.random() * 100 + '%';
heart.style.animationDelay = Math.random() * 4 + 's';
heartsContainer.appendChild(heart);
setTimeout(() => heart.remove(), 4000);
};
setInterval(createHeart, 300);
}
/**
* Create indicators
*/
const indicatorsContainer = document.getElementById('indicators');
slides.forEach((_, index) => {
const indicator = document.createElement('div');
indicator.className = `indicator ${index === 0 ? 'active' : ''}`;
indicator.onclick = () => goToSlide(index);
indicatorsContainer.appendChild(indicator);
});
/**
* Update indicators
*/
function updateIndicators() {
document.querySelectorAll('.indicator').forEach((indicator, index) => {
indicator.classList.toggle('active', index === currentSlide);
});
}
/**
* Update slide classes for 3D effect
*/
function updateSlideClasses() {
slides.forEach((slide, index) => {
slide.className = 'slide';
if (index === currentSlide) {
slide.classList.add('active');
} else if (index === (currentSlide + 1) % slides.length) {
slide.classList.add('next');
} else if (index === (currentSlide - 1 + slides.length) % slides.length) {
slide.classList.add('prev');
}
});
}
/**
* Show the next slide
*/
function nextSlide() {
currentSlide = (currentSlide + 1) % slides.length;
updateSlideClasses();
updateIndicators();
resetProgress();
}
/**
* Show the previous slide
*/
function prevSlide() {
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
updateSlideClasses();
updateIndicators();
resetProgress();
}
/**
* Go to specific slide
*/
function goToSlide(index) {
currentSlide = index;
updateSlideClasses();
updateIndicators();
resetProgress();
}
/**
* Toggle background music
*/
function toggleAudio() {
if (isPlaying) {
audio.pause();
audioBtn.textContent = '🔇';
} else {
audio.play();
audioBtn.textContent = '🔊';
}
isPlaying = !isPlaying;
}
/**
* Progress bar management
*/
function updateProgress() {
let elapsed = 0;
progressInterval = setInterval(() => {
elapsed += 100;
const width = (elapsed / slideDuration) * 100;
progress.style.width = `${Math.min(width, 100)}%`;
}, 100);
}
function resetProgress() {
clearInterval(progressInterval);
progress.style.width = '0%';
updateProgress();
}
/**
* Initialize slideshow
*/
function initSlideshow() {
createHearts();
updateProgress();
setInterval(nextSlide, slideDuration);
}
// Start the slideshow
initSlideshow();
</script>
</body>
</html>