<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJ5hSkM1pGC5I_gTNx-Bmpyb0QrwWm-TwiARKclttVPrZrIKfr0bTHyP0afaIHL7zks-AbODA7zAf9LYhKdKVM6s2YXB8jkFl-fWBTmse2y6O68grQjw6tOOMrtdsG1qkVOwRT05R5XVZIoRoJFsn_wUqkrABJwEGZN0Q0OZlLZxis2zkhOH2u1RI_dNd/s518/colobus.jpg" alt="Valley" />
<p>The peaceful valley surrounded by towering mountains is the perfect escape into nature's serenity.</p>
</div>
<div class="card">
<h2>Island</h2>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi17AQbDsnhpPf0nxqd1lKg3xzFP59Ase7JkY1CI2LOSVPiigyeMsPIjGUbD2el3qmnvMSkyvqjzneVtS4bhbukcCKQfs4V8Yliz9H_1dRSk5OHqkT8QkGBYp3C7FRFg7nCT-U3NnZ_syFgHSkcbiBUzbi3j-NY4j0GVhUFdIikWBUuty92QAkoZrc8pV16/s518/eagle.jpg" alt="Island" />
<p>A tropical paradise island with turquoise waters and soft white sands invites relaxation.</p>
</div>
<div class="card">
<h2>Nature</h2>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJ5hSkM1pGC5I_gTNx-Bmpyb0QrwWm-TwiARKclttVPrZrIKfr0bTHyP0afaIHL7zks-AbODA7zAf9LYhKdKVM6s2YXB8jkFl-fWBTmse2y6O68grQjw6tOOMrtdsG1qkVOwRT05R5XVZIoRoJFsn_wUqkrABJwEGZN0Q0OZlLZxis2zkhOH2u1RI_dNd/s518/colobus.jpg" alt="Nature" />
<p>Lush greenery and colorful blooms make nature a vibrant tapestry of life and beauty.</p>
</div>
<div class="card">
<h2>Fuji</h2>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSwTZ_5LjFqnXDQx2Vy-_WhqThY3JcO3VMvhqpcpYiyLbFDkX6yCpT_9bXcDmIcJ7vAZQ5moGKwswFrxt5JZuibuORhS8b3w1Bdhgg7W4kxIPYvXjM0rcAnhSjjKhsSWhs8NpH5naNZJ0kdMjWCYKziIpdy_VbkaEyPJm-woV-1UQZm65jQha_vHYljO60/s518/ivanovic.jpg" alt="Mount Fuji" />
<p>The majestic Mount Fuji stands tall, an iconic symbol of Japan’s natural beauty.</p>
</div>
<div class="card">
<h2>Sunrise</h2>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht_TdgzR3iOmGCzVCGCrIFmdxCJlPbikcneeYhQbtuNdZsvOXWPjy6M7WiJXFalTWLzb_HlkVGFKd6d-lRECI5awOekrK5gPCrVE-ZPRXGZ6mF1Pc0DryeajLprb3MLcridAKqfX5kU10nb8NFTyHcnpX5txGLi64KkR3G9LhbW7LWBRJviAzecnln8G1Z/s518/elephant.jpg" alt="Sunrise" />
<p>Witness the golden hues of the sunrise as the world awakens to a new day.</p>
</div>
<div class="card">
<h2>Lake</h2>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSwTZ_5LjFqnXDQx2Vy-_WhqThY3JcO3VMvhqpcpYiyLbFDkX6yCpT_9bXcDmIcJ7vAZQ5moGKwswFrxt5JZuibuORhS8b3w1Bdhgg7W4kxIPYvXjM0rcAnhSjjKhsSWhs8NpH5naNZJ0kdMjWCYKziIpdy_VbkaEyPJm-woV-1UQZm65jQha_vHYljO60/s518/ivanovic.jpg" alt="Lake" />
<p>A tranquil lake reflects the beauty of the surrounding mountains and sky.</p>
</div>
<div class="card">
<h2>Flowers</h2>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRH6IeJ5NfIlH59mXW2AN4iXGNTQixObdPbxPt49lG9veiRnnbbLqXR3uTrxTUy_atSCDPlDsZijXWPD7cLkMmaXU-Gm74t6mbaZSS5VPfs5vnxi6MwZgI8kstYveBmjZkWLFa5dkmEDLUyO-2MrfemyxiUCLOAJ92-vjJFOIphgonxLYgRBaB5KxDnK6/s518/lion.jpg" alt="Flowers" />
<p>Delicate blossoms sway in the breeze, painting the landscape in vibrant colors.</p>
</div>
<div class="card">
<h2>Snow</h2>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAp_5UOnwG08ciFaMVPVebxAEmLQvwwqkHF-Ks7EYqe5yeIfiLM5tjL2by_TPztgRxb_u09PSxUeJfwp2ESTK7h1LeWD9FJt_3_fwKIpZloU341Vjp6FiI49-82eKeizkeGnz4e6B-ZgYnS7SxKXF60nqFeh7o71DNYrVpRXHFM3pfvoknxyn7zgvYRhLC/s518/lizard.jpg" alt="Snow" />
<p>Fresh snow blankets the ground, turning the landscape into a winter wonderland.</p>
</div>
<div class="card">
<h2>Sunset</h2>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfcRlWMXJAYstGEw6LQAJ6WdK2xdXs5veW4tLxETzua0tqpxODsqZXExvIXl3gVQMnAb2sVL84_WBM9mGv_u6WYyUtt4B7N82iiy6KceAwel9y4mYxq2Dw9Fi0XnatN16HEPVXOaTPn7Z2ISVQNdFmiaeM3fZNK8QZKXEEn9XOmSCmv1SB3OHDZFTX6vmK/s518/squid.jpg" alt="Sunset" />
<p>The sky ignites with fiery oranges and pinks as the sun sets on the horizon.</p>
</div>
<div class="card">
<h2>Autumn</h2>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTFcXC6j7DCkF1OpZ2164ssUR9mEoE-ztRhIkdlQ_rWCvaA8o_DhSU0jhZn0PzUnY29URtAtbtRIeet8rc7JjyPX5TXA6-FotUbK_L5GLlwOqRPjzXMGHxd6ItXnFMlNBlJKwFaJ64bRNC1vjcxqemnRTE3dlosGAu2lPSiECGwsZRrzYygG9umO-C1VDt/s871/cat_insert.jpg" alt="Autumn" />
<p>Autumn leaves, dressed in shades of red and gold, blanket the forest floor.</p>
</div>
<div class="card">
<h2>Stars</h2>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJ5hSkM1pGC5I_gTNx-Bmpyb0QrwWm-TwiARKclttVPrZrIKfr0bTHyP0afaIHL7zks-AbODA7zAf9LYhKdKVM6s2YXB8jkFl-fWBTmse2y6O68grQjw6tOOMrtdsG1qkVOwRT05R5XVZIoRoJFsn_wUqkrABJwEGZN0Q0OZlLZxis2zkhOH2u1RI_dNd/s518/colobus.jpg" alt="Stars" />
<p>Under a starry night, the vastness of the universe becomes clear in the midnight sky.</p>
</div>
<div class="card">
<h2>Van</h2>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi17AQbDsnhpPf0nxqd1lKg3xzFP59Ase7JkY1CI2LOSVPiigyeMsPIjGUbD2el3qmnvMSkyvqjzneVtS4bhbukcCKQfs4V8Yliz9H_1dRSk5OHqkT8QkGBYp3C7FRFg7nCT-U3NnZ_syFgHSkcbiBUzbi3j-NY4j0GVhUFdIikWBUuty92QAkoZrc8pV16/s518/eagle.jpg" alt="Van" />
<p>A classic van parked by the beach, ready for an adventure-filled road trip.</p>
</div>
<div class="card">
<h2>Cat</h2>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSwTZ_5LjFqnXDQx2Vy-_WhqThY3JcO3VMvhqpcpYiyLbFDkX6yCpT_9bXcDmIcJ7vAZQ5moGKwswFrxt5JZuibuORhS8b3w1Bdhgg7W4kxIPYvXjM0rcAnhSjjKhsSWhs8NpH5naNZJ0kdMjWCYKziIpdy_VbkaEyPJm-woV-1UQZm65jQha_vHYljO60/s518/ivanovic.jpg" alt="Cat" />
<p>A curious cat explores its surroundings, moving with grace and elegance.</p>
</div>
<div class="card">
<h2>Lavender</h2>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht_TdgzR3iOmGCzVCGCrIFmdxCJlPbikcneeYhQbtuNdZsvOXWPjy6M7WiJXFalTWLzb_HlkVGFKd6d-lRECI5awOekrK5gPCrVE-ZPRXGZ6mF1Pc0DryeajLprb3MLcridAKqfX5kU10nb8NFTyHcnpX5txGLi64KkR3G9LhbW7LWBRJviAzecnln8G1Z/s518/elephant.jpg" alt="Lavender" />
<p>Fields of lavender sway gently in the breeze, filling the air with their calming scent.</p>
</div>
</div>
</section>
</body>
@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;
padding: 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 0 1rem 0;
line-height: 1.2;
white-space: normal;
overflow-wrap: break-word;
text-overflow: ellipsis;
}
p {
font-size: 14px;
margin: 0.5rem 0;
overflow-wrap: break-word;
}
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 {
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;
animation-timeline: view();
animation-range: entry 10% entry 80%;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.card h2, .card p {
margin-bottom: 0.5rem;
}
.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: 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%;
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);
}
}
