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.
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>
