Animações orientadas por rolagem

1351 Andev.web

Abrir no Editor Publique Seu Código

Recomendado

2 June 2025

Um Código por alejandrokundrah

30 December 2024

Um Código por Meriem

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="progress-bar"></div>
<section>
  <h1>Scroll-driven Animations
  </h1>
  <div class="card-container">
    <div class="card">
      <h2>Valley</h2>
      <img src="https://images.unsplash.com/photo-1479030160180-b1860951d696?q=80&w=3072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="img" />
      <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum at erat cursus quis; scelerisque feugiat.</p>
    </div>
    <div class="card">
      <h2>Island</h2>
      <img src="https://images.unsplash.com/photo-1543348750-466b55f32f16?q=80&w=3474&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="img" />
      <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum at erat cursus quis; scelerisque feugiat.</p>
    </div>
    <div class="card">
      <h2>Nature</h2>
      <img src="https://images.unsplash.com/photo-1448518340475-e3c680e9b4be?q=80&w=3200&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="img" />
      <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum at erat cursus quis; scelerisque feugiat.</p>
    </div>
    <div class="card">
      <h2>Fuji</h2>
      <img src="https://images.unsplash.com/photo-1490806843957-31f4c9a91c65?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="img" />
      <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum at erat cursus quis; scelerisque feugiat.</p>
    </div>

<div class="card">
      <h2>Sunrise</h2>
      <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?q=80&w=3506&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="img" />
      <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum at erat cursus quis; scelerisque feugiat.</p>
    </div>
    <div class="card">
      <h2>Lake</h2>
      <img src="https://plus.unsplash.com/premium_photo-1673697239981-389164b7b87f?q=80&w=3488&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="img" />
      <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum at erat cursus quis; scelerisque feugiat.</p>
    </div>
    <div class="card">
      <h2>Flowers</h2>
      <img src="https://images.unsplash.com/photo-1490750967868-88aa4486c946?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="img" />
      <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum at erat cursus quis; scelerisque feugiat.</p>
    </div>
    <div class="card">
      <h2>Snow</h2>
      <img src="https://images.unsplash.com/photo-1518873890627-d4b177c06e51?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="img" />
      <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum at erat cursus quis; scelerisque feugiat.</p>
    </div>
    <div class="card">
      <h2>Sunset</h2>
      <img src="https://images.unsplash.com/photo-1559666126-84f389727b9a?q=80&w=3554&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="img" />
      <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum at erat cursus quis; scelerisque feugiat.</p>
    </div>
    <div class="card">
      <h2>Autumn</h2>
      <img src="https://images.unsplash.com/photo-1507100403890-47482dcd79e0?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="img" />
      <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum at erat cursus quis; scelerisque feugiat.</p>
    </div>
    <div class="card">
      <h2>Stars</h2>
      <img src="https://plus.unsplash.com/premium_photo-1672070779458-cb842bdadca7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODV8fHN0YXJyeSUyMG5pZ2h0fGVufDB8MHwwfHx8MA%3D%3D" alt="img" />
      <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum at erat cursus quis; scelerisque feugiat.</p>
    </div>
    <div class="card">
      <h2>Van</h2>
      <img src="https://images.unsplash.com/photo-1521499420147-36d5bfc2781f?q=80&w=1510&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="img" />
      <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum at erat cursus quis; scelerisque feugiat.</p>
    </div>
    <div class="card">
      <h2>Cat</h2>
      <img src="https://images.unsplash.com/photo-1573182023541-128787b11ba5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fGNhdCUyMG5hdHVyZXxlbnwwfDB8MHx8fDA%3D" alt="img" />
      <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum at erat cursus quis; scelerisque feugiat.</p>
    </div>
    <div class="card">
      <h2>Lavender</h2>
      <img src="https://images.unsplash.com/photo-1515612402715-96a358304c50?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzR8fGxhdmVuZGVyfGVufDB8MHwwfHx8MA%3D%3D" alt="img" />
      <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum at erat cursus quis; scelerisque feugiat.</p>
    </div>
  </div>
</section>  
</body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  width: 100%;
  margin: 0;
}

body {
  color: #001c35;
  background-color: #e3eafc;
  font-family: "Poppins", sans-serif;
}

h1 {
  font-size: 32px;
  font-style: italic;
  margin-bottom: 3rem;
}

h2 {
  font-size: 20px;
  margin: 0;
}

p {
  font-size: 14px;
  margin: 0.5rem 0;
}

section {
  width: 100%;
  max-width: 800px;
  padding: 4rem 1rem;
  margin: 0 auto;
}

section img {
  width: 100%;
  max-width: 520px;
  height: 100%;
  max-height: 200px;
  object-fit: cover;
  margin: 1rem 0;
  display: block;
  border-radius: 8px;
  transform-origin: center;
}

.card-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media screen and (max-width: 580px) {
  .card-container {
    grid-template-columns: 1fr;
  }
}

@keyframes scaleProgress {
  from {
    transform: scalex(0);
  }
  to {
    transform: scalex(100%);
  }
}
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.5rem;
  width: 100%;
  height: 1rem;
  z-index: 1;
  background: #feac5e;
  background: -webkit-linear-gradient(to right, #4bc0c8, #c779d0, #feac5e);
  background: linear-gradient(to right, #4bc0c8, #c779d0, #feac5e);
  transform-origin: 0 50%;
  /* scroll animation*/
  animation: scaleProgress auto linear;
  animation-timeline: scroll(root);
}

@keyframes fade-in {
  from {
    opacity: 0.3;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.card {
  width: 100%;
  max-width: 520px;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  animation: fade-in linear both;
  /* view function */
  animation-timeline: view();
  animation-range: entry 10% entry 80%;
}

Animações orientadas por rolagem

Recomendado

Um Código por alejandrokundrah

Um código por cleancloud199

Um Código por Meriem

HTML

CSS

JS

Recomendado

Um Código por alejandrokundrah

Um código por cleancloud199

Um Código por Meriem

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS