Webleb - Extraits de Code - Soirée Parallax en Cappadoce HTML/CSS

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kapadokya'da Büyülü Akşam</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

html, body {
            height: 100%;
            font-family: 'Arial', sans-serif;
            scroll-behavior: smooth;
        }

.parallax-container {
            perspective: 1px;
            height: 100vh;
            overflow-x: hidden;
            overflow-y: auto;
            position: relative;
        }

.parallax-bg {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            transform: translateZ(-1px) scale(2);
            background: linear-gradient(
                to bottom, 
                #1c1c3b 0%, 
                #4a4a7a 30%, 
                #8b4513 70%, 
                #ff4500 100%
            );
            z-index: -1;
        }

.stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            animation: twinkle 3s infinite alternate;
        }

.star {
            position: absolute;
            background-color: white;
            border-radius: 50%;
        }

@keyframes twinkle {
            0% { opacity: 0.4; }
            100% { opacity: 1; }
        }

.cappadocia-silhouette {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23292929" fill-opacity="1" d="M0,288L48,272C96,256,192,224,288,197.3C384,171,480,149,576,160C672,171,768,213,864,229.3C960,245,1056,235,1152,208C1248,181,1344,139,1392,117.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
            background-size: cover;
            z-index: 2;
        }

.content {
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: white;
            text-align: center;
            padding: 0 20px;
        }

.hot-air-balloon {
            position: absolute;
            top: 20%;
            left: 10%;
            width: 100px;
            height: 150px;
            background: linear-gradient(to bottom, #ff6347, #ff4500);
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            transform: rotate(-15deg);
            animation: float 4s ease-in-out infinite alternate;
        }

@keyframes float {
            0% { transform: translateY(0) rotate(-15deg); }
            100% { transform: translateY(-30px) rotate(-15deg); }
        }

h1 {
            font-size: 4rem;
            margin-bottom: 20px;
            text-shadow: 0 0 20px rgba(255,255,255,0.5);
        }

.subtitle {
            font-size: 1.5rem;
            max-width: 800px;
            margin-bottom: 30px;
            opacity: 0.9;
        }

.cta-buttons {
            display: flex;
            gap: 20px;
        }

.btn {
            text-decoration: none;
            padding: 12px 30px;
            border-radius: 5px;
            transition: all 0.3s ease;
            color: white;
            border: 2px solid white;
        }

.btn:hover {
            background-color: rgba(255,255,255,0.2);
            transform: scale(1.05);
        }

@media (max-width: 768px) {
            h1 {
                font-size: 2.5rem;
            }
            .subtitle {
                font-size: 1.2rem;
            }
            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }
        }
    </style>
</head>
<body>
    <div class="parallax-container">
        <div class="parallax-bg">
            <div class="stars" id="starContainer"></div>
        </div>
        <div class="hot-air-balloon"></div>
        <div class="cappadocia-silhouette"></div>
        <div class="content">
            <h1>Kapadokya'da Büyülü Akşam</h1>
            <p class="subtitle">Güneşin son ışıklarıyla yükselen peri bacaları, sonsuz gökyüzü ve unutulmaz bir manzara sizi bekliyor...</p>
            <div class="cta-buttons">
                <a href="#" class="btn">Keşfet</a>
                <a href="#" class="btn">Tur Ayarla</a>
            </div>
        </div>
    </div>

for (let i = 0; i < starCount; i++) {
                const star = document.createElement('div');
                star.classList.add('star');
                
                star.style.width = ${Math.random() * 3}px;
                star.style.height = star.style.width;
                star.style.left = ${Math.random() * 100}%;
                star.style.top = ${Math.random() * 100}%;
                star.style.opacity = Math.random();

starContainer.appendChild(star);
            }
        }

createStars();
    </script>
</body>
</html>

Soirée Parallax en Cappadoce HTML/CSS

Recommandé

Extrait d'animation de chargement CSS

loign bien chido

Jeu du serpent

HTML

CSS

JS

Recommandé

Extrait d'animation de chargement CSS

loign bien chido

Jeu du serpent

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS