JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='filler'>
  life sounds amazing
</div>
<div class='headphones'>
  <div class='img'>
  
  </div>
</div>
<div class='filler'>
  other text
</div>

CSS

.filler {
  padding: 50px 0;
}

.headphones {
  height: 3000px;
}

.img {
  width: 300px;
  height: 300px;
  position: sticky;
  position: -webkit-sticky;
  top: calc(100% - 550px);
  left: calc(50% - 150px);
  border-radius: 10px;
  border: 3px solid #444;
  background-image: url(https://res.cloudinary.com/politixentral/image/upload/v1571536841/test/anime-1.png);
}

JavaScript

const images = [
	'https://res.cloudinary.com/politixentral/image/upload/v1571536841/test/anime-1.png',
  'https://res.cloudinary.com/politixentral/image/upload/v1571536840/test/anime-2.png',
  'https://res.cloudinary.com/politixentral/image/upload/v1571536840/test/anime-3.png',
  'https://res.cloudinary.com/politixentral/image/upload/v1571536840/test/anime-4.png',
  'https://res.cloudinary.com/politixentral/image/upload/v1571536840/test/anime-5.png',
  'https://res.cloudinary.com/politixentral/image/upload/v1571536840/test/anime-6.png',
  'https://res.cloudinary.com/politixentral/image/upload/v1571536840/test/anime-7.png',
  'https://res.cloudinary.com/politixentral/image/upload/v1571536840/test/anime-8.png',
  'https://res.cloudinary.com/politixentral/image/upload/v1571536840/test/anime-9.png',
  'https://res.cloudinary.com/politixentral/image/upload/v1571536840/test/anime-10.png',
];


$(function() {
	const img = $('.img');
	$(window).on('scroll', function(e) {
  	console.log('scrolling');
    const top = $(this).scrollTop();
    let image;
    if (top < 200) image = images[0];
    else if (top >= 200 && top < 400) image = images[1];
    else if (top >= 400 && top < 600) image = images[2];
    else if (top >= 600 && top < 800) image = images[3];
    else if (top >= 800 && top < 1000) image = images[4];
    else if (top >= 1000 && top < 1200) image = images[5];
    else if (top >= 1200 && top < 1400) image = images[6];
    else if (top >= 1400 && top < 1600) image = images[7];
    else if (top >= 1600 && top < 1800) image = images[8];
    else if (top >= 1800) image = images[9];
    
    $(img).css({ 'background-image': 'url(' + image + ')'});
  });
})