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é

Illusion de défilement infini

recrutement des forces spéciales

Basculement des émoticônes

HTML

CSS

JS

Recommandé

Illusion de défilement infini

recrutement des forces spéciales

Basculement des émoticônes

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS