HTML5 Canvas Slideshow
In this tutorial we are making a HTML5 Slideshow (canvas) with own animated transitioning effect. The main idea – drawing images with higher contrast in the ends of transitions.
Here are our demo and downloadable package:
Live Demo
download in package
Ok, download the source files and lets start coding !
Step 1. HTML
This is markup of our result slideshow page. Here it is.
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Slideshow | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/pixastic.custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<header>
<h2>HTML5 Canvas Slideshow</h2>
<a href="http://www.script-tutorials.com/html5-canvas-slideshow/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div class="container">
<div class="slides">
<img src="images/pic1.jpg" />
<img src="images/pic2.jpg" />
<img src="images/pic3.jpg" />
<img src="images/pic4.jpg" />
<img src="images/pic5.jpg" />
<img src="images/pic6.jpg" />
<img src="images/pic7.jpg" />
</div>
<canvas id="slideshow" width="900" height="300"></canvas>
</div>
</body>
</html>
Step 2. CSS
Here are all stylesheets
css/main.css
/* page layout styles */
*{
margin:0;
padding:0;
}
body {
background-color:#eee;
color:#fff;
font:14px/1.3 Arial,sans-serif;
}
header {
background-color:#212121;
box-shadow: 0 -1px 2px #111111;
display:block;
height:70px;
position:relative;
width:100%;
z-index:100;
}
header h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:540px;
}
header a.stuts,a.stuts:visited{
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
}
header .stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
.container {
color: #000;
margin: 20px auto;
position: relative;
width: 900px;
}
#slideshow {
border:1px #000 solid;
box-shadow:4px 6px 6px #444444;
display:block;
margin:0 auto;
height:300px;
width:900px;
}
.container .slides {
display:none;
}
Step 3. JS
js/pixastic.custom.js
Pixastic – JavaScript Image Processing Library. I have used it to change brightness and contrast of our canvas. You can download this library here. Or, you can find this library in our package too.
js/script.js
var canvas, ctx;
var aImages = [];
var iCurSlide = 0;
var iCnt = 0;
var iSmTimer = 0;
var iContr = 0;
var iEfIter = 50;
$(function(){
// creating canvas objects
canvas = document.getElementById('slideshow');
ctx = canvas.getContext('2d');
// collect all images
$('.slides').children().each(function(i){
var oImg = new Image();
oImg.src = this.src;
aImages.push(oImg);
});
// draw first image
ctx.drawImage(aImages[iCurSlide], 0, 0);
var iTimer = setInterval(changeSlideTimer, 5000); // set inner timer
});
function changeSlideTimer() {
iCurSlide++;
if (iCurSlide == $(aImages).length) {
iCurSlide = 0;
}
clearInterval(iSmTimer);
iSmTimer = setInterval(drawSwEffect, 40); // extra one timer
}
// draw switching effect
function drawSwEffect() {
iCnt++;
if (iCnt <= iEfIter / 2) {
iContr += 0.004;
// change brightness and contrast
Pixastic.process(canvas, 'brightness',
{
'brightness': 2,
'contrast': 0.0 + iContr,
'leaveDOM': true
},
function(img) {
ctx.drawImage(img, 0, 0);
}
);
}
if (iCnt > iEfIter / 2) {
// change brightness
Pixastic.process(canvas, 'brightness',
{
'brightness': -2,
'contrast': 0,
'leaveDOM': true
},
function(img) {
ctx.drawImage(img, 0, 0);
}
);
}
if (iCnt == iEfIter / 2) { // switch actual image
iContr = 0;
ctx.drawImage(aImages[iCurSlide], 0, 0);
Pixastic.process(canvas, 'brightness',
{
'brightness': iEfIter,
'contrast': 0,
'leaveDOM': true
},
function(img) {
ctx.drawImage(img, 0, 0);
}
);
} else if (iCnt == iEfIter) { // end of cycle, clear extra sub timer
clearInterval(iSmTimer);
iCnt = 0;
iContr = 0;
}
}
As you can see – main functionality is easy. I have defined main timer (which will change images), and one inner time, which will use to change brightness and contrast of our canvas.
Live Demo
download in package
Conclusion
Hope that today’s html5 slideshow lesson was interesting for you as always. We have made another one nice html5 example. I will be glad to see your thanks and comments. Good luck!
Related Articles
HTML5 3D Cube Slideshow
HTML5 Canvas 3D Sphere
HTML5 Canvas Twirl Sphere
thanks for the tutorial just a quick question, is it tablet friendly.
Hi Donald,
I hope that yes, but I haven’t tested it there.
Great tutorial. When we first load demo it takes few seconds for the first image to be displayed. Is there a way to correct it?
Hi Sush,
For the first slide it should take 5 seconds delay:
var iTimer = setInterval(changeSlideTimer, 5000);
I want to add thumbnails to this slider, how i can do this in js file?
Hi sajid,
Do you want to add thumb-based switcher of slides somewhere in the top? If so, Firstly, you have to prepare thumbnail images for it (as example 32×32 icons). Then you will need to put them into layout into a new (DIV). Something like that:
<div class="nav">__thumbnail_images__</div>
after – you have to prepare CSS styles for this panel. And only after – you can start making own custom JS code to switch images by click event by these thumbs.
It can be significant changes for a single comment answer
I downloaded the package, and when I went to open it up, it never got past the first image. I tried the live demo and worked without problem. Any thoughts?
Hello Dillon,
Did you run it at your localhost? And, can you see any JS errors in console of Firebug?
I am a beginner to HTML, CSS and JAVASCRIPT. I was able to understand the code easily. I am gonna use it in my future projects.