Master Frontend to Backend https://bit.ly/frontend-to-backend-ebook —————— Revolutionize projects with our advanced …
source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Animation | Javascript</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>Scroll Down</section>
<div class="container">
<img src="img1.jpg" alt="" class="item">
<img src="img2.jpg" alt="" class="item">
<img src="img3.jpg" alt="" class="item">
<img src="img4.jpg" alt="" class="item">
<img src="img5.jpg" alt="" class="item">
<img src="img6.jpg" alt="" class="item">
<img src="img7.jpg" alt="" class="item">
<img src="img8.jpg" alt="" class="item">
</div>
<section>Scroll Up</section>
<script>
let options = {
root: null,
threshold: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
}
let callback = (entries, observer) => {
entries.forEach((entry) => {
entry.target.style.scale = entry.intersectionRatio;
});
};
let observer = new IntersectionObserver(callback, options);
for (const target of document.querySelectorAll('.item')) {
observer.observe(target);
}
</script>
</body>
</html>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
background: #111;
}
section
{
display: flex;
justify-content: center;
align-items: center;
color: #fff;
min-height: 100vh;
font-size: 6em;
}
.container
{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 50px;
}
.container .item
{
transition: 0.5s;
}
