Animações orientadas por rolagem

2016 Andev.web

Abrir no Editor Video Publique Seu Código

Recomendado

10 December 2024

Um código por testingai

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 agilecloud61

Um código por ytr3d3

Um código por testingai

HTML

CSS

JS

Recomendado

Um código por agilecloud61

Um código por ytr3d3

Um código por testingai

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS