3D Lion Card Carousel HTML CSS & JavaScript

1,399 Metehan

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Lato', sans-serif;
            background-color: var(--background-color);
            color: var(--text-dark);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden; /* Sayfa kaydırmasını engeller */
        }

/* * ANA İÇERİK ALANI
         * Tüm kaydırıcıyı ve başlıkları kapsar.
         */
        .container {
            width: 90%;
            max-width: 1200px;
            margin: auto;
            text-align: center;
            padding: 2rem 0;
        }

.container h1 {
            font-family: 'Poppins', sans-serif;
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--secondary-color);
            margin-bottom: 0.5rem;
        }

.container p {
            font-size: 1.1rem;
            color: #666;
            margin-bottom: 3rem;
        }

/* * 3D KART KAYDIRICI STİLLERİ
         * Kartların 3D düzenini ve animasyonlarını kontrol eder.
         */
        .carousel-wrapper {
            width: 320px; /* Tek bir kartın genişliği */
            height: 450px; /* Tek bir kartın yüksekliği */
            margin: 50px auto;
            perspective: 1000px; /* 3D derinlik perspektifi */
            position: relative; /* Navigasyon butonları için */
        }

.card-carousel {
            position: absolute;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d; /* Çocuk elemanların 3D dönüşümlerini korur */
            transition: transform 0.6s ease-in-out; /* Carousel dönüşümü için yumuşak geçiş */
            transform: rotateY(0deg); /* Başlangıç dönüşü */
        }

.card-carousel-item {
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            border-radius: 16px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            backface-visibility: hidden; /* Arka yüzeyin görünümünü engeller */
            transition: transform 0.6s ease, opacity 0.6s ease, filter 0.6s ease;
            cursor: pointer; /* Tıklanabilir olduğunu gösterir */
            opacity: 0.7; /* Pasif kartların opaklığı */
            transform: scale(0.9); /* Pasif kartların boyutu */
            filter: brightness(0.7); /* Pasif kartların parlaklığı */
        }

/* Aktif kartın stilleri */
        .card-carousel-item.active {
            opacity: 1;
            transform: scale(1);
            filter: brightness(1);
        }

/* * SLAYT İÇERİĞİ
         * Her bir slaytın içindeki metin ve buton alanı.
         */
        .slide-content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 2rem;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
            color: var(--text-light);
            transform: translateY(100%); /* Başlangıçta gizli */
            transition: transform 0.4s ease-out, opacity 0.4s ease-out;
            opacity: 0;
        }

/* Aktif slaytın içeriğini görünür yap */
        .card-carousel-item.active .slide-content {
            transform: translateY(0);
            opacity: 1;
        }

.slide-content h2 {
            font-family: 'Poppins', sans-serif;
            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

.slide-content p {
            font-size: 0.9rem;
            line-height: 1.5;
            margin-bottom: 1.5rem;
        }

.slide-content a {
            font-family: 'Poppins', sans-serif;
            text-decoration: none;
            color: var(--text-dark);
            background-color: var(--primary-color);
            padding: 0.75rem 1.5rem;
            border-radius: 50px;
            font-weight: 600;
            transition: background-color 0.3s ease, transform 0.3s ease;
            display: inline-block;
        }

.slide-content a:hover {
            background-color: #e4c55d; /* Altın sarısının daha açık tonu */
            transform: translateY(-3px);
        }

/* * SLAYT ARKA PLAN GÖRSELLERİ
         * Her slayt için farklı ve yüksek kaliteli görseller.
         */
        .slide-1 { background-image: url('https://images.unsplash.com/photo-1548802673-380ab8ebc7b7?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); }
        .slide-2 { background-image: url('https://images.unsplash.com/photo-1614027164847-1b28acc15a4b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); }
        .slide-3 { background-image: url('https://images.unsplash.com/photo-1593369457934-03257c78484a?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); }
        .slide-4 { background-image: url('https://images.unsplash.com/photo-1516467508483-a7212febe628?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); }
        .slide-5 { background-image: url('https://images.unsplash.com/photo-1555215695-3004980ad54e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); }

/* * NAVİGASYON BUTONLARI */
        .carousel-navigation {
            margin-top: 3rem;
            display: flex;
            justify-content: center;
            gap: 1.5rem;
        }

.carousel-navigation button {
            font-family: 'Poppins', sans-serif;
            background-color: var(--secondary-color);
            color: var(--text-light);
            padding: 0.8rem 1.8rem;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
            transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            outline: none;
        }

.carousel-navigation button:hover {
            background-color: #8B4513; /* Koyu kahvenin daha koyu tonu */
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
        }

.carousel-navigation button:active {
            transform: translateY(0);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>

<div class="container">
        <h1>Vahşi Doğanın Kralları</h1>
        <p>Savanların görkemli hükümdarlarının dünyasına bir yolculuk.</p>

<div class="carousel-wrapper">
            <div class="card-carousel" id="cardCarousel">
                
                <div class="card-carousel-item slide-1" data-index="0">
                    <div class="slide-content">
                        <h2>Savanın Gözcüsü</h2>
                        <p>Yüksek otların arasında, avını ve ailesini kollayan dişi aslanın keskin bakışları.</p>
                        <a href="#">Daha Fazla</a>
                    </div>
                </div>
                
                <div class="card-carousel-item slide-2" data-index="1">
                    <div class="slide-content">
                        <h2>Görkemli Yele</h2>
                        <p>Erkek aslanın gücünü ve statüsünü simgeleyen yelesi, doğanın en etkileyici tasarımlarından biridir.</p>
                        <a href="#">Daha Fazla</a>
                    </div>
                </div>
                
                <div class="card-carousel-item slide-3" data-index="2">
                    <div class="slide-content">
                        <h2>Masumiyet Anı</h2>
                        <p>Geleceğin kralları olan sevimli yavrular, annelerinin koruması altında dünyayı keşfediyor.</p>
                        <a href="#">Daha Fazla</a>
                    </div>
                </div>
                
                <div class="card-carousel-item slide-4" data-index="3">
                    <div class="slide-content">
                        <h2>Alacakaranlıkta Kükreme</h2>
                        <p>Güneş batarken savanada yankılanan kükreme, aslanın egemenliğinin ilanıdır.</p>
                        <a href="#">Daha Fazla</a>
                    </div>
                </div>
                
                <div class="card-carousel-item slide-5" data-index="4">
                    <div class="slide-content">
                        <h2>Aile Bağı</h2>
                        <p>Aslan sürüleri, karmaşık sosyal ilişkiler ve güçlü aile bağları üzerine kuruludur.</p>
                        <a href="#">Daha Fazla</a>
                    </div>
                </div>
            </div>
        </div>

<div class="carousel-navigation">
            <button id="prevBtn">Önceki</button>
            <button id="nextBtn">Sonraki</button>
        </div>
    </div>

const numCards = carouselItems.length;
            const anglePerCard = 360 / numCards; // Her kart arasındaki açı
            const cardWidth = 320; // Kart genişliği (CSS'ten alınabilir)
            
            // Kartların yerleşeceği çemberin yarıçapını hesaplama
            // Bu, kartların birbirini kesmeyeceği ve güzel bir 3D görünüm vereceği bir yarıçaptır.
            const radius = Math.round((cardWidth / 2) / Math.tan(Math.PI / numCards));

let currentRotation = 0; // Carousel'ın mevcut dönüş açısı
            let activeIndex = 0; // Aktif kartın indeksi

/**
             * Tüm kartları 3D uzayda başlangıç konumlarına yerleştirir.
             * Her kart kendi dönüş açısı ve yarıçapı ile konumlandırılır.
             */
            function initializeCardPositions() {
                carouselItems.forEach((item, index) => {
                    item.style.transform = `rotateY(${index * anglePerCard}deg) translateZ(${radius}px)`;
                });
            }

/**
             * Carousel'ın dönüşünü ve aktif kartı günceller.
             * `.card-carousel` elementine `rotateY` dönüşünü uygular
             * ve aktif karta `.active` sınıfını ekler.
             */
            function updateCarousel() {
                cardCarousel.style.transform = `rotateY(${currentRotation}deg)`;
                
                // Aktif kartı belirle
                // currentRotation, eksi yönde döndüğü için pozitif hale getirilir
                // ve 360'ın katlarına ayarlanır
                let normalizedRotation = (currentRotation % 360 + 360) % 360; 
                activeIndex = Math.round(normalizedRotation / anglePerCard);
                activeIndex = (numCards - activeIndex) % numCards; // Doğru indeksi bulmak için tersine çevir

carouselItems.forEach((item, index) => {
                    item.classList.remove('active');
                });
                carouselItems[activeIndex].classList.add('active');
            }

/**
             * Sonraki karta geçişi sağlar.
             */
            function showNextCard() {
                currentRotation -= anglePerCard;
                updateCarousel();
            }

/**
             * Önceki karta geçişi sağlar.
             */
            function showPrevCard() {
                currentRotation += anglePerCard;
                updateCarousel();
            }

// Carousel'ı başlat ve ilk kartı aktif yap
            initializeCardPositions();
            updateCarousel(); // Başlangıçta aktif kartı ayarla (genellikle ilk kart)

// Buton tıklama olaylarını dinle
            nextBtn.addEventListener('click', showNextCard);
            prevBtn.addEventListener('click', showPrevCard);

// Kart tıklama olaylarını dinle (kartlar tıklandığında sonraki karta geçiş yapsın)
            carouselItems.forEach(item => {
                item.addEventListener('click', () => {
                    // Eğer tıklanan kart aktif değilse, o kartı öne getir
                    // Aksi takdirde (aktif kart tıklanırsa), bir sonraki karta geç
                    const clickedIndex = parseInt(item.dataset.index);
                    if (clickedIndex !== activeIndex) {
                        // Tıklanan kartı aktif hale getirmek için gerekli dönüşü hesapla
                        let targetRotation = -clickedIndex * anglePerCard;
                        currentRotation = targetRotation; // Mevcut dönüşü hedef dönüşe ayarla
                        updateCarousel();
                    } else {
                        // Aktif kart tıklanırsa, bir sonraki karta geç
                        showNextCard();
                    }
                });
            });

// Klavye ok tuşlarıyla kontrol ekle
            document.addEventListener('keydown', (e) => {
                if (e.key === 'ArrowRight') {
                    showNextCard();
                } else if (e.key === 'ArrowLeft') {
                    showPrevCard();
                }
            });
        };
    </script>

</body>
</html>

CSS

3D Lion Card Carousel HTML CSS & JavaScript

Recommended