Control deslizante horizontal puro con menú deslizante

1724 Andev.web

Abrir en el editor Publica tu código

Control deslizante horizontal puro con menú deslizante

Recomendado

19 November 2025

Plantilla de panel de administración HTML con CSS y gráficos

7 March 2025

Animación de órbita infinita con trigonometría CSS

9 September 2024

Campo de contraseña animado

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

Plantilla de panel de administración HTML con CSS y gráficos

Animación de órbita infinita con trigonometría CSS

Campo de contraseña animado

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS