Script Tutorials

HTML5 Canvas Slideshow

—

by

admin
in

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

[sociallocker]

download in package

[/sociallocker]

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

01 <!DOCTYPE html>
02 <html lang="en" >
03     <head>
04         <meta charset="utf-8" />
05         <title>HTML5 Canvas Slideshow | Script Tutorials</title>
06         <link href="css/main.css" rel="stylesheet" type="text/css" />
07         <script src="http://code.jquery.com/jquery-latest.min.js"></script>
08         <script src="js/pixastic.custom.js"></script>
09         <script src="js/script.js"></script>
10     </head>
11     <body>
12         <header>
13             <h2>HTML5 Canvas Slideshow</h2>
14             <a href="https://www.script-tutorials.com/html5-canvas-slideshow/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
15         </header>
16         <div class="container">
17             <div class="slides">
18                 <img src="images/pic1.jpg" />
19                 <img src="images/pic2.jpg" />
20                 <img src="images/pic3.jpg" />
21                 <img src="images/pic4.jpg" />
22                 <img src="images/pic5.jpg" />
23                 <img src="images/pic6.jpg" />
24                 <img src="images/pic7.jpg" />
25             </div>
26             <canvas id="slideshow" width="900" height="300"></canvas>
27         </div>
28     </body>
29 </html>

Step 2. CSS

Here are all stylesheets

css/main.css

01 /* page layout styles */
02 *{
03     margin:0;
04     padding:0;
05 }
06 body {
07     background-color:#eee;
08     color:#fff;
09     font:14px/1.3 Arial,sans-serif;
10 }
11 header {
12     background-color:#212121;
13     box-shadow: 0 -1px 2px #111111;
14     display:block;
15     height:70px;
16     position:relative;
17     width:100%;
18     z-index:100;
19 }
20 header h2{
21     font-size:22px;
22     font-weight:normal;
23     left:50%;
24     margin-left:-400px;
25     padding:22px 0;
26     position:absolute;
27     width:540px;
28 }
29 header a.stuts,a.stuts:visited{
30     border:none;
31     text-decoration:none;
32     color:#fcfcfc;
33     font-size:14px;
34     left:50%;
35     line-height:31px;
36     margin:23px 0 0 110px;
37     position:absolute;
38     top:0;
39 }
40 header .stuts span {
41     font-size:22px;
42     font-weight:bold;
43     margin-left:5px;
44 }
45 .container {
46     color: #000;
47     margin: 20px auto;
48     position: relative;
49     width: 900px;
50 }
51 #slideshow {
52     border:1px #000 solid;
53     box-shadow:4px 6px 6px #444444;
54     display:block;
55     margin:0 auto;
56     height:300px;
57     width:900px;
58 }
59 .container .slides {
60     display:none;
61 }

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

01 var canvas, ctx;
02 var aImages = [];
03 var iCurSlide = 0;
04 var iCnt = 0;
05 var iSmTimer = 0;
06 var iContr = 0;
07 var iEfIter = 50;
08 $(function(){
09     // creating canvas objects
10     canvas = document.getElementById('slideshow');
11     ctx = canvas.getContext('2d');
12     // collect all images
13     $('.slides').children().each(function(i){
14         var oImg = new Image();
15         oImg.src = this.src;
16         aImages.push(oImg);
17     });
18     // draw first image
19     ctx.drawImage(aImages[iCurSlide], 0, 0);
20     var iTimer = setInterval(changeSlideTimer, 5000); // set inner timer
21 });
22 function changeSlideTimer() {
23     iCurSlide++;
24     if (iCurSlide == $(aImages).length) {
25         iCurSlide = 0;
26     }
27     clearInterval(iSmTimer);
28     iSmTimer = setInterval(drawSwEffect, 40); // extra one timer
29 }
30 // draw switching effect
31 function drawSwEffect() {
32     iCnt++;
33     if (iCnt <= iEfIter / 2) {
34         iContr += 0.004;
35         // change brightness and contrast
36         Pixastic.process(canvas, 'brightness',
37             {
38                 'brightness': 2,
39                 'contrast': 0.0 + iContr,
40                 'leaveDOM': true
41             },
42             function(img) {
43                 ctx.drawImage(img, 0, 0);
44             }
45         );
46     }
47     if (iCnt > iEfIter / 2) {
48         // change brightness
49         Pixastic.process(canvas, 'brightness',
50             {
51                 'brightness': -2,
52                 'contrast': 0,
53                 'leaveDOM': true
54             },
55             function(img) {
56                 ctx.drawImage(img, 0, 0);
57             }
58         );
59     }
60     if (iCnt == iEfIter / 2) { // switch actual image
61         iContr = 0;
62         ctx.drawImage(aImages[iCurSlide], 0, 0);
63         Pixastic.process(canvas, 'brightness',
64             {
65                 'brightness': iEfIter,
66                 'contrast': 0,
67                 'leaveDOM': true
68             },
69             function(img) {
70                 ctx.drawImage(img, 0, 0);
71             }
72         );
73     } else if (iCnt == iEfIter) { // end of cycle, clear extra sub timer
74         clearInterval(iSmTimer);
75         iCnt = 0;
76         iContr = 0;
77     }
78 }

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

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!