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é

formes magiques en croissance

Page de destination pour une entreprise de vélos

calculatrice scientifique

HTML

CSS

JS

Recommandé

formes magiques en croissance

Page de destination pour une entreprise de vélos

calculatrice scientifique

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS