HTML5 Canvas Slideshow

  • Reading time:5 mins read
HTML5 Canvas Slideshow

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

[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

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Canvas Slideshow | Dev School</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="https://dev-school.net/html5-canvas-slideshow/" class="stuts">Back to original tutorial on <span>Dev School</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

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!