Image Slides Forward and Backward

For this article, I wanted something fun. And I got it. Yet, it can have genuine worthwhile uses.

An image in a div slides forward (toward the viewer) or backward (away from the viewer) either automatically or with a tap. It may be coded to respond to other user actions.

Here is an example.

(Image from LightFocus.com)

The image automatically slides forward 2 seconds after the code is loaded.

To subsequently slide the image backward or forward, tap anywhere on the image or within the containing div.

While it can be published for amusement, it can be used to attract attention to something of consequence. Examples:

• An image representing something important to focus on — climate condition, a school or family get-together, news event, … .

• An image of a product with "Sale ends Sunday" imprinted near the top-left corner. The image slides forward until the imprint is prominent. And slides backward to let the product be seen.

• An image of a map may display a wide area and then slide forward to display the narrow area of a destination.

How it Works

The CSS specifies (i) a width declaration for the image and (ii) a transform declaration. The value of the transform property specifies that a change in width shall take a specified number of seconds to accomplish (9 seconds for the above example).

JavaScript is used to specify a new image width.

When the JavaScript specifies a new image width, the CSS carries out the width change with a duration of 9 seconds. (A different duration may be specified for your implementation.)

As the width becomes larger, the image appears to move within the div toward the viewer. As the width becomes smaller, it appears to move away.

The Source Code

Below is the source code to recreate the article's example on your own page.

There are three parts. Put them all on the same page and you are good to go.

1. Here is the div containing the image and the image tag itself. The div may be styled as you wish. The img tag may load any of your publicly available images.

   <div 
      onclick="InitiateTransition()" 
      style="
         border:9px solid #6A6560;
         border-radius:9px; 
         height:200px; 
         width:200px; 
         margin:0 auto; 
         overflow:hidden;">
   <img id="the-image-4-testing" src="https://lightfocus.com/album-imaginative/knitimages/Granny-knits-01.jpg" alt="image for transition">
   </div>
   

   InitiateTransition is the function that specifies a new value for the image width. The function name is also specified twice in the JavaScript (further below).

   the-image-4-testing is the img tag id value. The id value is used in both the CSS and the JavaScript, too.

   If either of the above change, corresponding changes need to be made in the other parts of this system, the CSS and/or the JavaScript.

2. The CSS is for the image tag.

   <style>
   #the-image-4-testing {
      width:100px;
      transition:width 9s;
   }
   </style>
   

   the-image-4-testing is the img tag id value. The id value is used in both the HTML div tag and the JavaScript, too.

   100 is the number of pixels wide the image renders as when the page first loads. The number is also specified in the JavaScript.

   9s specifies a duration of 9 seconds when the image width is changed. The number 9 may be changed according to your preference.

3. The HTML code for the div and image:

   <script>
   setTimeout(InitiateTransition,2000);
   function InitiateTransition()
   {
      var minWidth = 100; // pixels
      var img = document.getElementById("the-image-4-testing");
      img.style.width = (parseInt(img.style.width)>minWidth ? minWidth : img.naturalWidth) + "px"; }
   </script>
   

   InitiateTransition is the function that specifies a new value for the image width. The function name is also specified in HTML for the div and image. The line with the first InitiateTransition tells the function to run after 2 seconds have elapsed. The second InitiateTransition assigns the name to the function.

   100 is the minimum width of the image, the same number of pixels wide the image renders as when the page first loads. The number is also specified in the HTML for the div and image.

   the-image-4-testing is the img tag id value. The id value is used in both the CSS and the HTML div tag, too.

To place this article's example on your test page, place all three of the above parts on the page.

The forward and backward sliding image can be a fun addition to your website. It may serve a more serious role of getting attention for something important, too.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager