JSFiddle - React, Tailwind, and code Playground

by timatey

HTML

<!DOCTYPE html>
<div id="a">
	<div id="b">
	</div>
</div>

CSS

html {
	min-height:100%;
	height:100%;
}
body {
	min-height:100%;
	height:100%;
}

#a	{
	width:100%;
	min-height:100%;
	background:#000;
	-moz-box-shadow:0 0 5px rgba(0,0,0,0.8);
	-webkit-box-shadow:0 0 5px rgba(0,0,0,0.8);
	box-shadow:0px 0px 5px rgba(0,0,0,0.8);
}


#b {
	position:absolute;
	left:0%;
	top:0;
	width:100%;
	min-height:100%;
	background:url(http://st7studio.ru/147/images/name.svg) no-repeat;
	background-size:cover;
	z-index:2;
}

JavaScript

$(document).ready(function(){var i=0;while(i<100){
$("#b").animate({backgroundPosition: "100% top"}, {duration:100000,specialEasing:{backgroundPosition:'linear'}});
$("#b").animate({opacity: 0}, 1000);
$("#b").animate({backgroundPosition: "0% top"}, {duration:1,specialEasing:{backgroundPosition:'linear'}});
$("#b").animate({opacity: 1}, 1000); i++}
$('.fade').list_ticker({speed:4000,effect:'fade'});	})