SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scrolling image with HTML5 canvas

    I have a 360 degree photo I want to display a bit at a time and scroll right to left as on http://bubblepix.com/en/bubbles/4015

    So far I have got the left-most part of the image displayed within a canvas but what do I do to get the image scrolling?

    Thanks
    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    body {
        margin: 0;
        padding: 0;
    }
    </style>
    <title>Canvas image</title>
    </head>
    <body>
    <canvas id="myCanvas" width="600" height="400"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();
    
      imageObj.onload = function() {
        context.drawImage(imageObj, 70, 50);
      };
      imageObj.src = 'BubblePix_0.jpg';
    </script>
    </body>
    </html>
    blessed are the cracked for they let in the light

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hey,

    Setting up a simple timed loop and drawing images over the top of each other will work.
    You'll need to draw the image twice in a frame for the seam will be.
    When the image is completely scrolled you need to reset the position to 0.
    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    body {
        margin: 0;
        padding: 0;
    }
    </style>
    <title>Canvas image</title>
    </head>
    <body>
    <canvas id="myCanvas" width="450" height="329"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var image = new Image();
    
      image.onload = function() {
        var x = 0;
        var width = image.width;
        var min = 0-width;
        var step = 1;
    
        var loop = function() {
          context.drawImage(image, x, 0);
          context.drawImage(image, x + width, 0);
          x -= step;
          if (x < min) {
            x = 0;
          }
        };
        setInterval(loop, 1000 / 60);
      };
    
      image.src = 'norman-the-french-bulldog.jpg';
    </script>
    </body>
    </html>
    It's probably easier to do this with CSS though..
    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    body {
        margin: 0;
        padding: 0;
    }
    #slideshow {
      width: 450px;
      height: 329px;
      overflow: hidden;
    }
    #slider {
      background: url('norman-the-french-bulldog-1_34564_2009-09-23_w450.jpg');
      width: 900px;
      height: 329px;
      animation: slide 3s linear infinite;
    }
    @keyframes slide {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(-450px);
      }
    }
    </style>
    <title>Canvas image</title>
    </head>
    <body>
    <div id="slideshow">
      <div id="slider"></div>
    </div>
    
    </body>
    </html>

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mark

    Many thanks. The canvas method is great. The CSS method jumps when it starts again.

    G
    blessed are the cracked for they let in the light

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    No, the CSS method should work seamlessly as well.
    The image that css was for was 450px wide, you would need to tweak these values.

    e.g.
    Code:
    #slideshow {
      width: width;
      height: height;
      overflow: hidden;
    }
    #slider {
      background: url('your image');
      width: width * 2;
      height: height;
      animation: slide 3s linear infinite;
    }
    @keyframes slide {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(-width);
      }
    }

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah - but my image is 2514px wide. I don't see how that works as I only want to display part of the image at any time...
    blessed are the cracked for they let in the light

  6. #6
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant,

    this is very elegant
    would like to make the same with Vertical scrolling
    in canvas.

  7. #7
    SitePoint Member
    Join Date
    May 2014
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Mark,

    Would there be anyway I could do this with multiple images?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •