PrestaShop Cerified Agency

Javascript background fade

nashville prestashop developer

I came across this about a month ago. A client wanted his background image to change colors just in certain areas. The background image was mountains and a faded sky. The client wanted the color of the sky to change but the mountains to stay the same. After a few days of thinking over this, I came up with this. I created 2 background images, the first one being the last of the transititon images and the first one being the first of the transition images. They were essentially the same images with the exception of the sky being different colors. Then I used JQuery to fade the images. It looked horrible. The JQuery implemetation was to clunky and choppy. Plus it faded to fast. Then I found a snippet of JS that fades an image, it worked perfect.

 

How to do it

First create your two images, they can be anything, but it looks great if they are the same images with different color areas.  Then you are going to need your JS to make the fade. Please note, this is someone else’s code, I do not remember where I found it. If you wrote it I will be happy to link back to you.


<script type="text/javascript">//<![CDATA[
function getElm(eID) {
return document.getElementById(eID);
}
function show(eID) {
getElm(eID).style.display='block';
}
function hide(eID) {
getElm(eID).style.display='none';
}
function setOpacity(eID, opacityLevel) {
var eStyle = getElm(eID).style;
eStyle.opacity = opacityLevel / 100;
eStyle.filter = 'alpha(opacity='+opacityLevel+')';
}
function fade(eID, startOpacity, stopOpacity, duration) {
var speed = Math.round(duration / 100);
var timer = 0;
if (startOpacity < stopOpacity){
for (var i=startOpacity; i<=stopOpacity; i++) {
setTimeout("setOpacity('"+eID+"',"+i+")", timer * speed);
timer++;
} return;
}
for (var i=startOpacity; i>=stopOpacity; i--) {
setTimeout("setOpacity('"+eID+"',"+i+")", timer * speed);
timer++;
}
}
function fadeIn(eID) {
setOpacity(eID, 0); show(eID); var timer = 0;
for (var i=1; i<=100; i++) {
setTimeout("setOpacity('"+eID+"',"+i+")", timer * 5);
timer++;
}
}
function fadeOut(eID) {
var timer = 0;
for (var i=100; i>=1; i--) {
setTimeout("setOpacity('"+eID+"',"+i+")", timer * 50);
timer++;
}
setTimeout("hide('"+eID+"')", 5533310);
}
//]]></script>

Next we prepare our css file. I for the demo, I included the css in the html file. But this is what I, I created a class for the background images that will also allow for them to be scaled. Other than img.bg everything else in the file is just to style the text and the container holding it.


img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
div.contentBox {
background:#fff;
position:relative;
top:75px;
width:700px;
height:500px;
margin:auto;
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
div.contentBoxheading {
position:relative;
float:left;
margin-left:20px;
height:40px;
top:-30px;
}
h1 {
font-family:"TradeGothic LT CondEighteen", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;
font-size:2.4em;
margin:0px;
}
p {
position:absolute;
font-family:"TradeGothic LT CondEighteen", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;
font-size:1.2em;
margin: 10px 10px 0px 10px;
}

For the HTML I am just pasting what you will actually need for your background boxes to appear and your transition to fire.


<body onload="fadeOut('fadingBox')">
<div id="staticBox"><img src="colorBridge.jpg" class="bg" ></div>
<div id="fadingBox"><img src="BWbridge.jpg" class="bg" ></div>

See Demo

Download

Have fun with this and don’t over use it.

 

Prestashop expert developer dh42
by  is an expert in Prestashop and SEO related to e-commerce sites. He is the owner of Nashville based Designhaus 42 and also spends his free time as a global moderator on the official Prestashop forums.