Image Slide-in Effect in JavaScript

I wrote this piece of JavaScript on a bit of a whim. I wanted to add a little animation to an otherwise-dull page that would gradually display an image. I started out with a simple left-to-right display because it was easiest - just position the image outside the containing block-level element and bring it slowly into view. But that's been done millions of times, so I thought I'd try something slightly more ambitious. I "split" the image in the middle and slide it into view from the center on out to the edges.


Because the JavaScript runs at onLoad() for the page, you need to use this in the "above the fold" area near the top of your pages or the effect is lost on users. But I wrote the script so that you can use as many of these slide-in images as you like. You just need to position them carefully to keep them visible, which may require modifying the script where it sets the 'position' property for 'rdSlideinBoxes[i]' to "position:relative; top:0; left:0;".


The code automatically sizes the containing DIVs to precisely fit any image. The image URL for each instance is stored and retrieved in the 'data-image' attribute of the .rdSlideinBox DIVs. Yes, this probably requires HTML 5 support. I haven't tested it. I always do what I can to get maximum cross-browser compatibility, but it just didn't seem worth giving up the simplicity and flexibility of using a custom attribute to accommodate those lagging 2% of users in this case. You can, as I did on this page, include a <noscript> in the .rdSlideinBox DIV and include a common IMG tag with its 'src' pointing to the intended image file so that the code degrades gracefully for the 2% running without JavaScript.

Installation

There are two parts to using this script. The first step is to include the '.rdSlideinBox' DIV for every instance of the slide-in effect that you want to create. Just set the 'data-image' attribute to the URL of the image you want to use for the effect. See the example HTML below. The noscript is completely optional, but would be best practice. The second step is to install the JavaScript code shown further below at the end of your HTML mark-up. You can convert the script to an external JavaScript file as long as the calling SCRIPT tag is inserted after all of the other page content.

Slide-in Image Sample HTML

<div class="rdSlideinBox" data-image="http://www.example.com/images/your_image.jpg"> <noscript> <img src="http://www.example.com/images/your_image.jpg" alt="Your Image" /> </noscript> </div>

If you examine the JavaScript below, you'll notice that it immediately preloads all of the images before the page's onLoad() event triggers. This insures that the image data is available for the 'rdSlideInInit' function to detect the images' dimensions and that the image itself is available for display to the user. I tried several other methods, and this is simply the fastest and most reliable.

Slide-in Image JavaScript

<script type="text/javascript"> // Rainbo Design Slide-in Images // Copyright (C) 2015 by Richard L. Trethewey // All rights reserved. http://www.rainbodesign.com/pub/ // Permission for use is granted as long as this notice remains intact. // Insert this script at the end of your HTML document var rdSlideinBoxes; var rdSlideinTimers = new Array(); var rdSlideinTmpImages = new Array(); var rdSlideinDelay = (1000/40); // Update 40 times per second var rdSlideinIncrement = 2; // % of image width to move per cycle // Insure all images are pre-loaded and save them rdSlideinBoxes = document.getElementsByClassName('rdSlideinBox'); for (i=0; i<rdSlideinBoxes.length; i++) { var tImg = rdSlideinBoxes[i].getAttribute('data-image'); rdSlideinTmpImages[i] = new Image(); rdSlideinTmpImages[i].src = tImg; } function rdSlideInInit() { for (i=0; i<rdSlideinBoxes.length; i++) { rdSlideinBoxes[i].setAttribute('style', 'position:relative; top:0; left:0;'); var tImg = rdSlideinBoxes[i].getAttribute('data-image'); // Size the containing box DIV rdSlideinBoxes[i].style.width = String(rdSlideinTmpImages[i].naturalWidth) + 'px'; rdSlideinBoxes[i].style.height = String(rdSlideinTmpImages[i].naturalHeight) + 'px'; // Create the left-hand box DIV var lBox = document.createElement('DIV'); lBox.setAttribute('style', 'position:absolute; top:0; left:0; width:50%; height:' + rdSlideinBoxes[i].style.height + '; overflow:hidden;'); var lBoxImg = document.createElement('IMG'); lBoxImg.setAttribute('src', tImg); lBoxImg.setAttribute('id', 'rdSlideinLImg' + String(i)); lBoxImg.setAttribute('style', 'position:absolute; top:0; left:100%;'); lBox.appendChild(lBoxImg); rdSlideinBoxes[i].appendChild(lBox); // Create the right-hand box DIV var rBox = document.createElement('DIV'); rBox.setAttribute('style', 'position:absolute; top:0; left:50%; width:50%; height:' + rdSlideinBoxes[i].style.height + '; overflow:hidden;'); var rBoxImg = document.createElement('IMG'); rBoxImg.setAttribute('src', tImg); rBoxImg.setAttribute('id', 'rdSlideinRImg' + String(i)); rBoxImg.setAttribute('style', 'position:absolute; top:0; left:-200%;'); rBox.appendChild(rBoxImg); rdSlideinBoxes[i].appendChild(rBox); // alert('rdSlideinUpdate(' + i + ')'); rdSlideinTimers[i] = setTimeout('rdSlideinUpdate(' + i + ')', rdSlideinDelay); } // end for i } // end rdSlideInInit() function rdSlideinUpdate(id) { var lLeft = parseInt(document.getElementById('rdSlideinLImg' + String(id)).style.left); lLeft = lLeft - rdSlideinIncrement; document.getElementById('rdSlideinLImg' + String(id)).style.left = lLeft + '%'; var rLeft = parseInt(document.getElementById('rdSlideinRImg' + String(id)).style.left); rLeft = rLeft + rdSlideinIncrement; document.getElementById('rdSlideinRImg' + String(id)).style.left = rLeft + '%'; if (lLeft > 0) { rdSlideinTimers[id] = setTimeout('rdSlideinUpdate(' + id + ')', rdSlideinDelay); } } // end rdSlideinUpdate() if (window.addEventListener) { window.addEventListener('load', rdSlideInInit, false); } else if (window.attachEvent) { window.attachEvent('onload', rdSlideInInit); } </script>

This page was last modified on August 27, 2020


Copyright © 2005-2024 by Richard L. Trethewey - Rainbo Design Minneapolis. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission. I've been working with computers for over 30 years now, and one phrase keeps popping into my head - "I hate it when it's right!" And laptops and smartphones are no better.

Looking for more website design information? See my Sitemap!