Controle deslizante horizontal puro com menu deslizante

2024 Andev.web

Abrir no Editor Video Publique Seu Código

Controle deslizante horizontal puro com menu deslizante

Recomendado

7 January 2026

Modelo HTML para E-commerce: Site de Compras com Tailwind

31 January 2026

Carregador WebGL Tattletail Unity com barra de progresso

28 November 2024

Menu 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

Modelo HTML para E-commerce: Site de Compras com Tailwind

Carregador WebGL Tattletail Unity com barra de progresso

Menu animado

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS