JSFiddle - React, Tailwind, and code Playground
HTML
<div class="stuck"><img src="http://wasterecords.com/zozo/1.svg"></div>
<div class="stuck-2"><img src="http://wasterecords.com/zozo/2.svg"></div>
<div class="stuck-3"><img src="http://wasterecords.com/zozo/3.svg"></div>
<div class="stuck-4"><img src="http://wasterecords.com/zozo/4.svg"></div>
<div class="stuck-5"><img src="http://wasterecords.com/zozo/5.svg"></div>
<div class="stuck-6"><img src="http://wasterecords.com/zozo/6.svg"></div>
<div class="stuck-7"><img src="http://wasterecords.com/zozo/7.svg"></div>
<div class="stuck-8"><img src="http://wasterecords.com/zozo/8.svg"></div>
<div class="stuck-9"><img src="http://wasterecords.com/zozo/9.svg"></div>
<div class="stuck-10"><img src="http://wasterecords.com/zozo/10.svg"></div>
<div class="stuck-11"><img src="http://wasterecords.com/zozo/11.svg"></div>
<div class="stuck-12"><img src="http://wasterecords.com/zozo/12.svg"></div>
CSS
.stuck,.stuck-2,.stuck-3,.stuck-4,.stuck-5,.stuck-5,.stuck-6,.stuck-7,.stuck-8,.stuck-9,.stuck-10,.stuck-11,.stuck-12,.stuck-13,.stuck-14,.stuck-15,.stuck-16,.stuck-17,.stuck-18,.stuck-19{
position : absolute;
}
JavaScript
$('.stuck,.stuck-2,.stuck-3,.stuck-4,.stuck-5,.stuck-5,.stuck-6,.stuck-7,.stuck-8,.stuck-9,.stuck-10,.stuck-11,.stuck-12,.stuck-13,.stuck-14,.stuck-15,.stuck-16,.stuck-17,.stuck-18,.stuck-19').css({
'margin-top': - $('.stuck').height() / 2,
'margin-left': - $('.stuck').width() / 2,
'width': $(window).width(),
'height': $(window).height(),
});
$( document ).ready(function() {
var mouseX = ($(window).width() - $('.stuck').width()) / 2, mouseY = ($(window).height() - $('.stuck').height()) / 2;
$(window).mousemove(function(e){
mouseX = Math.min(e.pageX);
mouseY = Math.min(e.pageY);
});
var follower = $(".stuck");
var xp = ($(window).width() - $('.stuck').width()) / 2,
yp = mouseY = ($(window).height() - $('.stuck').height()) / 2;
var loop = setInterval(function(){
// higher is slower
xp += (mouseX - xp) / 1;
yp += (mouseY - yp) / 1;
follower.css({left:xp, top:yp});
}, 30);
});
$( document ).ready(function() {
var mouseX = ($(window).width() - $('.stuck').width()) / 2, mouseY = ($(window).height() - $('.stuck').height()) / 2;
$(window).mousemove(function(e){
mouseX = Math.min(e.pageX);
mouseY = Math.min(e.pageY);
});
var follower = $(".stuck-2");
var xp = ($(window).width() - $('.stuck').width()) / 2, yp = mouseY = ($(window).height() - $('.stuck').height()) / 2;
var loop = setInterval(function(){
// higher is slower
xp += (mouseX - xp) / 2;
yp += (mouseY - yp) / 2;
follower.css({left:xp, top:yp});
}, 30);
});
$( document ).ready(function() {
var mouseX = ($(window).width() - $('.stuck').width()) / 2, mouseY = ($(window).height() - $('.stuck').height()) / 2;
$(window).mousemove(function(e){
mouseX = Math.min(e.pageX);
mouseY = Math.min(e.pageY);
});
var follower = $(".stuck-3");
var xp = ($(window).width() - $('.stuck').width()) / 2, yp = mouseY = ($(window).height() - $('.stuck').height()) / 2;
var loop = setInterval(function(){
// higher is slower
xp += (mouseX - xp) / 3;
...