Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

Vous ĂȘtes ici : Accueil > DĂ©monstrations > HTML

Scroll canvas HTML5

Code :

HTML

<canvas id="canvasScrolling" width="1200" height="600"></canvas>

JS

<script>
(function() {
        window.requestAnimationFrame = window.requestAnimationFrame
                || window.webkitRequestAnimationFrame
                || window.mozRequestAnimationFrame
                || function(callback) { window.setTimeout(callback, 1000 / 60); };

        var canvas = document.getElementById('canvasScrolling');
        var context = canvas.getContext('2d');
        var looping = false;
        var totalSeconds = 0;

        var img = new Image();
        img.onload = imageLoaded;
        img.src = 'votre_image';

        function imageLoaded() {
            draw(0);

            var btn = document.getElementById('jouer');
            btn.addEventListener('click', function() {
                startStop();
            });
        }

        var lastFrameTime = 0;

        function startStop() {
            looping = !looping;

            if (looping) {
                lastFrameTime = Date.now();
                requestAnimationFrame(loop);
            }
        }

        function loop() {
            if (!looping) {
                return;
            }

            requestAnimationFrame(loop);

            var now = Date.now();
            var deltaSeconds = (now - lastFrameTime) / 1000;
            lastFrameTime = now;
            draw(deltaSeconds);
        }

        function draw(delta) {
            totalSeconds += delta;

            var vx = 100; // correspond a la vitesse de defilement = 100 pixels/sec
            var numImages = Math.ceil(canvas.width / img.width) + 1;
            var xpos = totalSeconds * vx % img.width;

            context.save();
            context.translate(-xpos, 0);
            for (var i = 0; i < numImages; i++) {
                context.drawImage(img, i * img.width, 0);
            }
            context.restore();
        }
    }());
    </script>

Source, inspiration, ressources :

source originale (EN) .

article (EN) .

Vous rencontrez un problÚme avec cette démonstration ?

Avant de vous arracher les cheveux ou de crier au scandale, procĂ©dez Ă  quelques simples vĂ©rifications. Si la dĂ©monstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de mĂȘme chez vous. De plus vous pouvez tĂ©lĂ©charger la dĂ©monstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne rĂ©ponds qu'aux messages respectueux.