<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script><script src="./script.js"></script>
<script>
jQuery('<div>', {class: 'img-wrapper',}).appendTo('.t-body');
jQuery('<div>', {class: 'img-placeholder',}).appendTo('.img-wrapper');
jQuery('<img>', {class: 'img-inside',}).appendTo('.img-placeholder');
$(".img-inside").attr('src', 'https://static.tildacdn.com/tild6137-6338-4364-b564-383635323030/simone-hutsch-xlGKy9.jpg');
$('.uc-img-wrapper a').addClass('img-hover-effect-link');
</script>
<script>
$('.uc-img-wrapper .link-image-1 a').addClass('imageblock-1 hover-img');
$('.uc-img-wrapper .link-image-2 a').addClass('imageblock-2 hover-img');
$('.uc-img-wrapper .link-image-3 a').addClass('imageblock-3 hover-img');
$('.uc-img-wrapper .link-image-4 a').addClass('imageblock-4 hover-img');
$('.uc-img-wrapper .link-image-5 a').addClass('imageblock-5 hover-img');
$('.uc-img-wrapper .link-image-6 a').addClass('imageblock-6 hover-img');
$('.uc-img-wrapper .link-image-7 a').addClass('imageblock-7 hover-img');
$('.uc-img-wrapper .link-image-8 a').addClass('imageblock-8 hover-img');
$('.uc-img-wrapper .link-image-9 a').addClass('imageblock-9 hover-img');
$('.uc-img-wrapper .link-image-10 a').addClass('imageblock-10 hover-img');
$('.uc-img-wrapper .link-image-11 a').addClass('imageblock-11 hover-img');
$('.uc-img-wrapper .link-image-12 a').addClass('imageblock-12 hover-img');
$('.uc-img-wrapper .link-image-13 a').addClass('imageblock-13 hover-img');
$('.uc-img-wrapper .link-image-14 a').addClass('imageblock-14 hover-img');
$('.uc-img-wrapper .link-image-15 a').addClass('imageblock-15 hover-img');
$('.uc-img-wrapper .link-image-16 a').addClass('imageblock-16 hover-img');
$('.uc-img-wrapper .link-image-17 a').addClass('imageblock-17 hover-img');
$('.uc-img-wrapper .link-image-18 a').addClass('imageblock-18 hover-img');
$('.uc-img-wrapper .link-image-19 a').addClass('imageblock-19 hover-img');
$('.uc-img-wrapper .link-image-20 a').addClass('imageblock-20 hover-img');
</script>
<script>
let imgHoverLink = gsap.utils.toArray(".hover-img");
let imgWrap = document.querySelector('.img-wrapper');
let imgItem = document.querySelector('.img-placeholder img');
function moveImg(e){
let mouseX = e.clientX;
let mouseY = e.clientY;
let tl = gsap.timeline();
tl.to(imgWrap,{
duration: 1,
x: mouseX,
y: mouseY,
ease: Expo.ease
})
}
function linkHover(e){
if (e.type == "mouseenter"){
let imgSrc = e.target.dataset.src;
let tl = gsap.timeline();
tl.set(imgItem, {
attr: { src : imgSrc}
}).to(imgWrap, {
autoAlpha: 1,
scale: 1,
})
}
if (e.type == "mouseleave"){
let tl = gsap.timeline();
tl.to(imgWrap, {
autoAlpha: 0,
scale: 0,
})
}
}
function initAnimation(){
imgHoverLink.forEach((link)=> {
link.addEventListener('mouseenter', linkHover);
link.addEventListener('mouseleave', linkHover);
link.addEventListener('mousemove', moveImg);
})
}
function init(){
initAnimation();
}
window.addEventListener("load", () => {
init();
})
</script>
<style>
.img-wrapper {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
width: var(--ImageWidth);
height: var(--ImageHeight);
border-radius: var(--BorderRadius);
overflow: hidden;
pointer-events: none;
z-index: var(--ImageIndex);
visibility: hidden;
transform: scale(0);
margin-right: -50%;
transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
transform: translate(-50%, -50%);
}
.hover-img {
display: block;
-webkit-text-stroke: var(--TextStroke);
}
.hover-img:hover {
transition-duration: 0.7s;
color: var(--LinkHover) !important;
-webkit-text-stroke: var(--TextStrokeHover);
}
.img-placeholder, .img-placeholder img {
height: 100%;
width: 100%;
}
.img-placeholder img {
object-fit: cover;
display: block;
}
</style>