JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<div id="image_scroll">
    <div class="image_scroll_1" id="example4">
        <div class="image_scroll_2">
            <div class="image_scroll_3">
                <img src="http://990days.co.uk/images/profile_images/laura_fermin/1.jpg" />
                <img src="http://990days.co.uk/images/profile_images/laura_fermin/2.jpg" />
                <img src="http://990days.co.uk/images/profile_images/laura_fermin/3.jpg" />
                <img src="http://990days.co.uk/images/profile_images/laura_fermin/4.jpg" />
            </div>
        </div>
    </div>
</div>

CSS

html, body {
	margin: 0;
	padding: 0;
}
#image_scroll {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -200;
}
.image_scroll_1 {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	left: 0;
}
.image_scroll_2 {
	position: absolute;
	left: 0;
	top: 0;
}
.image_scroll_3 {
	text-align: center;
}
.image_scroll_3 img {
	width: 70%;
	display: inline-block;
	margin: 0;
}

JavaScript

// [http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/]
window.requestAnimFrame=(function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(callback){window.setTimeout(callback,1000/60);};})();
var main=null;
var imageScroll2=null;
var imageScroll3=null;
var totalHeight=null;
var initY=null;
var destY=null;
var currY=null;
var increment=null;
var direction=null;
var UP=null;
var DOWN=null;
var isPlaying=null;
function init(){
	main=document.getElementById('example4');
	imageScroll2=main.getElementsByClassName('image_scroll_2')[0];
	imageScroll3=main.getElementsByClassName('image_scroll_3')[0];
	totalHeight=imageScroll3.clientHeight;
	UP='upwards';
	DOWN='downwards';
	isPlaying=true;
	direction=UP;
	increment=10;
	if(direction===DOWN){
		initY= -totalHeight;
		destY=0;
	}else{
		initY=0;
		destY= -totalHeight;
	}
	currY=initY;
	imageScroll2.appendChild(imageScroll3.cloneNode(true));
	if(imageScroll2.addEventListener){
		imageScroll2.addEventListener('mouseover',function(){isPlaying=false;},false);
		imageScroll2.addEventListener('mouseout',function(){isPlaying=true;},false);
	}else{
		imageScroll2.attachEvent('onmouseover',function(){isPlaying=false;});
		imageScroll2.attachEvent('onmouseout',function(){isPlaying=true;});
	}
	requestAnimFrame(render);
}
function render(){
	if(isPlaying){
		imageScroll2.style.transform='translate(0px,'+currY+'px)';
		if(direction===DOWN){
			currY+=increment;
			if(currY>=destY){currY=initY;}
		}else{
			currY-=increment;
			if(currY<=destY){currY=initY;}
		}
	}
	requestAnimFrame(render);
}
//
init();