Inspiration taken from: here
Inspiration taken from: here
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
<style>
body {
margin: 0;
padding: 0;
}
.image-popup-area {
width: 100%;
height: 100vh;
background: pink;
position: relative;
}
.image-popup {
position: absolute;
transform: scale(0);
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<article class="container"><p>Inspiration taken from: <a href="https://ranlus.fr/">here</a></p></article>
<article class="container"><h1>Offset</h1></article>
<div class="image-popup-area">
<div class="image-popup"><img src="https://picsum.photos/id/200/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/201/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/202/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/203/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/204/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/206/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/207/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/208/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
<div class="image-popup"><img src="https://picsum.photos/id/209/300/200" width="300" height="200"/></div>
</div>
<article class="container"><h1>Offset</h1></article>
</body>
</html>
<script>
const images = [];
document.querySelectorAll('.image-popup').forEach((image, i) => {
const timeline = gsap.timeline();
images.push({
image,
animate: (x, y, prevX, prevY) => {
if (!timeline.isActive()) {
timeline.timeScale(1);
timeline.set(image, { x: prevX, y: prevY, duration: 0 });
timeline.to(image, {x, y, scale: 1 });
timeline.to(image, {scale: 0, delay: 1});
} else {
timeline.progress(1)
}
}
})
})
let i = 1;
let x = 0;
let y = 0
let prevX = 0;
let prevY = 0
document.querySelector('.image-popup-area').addEventListener("mousemove", e => {
x = e.clientX - 150;
y = e.clientY - 100;
});
let start;
var last = 0; // timestamp of the last render() call
const offsetSize = 80;
function step(now) {
if(!last || ((Math.abs(Math.abs(y) - Math.abs(prevY)) >= offsetSize) || Math.abs(Math.abs(x) - Math.abs(prevX)) >= offsetSize)) {
console.log('wchodzi');
i++;
last = now;
const imageIndexToPush = i % images.length
images[imageIndexToPush].animate(x, y, prevX, prevY);
prevX = x;
prevY = y;
}
requestAnimationFrame(step);
}
requestAnimationFrame(step);
</script>