SM - Стильные решения для вашего сайта

Горизонтальный слайдер с CSS и JS анимацией при наведении

Sliiiide: Эффектный горизонтальный слайдер с интерактивной анимацией


Современные веб-интерфейсы становятся все более интерактивными, привлекая внимание пользователей динамическими эффектами. Горизонтальный слайдер, доступный по ссылке, демонстрирует, как можно добавить элемент интерактивности в ваш проект.

Этот слайдер выполнен с использованием CSS и jаvascript, что обеспечивает плавные и эффектные анимации. При наведении курсора на слайд он начинает двигаться влево или вправо, создавая впечатляющий визуальный эффект, который мгновенно приковывает внимание пользователя.

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">&#10094;</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">&#10095;</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-tilt
  VanillaTilt.init(document.querySelectorAll(".card"), {
    max: 15, // Grado máximo de inclinación
    speed: 600, // Velocidad del efecto
    glare: true, // Efecto de brillo
    "max-glare": 0.2, // Intensidad de brillo
  });
 
  // 2. Slider manual
  const 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 -> 2
  let 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 track
  function updateSlidePosition() {
    // Calculamos cuánta distancia mover (currentIndex * cardWidth)
    const offset = -(currentIndex * cardWidth);
    sliderTrack.style.transform = `translateX(${offset}px)`;
  }
 
  // EventListeners
  btnPrev.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
Нашли ошибку? Сообщите нам, мы исправим!
0 лайков 1 просмотров
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!

Сайт SATAMAX.RU