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.
<br />
<script type="text/javascript">//<!<div class="fusion-fullwidth fullwidth-box hundred-percent-fullwidth non-hundred-percent-height-scrolling" style='background-color: rgba(255,255,255,0);background-position: center center;background-repeat: no-repeat;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;'><div class="fusion-builder-row fusion-row "><div class="fusion-layout-column fusion_builder_column fusion_builder_column_1_1 fusion-one-full fusion-column-first fusion-column-last fusion-column-no-min-height 1_1" style='margin-top:0px;margin-bottom:0px;'>
<div class="fusion-column-wrapper" style="background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;" data-bg-url="">
[CDATA[<br />
function getElm(eID) {<br />
return document.getElementById(eID);<br />
}<br />
function show(eID) {<br />
getElm(eID).style.display='block';<br />
}<br />
function hide(eID) {<br />
getElm(eID).style.display='none';<br />
}<br />
function setOpacity(eID, opacityLevel) {<br />
var eStyle = getElm(eID).style;<br />
eStyle.opacity = opacityLevel / 100;<br />
eStyle.filter = 'alpha(opacity='+opacityLevel+')';<br />
}<br />
function fade(eID, startOpacity, stopOpacity, duration) {<br />
var speed = Math.round(duration / 100);<br />
var timer = 0;<br />
if (startOpacity < stopOpacity){<br />
for (var i=startOpacity; i<=stopOpacity; i++) {<br />
setTimeout("setOpacity('"+eID+"',"+i+")", timer * speed);<br />
timer++;<br />
} return;<br />
}<br />
for (var i=startOpacity; i>=stopOpacity; i--) {<br />
setTimeout("setOpacity('"+eID+"',"+i+")", timer * speed);<br />
timer++;<br />
}<br />
}<br />
function fadeIn(eID) {<br />
setOpacity(eID, 0); show(eID); var timer = 0;<br />
for (var i=1; i<=100; i++) {<br />
setTimeout("setOpacity('"+eID+"',"+i+")", timer * 5);<br />
timer++;<br />
}<br />
}<br />
function fadeOut(eID) {<br />
var timer = 0;<br />
for (var i=100; i>=1; i--) {<br />
setTimeout("setOpacity('"+eID+"',"+i+")", timer * 50);<br />
timer++;<br />
}<br />
setTimeout("hide('"+eID+"')", 5533310);<br />
}<br />
//]]></script><br />
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.
<br />
img.bg {<br />
min-height: 100%;<br />
min-width: 1024px;<br />
width: 100%;<br />
height: auto;<br />
position: fixed;<br />
top: 0;<br />
left: 0;<br />
}<br />
div.contentBox {<br />
background:#fff;<br />
position:relative;<br />
top:75px;<br />
width:700px;<br />
height:500px;<br />
margin:auto;<br />
opacity:0.7;<br />
filter:alpha(opacity=70); /* For IE8 and earlier */<br />
}<br />
div.contentBoxheading {<br />
position:relative;<br />
float:left;<br />
margin-left:20px;<br />
height:40px;<br />
top:-30px;<br />
}<br />
h1 {<br />
font-family:"TradeGothic LT CondEighteen", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;<br />
font-weight:normal;<br />
font-size:2.4em;<br />
margin:0px;<br />
}<br />
p {<br />
position:absolute;<br />
font-family:"TradeGothic LT CondEighteen", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;<br />
font-weight:normal;<br />
font-size:1.2em;<br />
margin: 10px 10px 0px 10px;<br />
}<br />
For the HTML I am just pasting what you will actually need for your background boxes to appear and your transition to fire.
<br />
<body onload="fadeOut('fadingBox')"><br />
<div id="staticBox"><img src="colorBridge.jpg" class="bg" ></div><br />
<div id="fadingBox"><img src="BWbridge.jpg" class="bg" ></div><br />
Have fun with this and don’t over use it.
</div> </div></div></div></p>
About the Author: Lesley Paone
Lesley has worked in e-commerce for over a decade, and is the founder of dh42. Starting out with PrestaShop and brancing out into other platforms like Shopify. He loves all things e-commerce and loves a challenge, in his spare time he helps moderate several forums on SEO, e-commerce, as well as the PrestaShop forum. If you have any questions for him about any of his articles just use our contact form to contact him.
