Animations pilotées par défilement

2,825 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

24 May 2025

Un code par testingai

24 May 2024

Animations de cartes

30 March 2025

Un code par ytr3d3

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%;
}