Animations pilotées par défilement

1838 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

30 March 2025

Un code par youssefdahroug2005

6 December 2024

Un code par dynamicarray606

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 ytr3d3

Un code par youssefdahroug2005

Un code par dynamicarray606

HTML

CSS

JS

Recommandé

Un code par ytr3d3

Un code par youssefdahroug2005

Un code par dynamicarray606

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS