Эффект следа из изображений

 
<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
<script src='https://www.matilda-design.ru/library/trail-img.js'></script>

<!--Эффект следа из изображений
https://mt-webdesign.ru/trail-image-hover-->
<main><div class="content">
<img class="content__img" src="https://static.tildacdn.com/tild6132-6633-4864-b539-336531333165/Frame_6.jpg" alt="Some image" />
<img class="content__img" src="https://static.tildacdn.com/tild3466-3564-4337-b964-643938383863/Frame_5.jpg" alt="Some image" />
<img class="content__img" src="https://static.tildacdn.com/tild3562-3035-4965-b236-653537333964/Frame_4.jpg" alt="Some image" />
<img class="content__img" src="https://static.tildacdn.com/tild3634-6262-4034-b666-303636353234/Frame_3.jpg" alt="Some image" />
<img class="content__img" src="https://static.tildacdn.com/tild6538-3565-4039-b262-353265613233/Frame_2.jpg" alt="Some image" />
<img class="content__img" src="https://static.tildacdn.com/tild3464-3537-4562-b061-636464383934/Frame_1.jpg" alt="Some image" />
<img class="content__img" src="https://static.tildacdn.com/tild6132-6633-4864-b539-336531333165/Frame_6.jpg" alt="Some image" />
</div></main>

<style>
:root {
--ImgWidthTrail: 250px; /*размер изображения*/
}
@media screen and (max-width: 768px) /*минимальное разрешение для запуска*/ {
main {
display: none;
}
}
.content {
height: 100vh;
width: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
isolation: isolate;
}
.content__img {
width: var(--ImgWidthTrail);
position: absolute;
top: 0;
left: 0;
opacity: 0;
transform: translateY(0%);
.content__img--full {
width: 100%;
height: 100%;
background-size: cover;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
const screenWidth = window.innerWidth;
if (screenWidth > 768) {
const body = document.body;
const MathUtils = {
lerp: (a, b, n) => (1 - n) * a + n * b,
distance: (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1)
};
let winsize;
const calcWinsize = () => winsize = { width: window.innerWidth, height: window.innerHeight };
calcWinsize();
window.addEventListener('resize', calcWinsize);
const getMousePos = (ev) => {
let posx = 0;
let posy = 0;
if (!ev) ev = window.event;
if (ev.pageX || ev.pageY) {
posx = ev.pageX;
posy = ev.pageY - window.pageYOffset;
} else if (ev.clientX || ev.clientY) {
posx = ev.clientX + body.scrollLeft + docEl.scrollLeft;
posy = ev.clientY + body.scrollTop + docEl.scrollTop;
}
return { x: posx, y: posy };
};
let mousePos = lastMousePos = cacheMousePos = { x: 0, y: 0 };
window.addEventListener('load', () => {
document.querySelector('.uc-trail-img').addEventListener('mousemove', ev => mousePos = getMousePos(ev));
});
const getMouseDistance = () => MathUtils.distance(mousePos.x, mousePos.y, lastMousePos.x, lastMousePos.y);
class Image {
constructor(el) {
this.DOM = { el: el };
this.defaultStyle = {
x: 0,
y: 0,
opacity: 0
};
this.getRect();
this.initEvents();
}
initEvents() {
window.addEventListener('resize', () => this.resize());
}
resize() {
gsap.set(this.DOM.el, this.defaultStyle);
this.getRect();
}
getRect() {
this.rect = this.DOM.el.getBoundingClientRect();
}
isActive() {
return gsap.isTweening(this.DOM.el) || this.DOM.el.style.opacity != 0;
}
}
class ImageTrail {
constructor() {
this.DOM = { content: document.querySelector('.content') };
this.images = [];
[...this.DOM.content.querySelectorAll('img')].forEach(img => this.images.push(new Image(img)));
this.imagesTotal = this.images.length;
this.imgPosition = 0;
this.zIndexVal = 1;
this.threshold = 150;
requestAnimationFrame(() => this.render());
}
render() {
let distance = getMouseDistance();
cacheMousePos.x = MathUtils.lerp(cacheMousePos.x || mousePos.x, mousePos.x, 0.1);
cacheMousePos.y = MathUtils.lerp(cacheMousePos.y || mousePos.y, mousePos.y, 0.1);
if (distance > this.threshold) {
this.showNextImage();
++this.zIndexVal;
this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0;
lastMousePos = mousePos;
}
let isIdle = true;
for (let img of this.images) {
if (img.isActive()) {
isIdle = false;
break;
}
}
if (isIdle && this.zIndexVal !== 1) {
this.zIndexVal = 1;
}
requestAnimationFrame(() => this.render());
}
showNextImage() {
const img = this.images[this.imgPosition];
gsap.killTweensOf(img.DOM.el);
gsap.timeline()
.set(img.DOM.el, {
startAt: { opacity: 0 },
opacity: 1,
zIndex: this.zIndexVal,
x: cacheMousePos.x - img.rect.width / 2,
y: cacheMousePos.y - img.rect.height / 2
}, 0)
.to(img.DOM.el, {
duration: 3.6,
ease: 'expo.out',
x: mousePos.x - img.rect.width / 2,
y: mousePos.y - img.rect.height / 2
}, 0)
.to(img.DOM.el, {
duration: 1,
ease: 'power1.out',
opacity: 0
}, 0.9)
.to(img.DOM.el, {
duration: 1,
ease: 'quint.inOut',
y: `+=${winsize.height + img.rect.height / 2}`
}, 0.9);
}
}
const preloadImages = () => {
return new Promise((resolve, reject) => {
imagesLoaded(document.querySelectorAll('.content__img'), resolve);
});
};
preloadImages().then(() => {
document.body.classList.remove('loading');
new ImageTrail();
});
}
});
</script>