<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@400;700&display=swap" rel="stylesheet">
<title>Fullscreen Valentine's Slideshow</title>
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
background: linear-gradient(45deg, #ff1b6b, #45caff);
font-family: Arial, sans-serif;
}
.slideshow-container {
position: fixed;
width: 80%;
height: 80%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 1200px;
max-height: 800px;
}
.slide {
position: absolute;
width: 800px;
height: 600px;
opacity: 0;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
transition: all 1.5s ease-in-out;
transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
left: 50%;
top: 50%;
}
.slide.active {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotate(0deg);
animation: floatAndRotate 20s ease-in-out infinite;
}
@keyframes floatAndRotate {
0% {
transform: translate(-50%, -50%) scale(1) rotate(-5deg);
}
25% {
transform: translate(-50%, -50%) scale(1.05) rotate(3deg);
}
50% {
transform: translate(-50%, -50%) scale(1) rotate(-2deg);
}
75% {
transform: translate(-50%, -50%) scale(1.05) rotate(4deg);
}
100% {
transform: translate(-50%, -50%) scale(1) rotate(-5deg);
}
}
.slide.move-out {
opacity: 0;
transition: all 1.5s ease-in-out;
}
/* ทิศทางการเคลื่อนที่ออก */
.move-top-right {
transform: translate(0%, -150%) scale(0.8) rotate(20deg) !important;
}
.move-top-left {
transform: translate(-100%, -150%) scale(0.8) rotate(-20deg) !important;
}
.move-bottom-right {
transform: translate(0%, 50%) scale(0.8) rotate(-15deg) !important;
}
.move-bottom-left {
transform: translate(-100%, 50%) scale(0.8) rotate(15deg) !important;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* อนิเมชั่นลอยขึ้น */
@keyframes floatUp {
0% {
transform: translateY(10px) scale(0.8) rotate(-5deg);
}
25% {
transform: translateY(-10px) scale(0.9) rotate(3deg);
}
50% {
transform: translateY(5px) scale(0.85) rotate(-2deg);
}
75% {
transform: translateY(-5px) scale(0.95) rotate(4deg);
}
100% {
transform: translateY(10px) scale(0.8) rotate(-5deg);
}
}
/* เอฟเฟกต์หัวใจลอย */
.hearts-container {
position: fixed;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.heart {
position: absolute;
font-size: 20px;
color: rgba(255, 255, 255, 0.8);
animation: float 4s ease-in infinite;
}
@keyframes float {
0% {
transform: translateY(100vh) scale(0);
opacity: 1;
}
100% {
transform: translateY(-20vh) scale(1.5);
opacity: 0;
}
}
/* Controls */
.controls {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
gap: 20px;
}
.control-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
padding: 15px 30px;
border-radius: 30px;
color: white;
font-size: 18px;
cursor: pointer;
backdrop-filter: blur(5px);
transition: all 0.3s;
}
.control-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.audio-control {
position: fixed;
top: 20px;
right: 20px;
z-index: 10;
background: rgba(255, 255, 255, 0.2);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
color: white;
font-family: 'Sarabun', sans-serif;
font-size: 32px;
font-weight: 700;
cursor: pointer;
backdrop-filter: blur(5px);
transition: all 0.3s;
}
.audio-control:hover {
transform: scale(1.1);
}
/* ข้อความบอกรัก */
.love-message {
position: absolute;
color: white;
font-size: 24px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
opacity: 0;
animation: messageFade 4s ease-in-out;
background: rgba(255, 255, 255, 0.1);
padding: 15px 30px;
border-radius: 20px;
backdrop-filter: blur(5px);
white-space: nowrap;
z-index: 2;
}
@keyframes messageFade {
0% {
opacity: 0;
transform: translateY(20px) scale(0.8);
}
20% {
opacity: 1;
transform: translateY(0) scale(1);
}
80% {
opacity: 1;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(-20px) scale(0.8);
}
}
/* เอฟเฟกต์กลีบดอกไม้ลอย */
.petal {
position: absolute;
width: 15px;
height: 15px;
background: rgba(255, 192, 203, 0.6);
border-radius: 150% 0 150% 0;
animation: petalFall 6s ease-in infinite;
}
@keyframes petalFall {
0% {
transform: translateY(-20px) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="hearts-container" id="heartsContainer"></div>
<div class="slideshow-container" id="slideshowContainer">
<div class="slide">
<img src="./images/pexels-asadphoto-1024984.jpg" alt="Romantic moment 1">
</div>
<div class="slide">
<img src="./images/pexels-fmaderebner-340566.jpg" alt="Romantic moment 2">
</div>
<div class="slide">
<img src="./images/pexels-nurseryart-348520.jpg" alt="Romantic moment 3">
</div>
<div class="slide">
<img src="./images/pexels-pengwhan-1767434.jpg" alt="Romantic moment 4">
</div>
<div class="slide">
<img src="./images/pexels-pixabay-258421.jpg" alt="Romantic moment 5">
</div>
<div class="slide">
<img src="./images/pexels-pixabay-326612.jpg" alt="Romantic moment 6">
</div>
<div class="slide">
<img src="./images/pexels-visoesdomundo-2494701.jpg" alt="Romantic moment 7">
</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>
<audio id="bgMusic" loop>
<source src="./songs/One_My_Choose.mp3" type="audio/mpeg">
</audio>
<script>
/**
* Love messages array
*/
const loveMessages = [
"เธอคือเหตุผลที่ฉันอยากตื่นมาในทุกวัน 💖",
"รักเธอไม่ใช่แค่วันนี้ แต่ทุกวันตลอดไป 💑",
"แค่มีเธอ โลกของฉันก็น่าอยู่ขึ้น ✨",
"หัวใจฉันมีที่ว่างแค่สำหรับเธอ 💝",
"ทุกลมหายใจของฉัน มีชื่อเธอเสมอ 💫",
"ฉันไม่ต้องการอะไร นอกจากเธอ 💕",
"รักเธอหมดหัวใจ และจะรักตลอดไป ❤️",
"มือของฉัน มีไว้เพื่อกุมมือเธอ 🤝",
"เธอคือบ้านที่อบอุ่นที่สุดของฉัน 🏡",
"รักเธอมากกว่าที่คำพูดจะบรรยายได้ 💘"
];
/**
* Initialize variables
*/
const slides = document.querySelectorAll('.slide');
const audio = document.getElementById('bgMusic');
const audioBtn = document.getElementById('audioBtn');
let currentSlide = 0;
let isPlaying = false;
/**
* Set random position for slides
*/
function setRandomPositions() {
slides.forEach(slide => {
const randomX = Math.random() * (window.innerWidth - 800);
const randomY = Math.random() * (window.innerHeight - 600);
slide.style.left = `${randomX}px`;
slide.style.top = `${randomY}px`;
});
}
/**
* Create floating hearts effect
*/
/**
* Create floating love message
*/
function createLoveMessage() {
const message = document.createElement('div');
message.className = 'love-message';
message.textContent = loveMessages[Math.floor(Math.random() * loveMessages.length)];
// จำกัดพื้นที่การแสดงข้อความให้อยู่ในบริเวณ slideshow
const container = document.querySelector('.slideshow-container');
const rect = container.getBoundingClientRect();
const padding = 50; // ระยะห่างจากขอบ
const messageWidth = 300; // ประมาณความกว้างของข้อความ
const messageHeight = 100; // ประมาณความสูงของข้อความ
const randomX = rect.left + padding + Math.random() * (rect.width - messageWidth - padding * 2);
const randomY = rect.top + padding + Math.random() * (rect.height - messageHeight - padding * 2);
message.style.left = `${randomX}px`;
message.style.top = `${randomY}px`;
document.body.appendChild(message);
setTimeout(() => message.remove(), 4000);
}
function createHeart() {
const heart = document.createElement('div');
heart.className = 'heart';
heart.innerHTML = '❤';
heart.style.left = Math.random() * 100 + 'vw';
heart.style.animationDuration = (Math.random() * 3 + 3) + 's';
document.getElementById('heartsContainer').appendChild(heart);
setTimeout(() => heart.remove(), 4000);
}
/**
* Create floating petals effect
*/
function createPetal() {
const petal = document.createElement('div');
petal.className = 'petal';
petal.style.left = Math.random() * 100 + 'vw';
petal.style.animationDuration = (Math.random() * 3 + 3) + 's';
document.body.appendChild(petal);
setTimeout(() => petal.remove(), 6000);
}
/**
* Show next slide
*/
function nextSlide() {
slides[currentSlide].classList.remove('active');
currentSlide = (currentSlide + 1) % slides.length;
setRandomPositions();
slides[currentSlide].classList.add('active');
}
/**
* Show previous slide
*/
function prevSlide() {
slides[currentSlide].classList.remove('active');
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
setRandomPositions();
slides[currentSlide].classList.add('active');
}
/**
* Toggle background music
*/
function toggleAudio() {
if (isPlaying) {
audio.pause();
audioBtn.textContent = '🔇';
} else {
audio.play();
audioBtn.textContent = '🔊';
}
isPlaying = !isPlaying;
}
/**
* Initialize slideshow
*/
function initSlideshow() {
setRandomPositions();
slides[currentSlide].classList.add('active');
// Create floating effects
setInterval(createHeart, 300);
setInterval(createPetal, 500);
setInterval(createLoveMessage, 2000);
// Auto advance slides
setInterval(nextSlide, 5000);
}
// Start the slideshow
initSlideshow();
</script>
</body>
</html>