HTML5 CSS3 Scrolling Slideshow | HTML 5 & CSS 3 - Smooth Scrolling

Smooth scrolling slideshow using pure CSS3 code

In this article, I'm going to demo how to implement image slideshow using

1. CSS2 and Javascript
2. CSS3

And for CSS3 approach, I'll show how to implement

1. Scrolling up
2. Scrolling up and down

If you move the mouse over and out the slideshow, it will be paused and resumed accordingly.
Keypoints in the demo includes:

• setInterval and clearInterval
• transform and translateY
• calc
• animation including animation-play-state

To simplify the example, all the images here are standard AD sidebar images (300px * 250px).

1. CSS2 + Javascript

Demo

Sponsors

• 
• 
• 

CSS

<style type='text/css'>
 	#ad_container {
		margin-bottom: 10px;
		padding: 0;
		height: 304px;
		width: 304px;
		border: 2px solid rgb(111, 126, 255);
		box-shadow: 2px 2px 10px rgb(111, 126, 255);
		border-radius: 15px 15px 0 0;
		overflow: hidden;
	}
	#ad_title {
		margin: 0;
		padding: 0;
		height: 50px;
		line-height: 50px;
		font-size: 24px;
		color: white;
		text-align: center;
		background: rgb(111, 126, 255); 
	}
	#ad_content {
		margin: 5px auto;
		padding: 0;
		height: 250px;
		width: 300px;
		overflow: hidden;
	}

	#ad_content1, #ad_content2 {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
</style>

HTML

<div id='ad_container'>
		<div id='ad_title'>Sponsors</div>
		<div id='ad_content'>
			<ul id='ad_content1'>
			<!-- MYADS CJ Disney -->
				<li><a href='http://www.kqzyfj.com/click-7744766-11138523' target='_top'>
	<img alt='' border='0' height='250' src='http://www.tqlkg.com/image-7744766-11138523' width='300'/></a></li>
			<!-- MYADS CJ Web Hosting -->
				<li><a href='http://www.anrdoezrs.net/click-7744766-11793715' target='_top'>
	<img alt='' border='0' height='250' src='http://www.awltovhc.com/image-7744766-11793715' width='300'/></a></li>
			<!-- MYADS CJ Hotel -->
				<li><a href='http://www.jdoqocy.com/click-7744766-10691018' target='_top'> <img alt='Hotels.com' border='0' height='250' src='http://www.tqlkg.com/image-7744766-10691018' width='300'/></a></li>
			</ul>
			<ul id='ad_content2'/>
		</div>
</div>

Javascript

<script>
	var ad_content = document.getElementById('ad_content');
	ad_content.scrollTop = 0;

	var ad_content1 = document.getElementById('ad_content1');
	var ad_content2 = document.getElementById('ad_content2');
	ad_content2.innerHTML = ad_content1.innerHTML;

	function scrollUp() {

		if (ad_content.scrollTop >= ad_content1.offsetHeight)
		{
			ad_content.scrollTop = '5px';
		}
		else
		{
			ad_content.scrollTop ++;
		}
	}
	
	var speed = 30;
	var myScroll = setInterval('scrollUp()', speed);
	
	ad_content.onmouseover = function(){
		clearInterval(myScroll);
	}
	ad_content.onmouseout = function(){
		myScroll = setInterval("scrollUp()", speed);
	}
</script>

To make it a smoothing sliding, we need to clone the content of ad_content1 to ad_content2, this is achieved by ad_content2.innerHTML = ad_content1.innerHTML in the Javascript.

2. CSS3

Demo

Sponsors

• 
• 
• 
•