Image Belt

ANGLE

NUMBER OF SLICES

SLIDE DURATION (ms)

What's This?

This page demonstrates my investigation into adding a third dimension to images to add depth to a page, without the need for image editing. The script works by displaying slices of the same image alongside one another, in ever decreasing heights to give the impression of a single, slanted image.

Feel free to play around with the sliders; when you're happy with your settings, click 'Update'. Click 'Run' to set the image belt in motion. Please note that the technology is in beta, and may produce unusual output in some scenarios!

The implementation draws (ahem) on trigonometry for the various calculations required for the size and placement of each slice, and utilises jQuery to provide the sliding animation.

Potentially, the script could be developed further for other effects. I could revisit calculus to explore the idea of curved images using a similar principle. Also, angling the image towards the user would be a logical next step.

Get the Code


If you do not have the latest version of jQuery, download it here.

How to Use it

  • Save the script somewhere sensible
  • Ensure your HTML contains the following:
    <div id="canvas"></div><!-- canvas -->
  • Import jQuery if you have not already done so.
    <script src="js/jQuery1.5.2.js" language="javascript" type="text/javascript"></script>
  • Import the script
    <script src="js/imageBelt.js" language="javascript" type="text/javascript"></script>
  • Import the stylesheet
    <link rel="stylesheet" href="css/image_belt.css" />
  • Set the variable imageBelt.images either by modifying it directly in the javascript file or by setting it within your HTML (after importing it) e.g.
    <script type="text/javascript">
      images : 'images/1.jpg,images/2.jpg,images/3.jpg'.split(',');
    </script>
  • Near the bottom of your page, if you wish to edit the default settings, preferably the last tag before your </body>, create your image belt e.g.
    <script type="text/javascript">
      imageBelt.angle = 55;
      imageBelt.numSlices = 32;
      imageBelt.slideSpeed = 1800;
    </script>

    This step is not mandatory, however.
  • Animate the image belt by calling the slideBelt function like so:
    imageBelt.slideBelt();
  • And that's it! The script will do the rest for you. I'd love to see and hear your feedback and suggestions.
  • If you're at all impressed, interested, or just feeling nice, use the bookmarking and sharing facilities at the bottom of the page to spread the word!

Serving Suggestion

  • This script can be used to create a rolling belt that doesn't require the use of the 'run' button in the example above. Rather it will continuously animate, and with a pause in-between animations if you wish.
  • Create a simple function that will continuously call slideBelt(), like so:
    var flowStarted = false;

    function constantFlow(waitTime) {
      if (!$('#back_photo').find('img:animated').attr('id'))
      {
        if (flowStarted)
          imageBelt.slideBelt();

        flowStarted = true;
        setTimeout('constantFlow(' + waitTime + ')', waitTime);
      }
    }
  • And then using jQuery's handy $(document.ready()) feature, make the initial call to set it rolling.
    $(document).ready(function() {
      constantFlow(8000);
    });
  • I would advise setting the waitTime parameter to something like 8000; basically anything higher than the value of the imageBelt.slidespeed will bring a pause to the animation. This will give the user time to look at each image between animations, but it's up to you!