Animations pilotées par défilement

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Recommandé

8 February 2025

Un code par adwq

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

Animations pilotées par défilement

Recommandé

Un code par bachir123

Un code par ytr3d3

Un code par adwq

HTML

CSS

JS

Recommandé

Un code par bachir123

Un code par ytr3d3

Un code par adwq

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS