Control deslizante horizontal puro con menú deslizante

2027 Andev.web

Abrir en el editor Video Publica tu código

Control deslizante horizontal puro con menú deslizante

Recomendado

23 August 2025

Estructura HTML del contenedor de animación CSS

25 November 2025

Cargador de juegos HTML5 con SDK de Yandex Games

15 January 2026

Conceptos básicos de Baldi remasterizados: Cargador de juegos WebGL

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="profile-card">
  <h1>Castle</h1>
  <div class="wrapper">
    <div class="outer">
      <div class="card" style="--delay:-1;">
        <div class="content">
          <div class="img">
            <img src="https://images.unsplash.com/photo-1652466102358-7fc44c47bb94?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Neuschwanstein Castle">
          </div>
        </div>
      </div>
      <div class="card" style="--delay:0;">
        <div class="content">
          <div class="img">
            <img src="https://images.unsplash.com/photo-1556621595-6dd9502e265e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80" alt="Neuschwanstein Castle">
          </div>
        </div>
      </div>
      <div class="card" style="--delay:1;">
        <div class="content">
          <div class="img">
            <img src="https://images.unsplash.com/photo-1580677616212-2fa929e9c2cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1032&q=80" alt="Neuschwanstein Castle">
          </div>
        </div>
      </div>
      <div class="card" style="--delay:2;">
        <div class="content">
          <div class="img">
            <img src="https://images.unsplash.com/photo-1605887123413-2275edbe6dfd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80" alt="Neuschwanstein Castle">
          </div>
        </div>

</div>
      <div class="card" style="--delay:2;">
        <div class="content">
          <div class="img">
            <img src="https://images.unsplash.com/photo-1599587997303-86d4294c5df7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80" alt="Neuschwanstein Castle">
          </div>
        </div>
      </div>
    </div>
  </div>
  <button class="menu-btn">
    <i class="fas fa-bars"></i>
  </button>
  <h2>Popular</h2>
  <div class="popular">
    <img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Lakes">

<div class="content">
      <h3>Lakes</h3>
      <ul>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
      </ul>
      <p>Lakes are Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, dolorum...</p>
    </div>
  </div>
  <div class="popular">
    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Mountains">

<div class="content">
      <h3>Mountains</h3>
      <ul>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
      </ul>
      <p>Mountains are Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, dolorum...</p>
    </div>
  </div>
  <div class="more">
    <h2>Neuschwanstein</h2>
    <div class="tags">
      <span class="tag">
        castle
      </span>
      <span class="tag">germany</span>
    </div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus alias velit a incidunt, placeat accusantium deleniti sapiente amet laborum sit nihil maiores, nisi quaerat sunt nulla harum! Laboriosam fuga, modi, nisi velit sint unde ducimus dolor sit totam praesentium libero. Sequi aperiam doloribus rem deserunt alias vel. Corrupti at excepturi inventore veniam ullam accusantium laborum est nulla voluptatibus voluptates similique voluptatem eaque autem hic aliquam.</p>
    <ul class="icons">
      <li><a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z" />
          </svg>
        </a></li>
      <li><a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
          </svg>
        </a>
      </li>
      <li>
        <a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 01.778-.332 48.294 48.294 0 005.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
          </svg>
        </a>
      </li>
    </ul>
  </div>
</div>

  <script  src="./script.js"></script>

</body>
</html>

CSS

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

body {
  background: #f0f0f0;
  font-family: sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-card {
  position: relative;
  width: 18em;
  background: #fff;
  box-shadow: 0 0 5em rgba(0, 0, 0, 0.2);
  padding: 2em 1em;
  overflow: hidden;
  border-radius: 0.7em;
}
.profile-card .profile-img {
  position: absolute;
  top: 5em;
  left: 50%;
  transform: translatex(-50%);
  width: 11em;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 1rem;
  z-index: 1;
  transition: 0.5s ease-in-out;
}
.profile-card h1 {
  font-size: 1.5rem;
}
.profile-card p {
  margin: 0.2em 0;
  color: #b8b8b8;
}
.profile-card h2 {
  margin-top: 16em;
  margin-bottom: 0.8em;
  font-size: 1.2rem;
}
.profile-card .popular + .popular {
  margin-top: 1em;
}
.profile-card .popular {
  position: relative;
  cursor: pointer;
  z-index: 0;
}
.profile-card .popular:before {
  position: absolute;
  content: "";
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 0.6rem;
}
.profile-card .popular img {
  width: 100%;
  position: relative;
  height: 4rem;
  object-fit: cover;
  border-radius: 0.6rem;
  display: block;
  top: 0;
  transition: 0.5s ease-in-out;
}
.profile-card .popular .content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.profile-card .popular .content h3 {
  font-size: 0.9rem;
  color: #fff;
  text-align: center;
}
.profile-card .popular .content p {
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.4;
  height: 0;
  overflow: hidden;
  -moz-animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
  -o-animation-delay: 3.5s;
  animation-delay: 3.5s;
  margin-top: 0;
}
.profile-card .popular .content ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}
.profile-card .popular .content ul li i {
  color: #d9d9d9;
  font-size: 0.565rem;
}
.profile-card .menu-btn {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  position: absolute;
  top: 1.6em;
  right: 1em;
  z-index: 556;
}
.profile-card .more {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 0;
  z-index: 555;
  overflow: hidden;
  color: #fff;
  padding: 0 1.5em;
  transition: 0.5s ease-in;
  background: rgba(0, 0, 0, 0.8);
}
.profile-card .more .tags {
  display: flex;
  align-items: center;
  gap: 0.625em;
  flex-wrap: wrap;
}
.profile-card .more .tags .tag {
  background: #5e5e5e;
  padding: 0.3125em 0.625em;
  border-radius: 0.3125em;
  font-size: 0.8rem;
  text-transform: capitalize;
}
.profile-card .more h2 {
  margin: 1em 0 0.5em;
}
.profile-card .more p {
  margin: 1.5em 0;
  color: #d6d6d6;
  line-height: 1.4;
}
.profile-card .more .icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1em;
}
.profile-card .more .icons svg {
  width: 1.125rem;
  color: #fff;
}

.profile-card ::-webkit-scrollbar {
  width: 8px;
}

.profile-card ::-webkit-scrollbar-track {
  background: #1e1e1e;
}

.profile-card ::-webkit-scrollbar-thumb {
  background: #fff;
}

.profile-card ::-webkit-scrollbar-thumb:hover {
  background: #bcbcbc;
}

.popular.opened img {
  height: 12rem;
}
.popular.opened .content p {
  height: auto;
  margin-top: 10px;
}

.menu-btn.opened {
  color: #fff;
  background: #111;
  padding: 0.2em 0.4em;
}

.overlay.opened {
  height: 100%;
}

.more.opened {
  padding: 4em 1.5em 1.5em 1.5em;
  height: 100%;
  overflow-y: scroll;
}

.wrapper .card.opened {
  animation-play-state: paused;
}

.wrapper .outer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .card {
  background: #fff;
  width: 140px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  justify-content: space-between;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
  animation: animate 15s linear infinite;
  animation-delay: calc(3s * var(--delay));
}
.wrapper .card:last-child {
  animation-delay: calc(-3s * var(--delay));
}
.wrapper .card a {
  text-decoration: none;
  padding: 7px 18px;
  border-radius: 25px;
  color: #fff;
  background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
  transition: all 0.3s ease;
}
.wrapper .card a:hover {
  transform: scale(0.94);
}
.wrapper .card .img {
  height: 16em;
  width: 11em;
  position: absolute;
  top: 1.5em;
  right: 5em;
  border-radius: 1.2em;
  box-shadow: 2px 4px 18px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.wrapper .card .img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.outer:hover .card {
  animation-play-state: paused;
}

@keyframes animate {
  0% {
    opacity: 0;
    transform: translateX(100%) scale(0.5);
  }
  5%, 20% {
    opacity: 0.4;
    transform: translateX(100%) scale(0.7);
    pointer-events: none;
  }
  25%, 40% {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0%) scale(1);
  }
  45%, 60% {
    opacity: 0.4;
    transform: translateX(-100%) scale(0.7);
    pointer-events: none;
  }
  65%, 100% {
    opacity: 0;
    transform: translateX(-100%) scale(0.5);
  }
}

Recomendado

Estructura HTML del contenedor de animación CSS

Cargador de juegos HTML5 con SDK de Yandex Games

Conceptos básicos de Baldi remasterizados: Cargador de juegos WebGL

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS