JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<div id='wrapper'>
<div id='kris1' class='krises'></div>
<div id='kris2' class='krises'></div>
<div id='kris3' class='krises'></div>

</div>

CSS

body {
}

#wrapper {
	background: url(http://alpaca.org.ua/image/chizz.png) 50% 50% no-repeat fixed;
	position: relative;
	margin: 0 auto;
	width: 600px;
	height: 600px;
}

.krises {
	width: 200px;
 	height: 200px;
 	position: absolute;
}

#kris1 {
	background: url(http://alpaca.org.ua/image/krisa.png) 50% 50% no-repeat;
	right: 30px;
	bottom: 30px;
}

#kris2 {
	background: url(http://alpaca.org.ua/image/krisa.png) 50% 50% no-repeat;
	left: 70px;
	top: 40px;

	-webkit-transform: rotate(165deg);
	transform: rotate(165deg);
}

#kris3 {
	background: url(http://alpaca.org.ua/image/krisa.png) 50% 50% no-repeat;
	right: 50px;
	top: 50px;
	-webkit-transform: rotate(250deg);
	transform: rotate(250deg);
}

JavaScript

$(document).ready(function(){
      //$(window).scroll(function() {
      	var int = setInterval(function() {

      		if ($('#kris2').offset().top > 500) {
      			clearInterval(int);
      			$('#wrapper').animate({opacity: '.1'});
      		}

        	$('#kris1').offset({top: $('#kris1').offset().top - 2});
        	$('#kris1').offset({left: $('#kris1').offset().left - 2});

        	$('#kris2').offset({top: $('#kris2').offset().top + 2});
        	$('#kris2').offset({left: $('#kris2').offset().left + 2});

        	$('#kris3').offset({top: $('#kris3').offset().top + 2});
        	$('#kris3').offset({left: $('#kris3').offset().left - 2});
}, 20);
//}); // window scroll Ends

});