Sliiiide: Эффектный горизонтальный слайдер с интерактивной анимацией
See the Pen Sliiiide: Desafiando la Interfaz con Animaciones CSS & JS by Andrés Tobio (@andrewuru) on CodePen.
HTML
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>CodePen Challenge - Tilt & Slide Mejorado</title><!-- VanillaTilt.js (CDN) --><script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.7.2/dist/vanilla-tilt.min.js"></script><link rel="stylesheet" href="styles.css" /></head><body><div class="slider-container"><!-- Botón "Prev" --><button class="nav-btn" id="btnPrev">❮</button><!-- Contenedor de las tarjetas --><div class="slider-track" id="sliderTrack"><!-- Tarjeta 1 --><div class="card" data-tilt data-tilt-max="15" data-tilt-speed="600"><img src="https://picsum.photos/400/250?random=1" alt="Imagen 1" /><h2>Card 1</h2><p>Esta es la tarjeta número 1 con un Tilt controlado por VanillaTilt.js.</p></div><!-- Tarjeta 2 --><div class="card" data-tilt data-tilt-max="15" data-tilt-speed="600"><img src="https://picsum.photos/400/250?random=2" alt="Imagen 2" /><h2>Card 2</h2><p>Puedes hacer clic en los botones para deslizar a la siguiente tarjeta.</p></div><!-- Tarjeta 3 --><div class="card" data-tilt data-tilt-max="15" data-tilt-speed="600"><img src="https://picsum.photos/400/250?random=3" alt="Imagen 3" /><h2>Card 3</h2><p>¡Cada tarjeta tiene un poco de "tilt" y se ve genial!</p></div></div><!-- Botón "Next" --><button class="nav-btn" id="btnNext">❯</button></div><script src="script.js"></script></body>
CSS
/* -----------------------RESET Y ESTILOS BÁSICOS------------------------ */* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: sans-serif;min-height: 100vh;display: flex;justify-content: center;align-items: center;background: linear-gradient(135deg, #f3ec78, #af4261);}/* -----------------------SLIDER CONTAINER------------------------ */.slider-container {position: relative;width: 80%;max-width: 1200px;margin: auto;overflow: hidden; /* Oculta el contenido que se sale de la caja */}/* -----------------------SLIDER TRACK------------------------ */.slider-track {display: flex;transition: transform 0.4s ease;}/* -----------------------CARD------------------------ */.card {min-width: 300px;margin: 0 1rem; /* espacio lateral entre tarjetas */background: #fff;border-radius: 10px;box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);overflow: hidden;flex-shrink: 0;padding: 1rem;text-align: center;/* La propiedad transform la maneja VanillaTilt.js */}/* Imagen dentro de la tarjeta */.card img {width: 100%;border-radius: 5px;margin-bottom: 1rem;}/* -----------------------NAV BUTTONS (Prev, Next)------------------------ */.nav-btn {position: absolute;top: 50%;transform: translateY(-50%);font-size: 2rem;border: none;background: rgba(255, 255, 255, 0.3);color: #444;cursor: pointer;padding: 0.5rem 1rem;border-radius: 50%;z-index: 10;transition: background 0.3s;}/* Hover en botones */.nav-btn:hover {background: rgba(255, 255, 255, 0.7);}/* Botón de posición */#btnPrev {left: 10px;}#btnNext {right: 10px;}/* Ajustamos el responsive si quieres (opcional) */@media (max-width: 768px) {.card {min-width: 250px;}}
JS
// Esperamos a que el DOM cargue (opcional, pero recomendado)document.addEventListener("DOMContentLoaded", () => {// 1. Inicializamos VanillaTilt a todas las tarjetas con data-tiltVanillaTilt.init(document.querySelectorAll(".card"), {max: 15, // Grado máximo de inclinaciónspeed: 600, // Velocidad del efectoglare: true, // Efecto de brillo"max-glare": 0.2, // Intensidad de brillo});// 2. Slider manualconst btnPrev = document.getElementById("btnPrev");const btnNext = document.getElementById("btnNext");const sliderTrack = document.getElementById("sliderTrack");// Mantendremos un índice para “pasar” las tarjetas.// Ejemplo: si hay 3 tarjetas, index = 0 -> 1 -> 2let currentIndex = 0;const cardCount = document.querySelectorAll(".card").length;// Ancho aproximado de cada card (sumado con márgenes). Ajusta según tu layout.const cardWidth = 350;// Función para actualizar la posición del trackfunction updateSlidePosition() {// Calculamos cuánta distancia mover (currentIndex * cardWidth)const offset = -(currentIndex * cardWidth);sliderTrack.style.transform = `translateX(${offset}px)`;}// EventListenersbtnPrev.addEventListener("click", () => {if (currentIndex > 0) {currentIndex--;updateSlidePosition();}});btnNext.addEventListener("click", () => {if (currentIndex < cardCount - 1) {currentIndex++;updateSlidePosition();}});});
sliiiide-desafiando-la-interfaz-con-animaciones-css-js.zip
0
13.49 Kb
Нашли ошибку? Сообщите нам, мы исправим!
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!