Carrusel de tarjetas de león 3D HTML CSS y JavaScript

Abrir en el editor Publica tu código

Recomendado

6 November 2024

Control deslizante de recorrido rotatorio

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Aslan Temalı Kart Kaydırıcı</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Lato:wght@400;700&display=swap" rel="stylesheet">

* {
            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>

Carrusel de tarjetas de león 3D HTML CSS y JavaScript

Recomendado

Efecto de texto 3D

Botón de escape

Control deslizante de recorrido rotatorio

HTML

CSS

JS

Recomendado

Efecto de texto 3D

Botón de escape

Control deslizante de recorrido rotatorio

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS