PDA

View Full Version : fullscreen background with changeable links (need help with a fade effect)



hall2003
07-02-2012, 01:57 PM
hello, im looking for some help with some code ive picked up and edited from the web.

the code ive made works perfect to change the background image using the links on the page, but i would really like some kind of fade effect to the next image.

please could someone help me to achieve a fade effect with the my script..

thanks, in advance for any help provided..

here is the code

------------

<body onload="javascript:changeBGImage(0)"/>


<style>
* { margin: 0; padding: 0; top-margin: 0;}
.bgchange {
* { margin: 0; padding: 0; top-margin: 0;}

html {
background: no-repeat center right fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


</style>


<script type="text/javascript">
var backImage = [
"images/bg0.jpg",
"images/bg1.jpg",
"images/bg2.jpg",
"images/bg3.jpg" ];

function changeBGImage(whichImage) {
if (document.body){
document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
document.body.className = 'bgchange';
} }; </script>


<a href="javascript:changeBGImage(0)">bg0</a>
<br>
<a href="javascript:changeBGImage(1)">bg1</a>
<br>
<a href="javascript:changeBGImage(2)">bg2</a>
<br>
<a href="javascript:changeBGImage(3)">bg3</a>

bernie1227
07-03-2012, 04:23 AM
Hiya,
Please encase your code in [CODE] tags.
I have two jsfiddles which may help you here, one particularly for backgrounds and the other for just img's which you could adapt.
Background jsFiddle: here (http://jsfiddle.net/ewsQ7/5/)
Regular one: here (http://jsfiddle.net/bradchristie/HsKpq/1/)
Bernie

vwphillips
07-03-2012, 09:40 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<div style="height:2000px;" >content
<br />
<input type="button" name="" value="Change BackGround 1" onmouseup="zxcBackGround.swap('bg','http://www.vicsjavascripts.org.uk/StdImages/One.gif');"/>
<br />
<input type="button" name="" value="Change BackGround 2" onmouseup="zxcBackGround.swap('bg','http://www.vicsjavascripts.org.uk/StdImages/Two.gif');"/>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Swap Back Ground Image (3-July-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcBackGround={

init:function(id,url,ms){
var mark=document.createElement('DIV'),bg;
mark.style.position='fixed';
bg=mark.cloneNode(false);
mark.style.width='0px';
mark.style.height='0px';
mark.style.bottom='0px';
mark.style.right='0px';
document.body.appendChild(mark);
bg.style.zIndex='-1';
bg.style.left='0px';
bg.style.top='0px';
bg.style.width='100%';
bg.style.height=mark.offsetTop+'px';
bg.style.backgroundImage='url('+url+')';
document.body.appendChild(bg);
this[id]={
mark:mark,
bg:bg,
ms:ms
}
this.addevt(window,'resize','resize',id);
},

swap:function(id,url){
var o=this[id];
if (o){
clearTimeout(o.dly);
this.animate(o,100,0,new Date(),o.ms,url);
}
},

resize:function(id){
var o=this[id];
if (o){
o.bg.style.height=o.mark.offsetTop+'px';
}
},

animate:function(o,f,t,srt,mS,url){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
o.bg.style.filter='alpha(opacity='+now+')';
o.bg.style.opacity=o.bg.style.MozOpacity=o.bg.style.WebkitOpacity=o.bg.style.KhtmlOpacity=now/100-.001;
}
if (ms<mS){
o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS,url); },10);
}
else if (url){
o.bg.style.backgroundImage='url('+url+')';
this.animate(o,0,100,new Date(),o.ms);
}
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
}

}

zxcBackGround.init('bg','http://www.vicsjavascripts.org.uk/StdImages/One.gif',1000);

/*]]>*/
</script></body>

</html>

hall2003
07-03-2012, 12:26 PM
hi vic thanks for taking a look at that for me and finding that solution, it works great in firefox and safari but doesnt work on my internet explorer, do you think you could just have a quick look at it again to seee why explorer wont use the script?? als when it fades to the next image is it possible to crossfade the image when fading to the next image?

thanks for the quick reply though im really grateful, see im wanting to change the background when the link is clicked and im going to code it so that it changes a div of info as if changing the page if you know what i mean..

also is it possible to make the image center right fixed? so it moves when the window is resized - so the right of the image is alway viewed if the window is resized and the height centers the height too if the window is shrunk down... with the no repeat too..

kind of like in this css what i had on the old script...



<style>

.bgchange {
background: no-repeat center right fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>



thanks mate, its a very good effort that script youve done.. if it can be tweaked a little to the way i need it it would be fantastic!

vwphillips
07-03-2012, 12:57 PM
I tested this with IE8 and it works for me


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<div style="height:2000px;" >content
<br />
<input type="button" name="" value="Change BackGround 1" onmouseup="zxcBackGround.swap('bg','http://www.vicsjavascripts.org.uk/StdImages/One.gif');"/>
<br />
<input type="button" name="" value="Change BackGround 2" onmouseup="zxcBackGround.swap('bg','http://www.vicsjavascripts.org.uk/StdImages/Two.gif');"/>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Swap Back Ground Image (3-July-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcBackGround={

init:function(id,url,ms){
var mark=document.createElement('DIV'),bg,d1,d2;
mark.style.position='fixed';
bg=mark.cloneNode(false);
mark.style.width='0px';
mark.style.height='0px';
mark.style.bottom='0px';
mark.style.right='0px';
document.body.appendChild(mark);
bg.style.zIndex='-1';
bg.style.left='0px';
bg.style.top='0px';
bg.style.width='100%';
bg.style.height=mark.offsetTop+'px';
bg.style.backgroundImage='url('+url+')';
document.body.appendChild(bg);
d1=bg.cloneNode(false);
bg.appendChild(d1);
this[id]={
mark:mark,
fade:d1,
bg:bg,
ms:ms
}
this.addevt(window,'resize','resize',id);
},

swap:function(id,url){
var o=this[id];
if (o){
clearTimeout(o.dly);
this.animate(o,100,0,new Date(),o.ms,url);
}
},

resize:function(id){
var o=this[id];
if (o){
o.bg.style.height=o.mark.offsetTop+'px';
o.fade.style.height=o.mark.offsetTop+'px';
}
},

animate:function(o,f,t,srt,mS,url){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
o.fade.style.filter='alpha(opacity='+now+')';
o.fade.style.opacity=o.fade.style.MozOpacity=o.fade.style.WebkitOpacity=o.fade.style.KhtmlOpacity=now/100-.001;
}
if (ms<mS){
o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS,url); },10);
}
else {
if (url){
o.fade.style.backgroundImage='url('+url+')';
this.animate(o,0,100,new Date(),o.ms);
}
else {
o.bg.style.backgroundImage=o.fade.style.backgroundImage;
}
}
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
}

}

zxcBackGround.init('bg','http://www.vicsjavascripts.org.uk/StdImages/One.gif',1000);

/*]]>*/
</script></body>

</html>

hall2003
07-03-2012, 01:55 PM
hi vic, yes it does work in ie... soryy for some reason when offline u need to f5 the page for it to work but on the server its fine...

is their any way that i can get the position more so that the image fits the browser window if the browser window is resized without it distorting te background image



i need the background image to always show the right side of the background image even if the browser window is resized and made smaller, and height wise center the image if browser window height is made smaller -

kind of like in this css

<style>

.bgchange {
background: no-repeat center right fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>

is it possible to do as the code is perfect except that the background image doesnt move when the window is resized or scale down to fit the resolution if you get me... im going to be using images that are 1920x1080 but obviously if someone uses a 1024x768 id like the image to scale down and fit their browser but use the positioning like in the css code above.

is this possible..

thanks for helping, steve

vwphillips
07-03-2012, 03:15 PM
please post a link to a page with your background image

hall2003
07-03-2012, 03:50 PM
here is the link using your script: http://www.directhoses.co.uk/test/

and here is the link with my original code - http://www.directhoses.co.uk/test/index2.htm

if you resize the page you should see on the original code the background resizes and centers when the browser window is manually resized using your mouse and dragging the browser window around.

thats what i need to happen on the page that uses your script


cheers, steve

vwphillips
07-04-2012, 08:25 AM
the additional line in red gives the same appearance



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style>

.bgchange {
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>

<body>
<div style="height:200px;" >content
<br />
<input type="button" name="" value="Change BackGround 1" onmouseup="zxcBackGround.swap('bg','http://www.directhoses.co.uk/test/images/bg1.jpg');"/>
<br />
<input type="button" name="" value="Change BackGround 2" onmouseup="zxcBackGround.swap('bg','http://www.directhoses.co.uk/test/images/bg2.jpg');"/>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Swap Back Ground Image (3-July-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcBackGround={

init:function(id,url,ms){
var mark=document.createElement('DIV'),bg,d1,d2;
mark.style.position='fixed';
bg=mark.cloneNode(false);
mark.style.width='0px';
mark.style.height='0px';
mark.style.bottom='0px';
mark.style.right='0px';
document.body.appendChild(mark);
bg.className='bgchange';
bg.style.zIndex='-1';
bg.style.left='0px';
bg.style.top='0px';
bg.style.width='100%';
bg.style.height=mark.offsetTop+'px';
bg.style.backgroundImage='url('+url+')';
document.body.appendChild(bg);
d1=bg.cloneNode(false);
bg.appendChild(d1);
this[id]={
mark:mark,
fade:d1,
bg:bg,
ms:ms
}
this.addevt(window,'resize','resize',id);
},

swap:function(id,url){
var o=this[id];
if (o){
clearTimeout(o.dly);
this.animate(o,100,0,new Date(),o.ms,url);
}
},

resize:function(id){
var o=this[id];
if (o){
o.bg.style.height=o.mark.offsetTop+'px';
o.fade.style.height=o.mark.offsetTop+'px';
}
},

animate:function(o,f,t,srt,mS,url){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
o.fade.style.filter='alpha(opacity='+now+')';
o.fade.style.opacity=o.fade.style.MozOpacity=o.fade.style.WebkitOpacity=o.fade.style.KhtmlOpacity=now/100-.001;
}
if (ms<mS){
o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS,url); },10);
}
else {
if (url){
o.fade.style.backgroundImage='url('+url+')';
this.animate(o,0,100,new Date(),o.ms);
}
else {
o.bg.style.backgroundImage=o.fade.style.backgroundImage;
}
}
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
}

}

zxcBackGround.init('bg','http://www.directhoses.co.uk/test/images/bg0.jpg',1000);

/*]]>*/
</script></body>

</html>

_

hall2003
07-04-2012, 10:18 AM
vic you are the man! works perfect I cant thank you enough...

steve

keyboard
07-04-2012, 11:07 AM
.... I'm pretty sure vwphillips is female :p

hall2003
07-04-2012, 11:42 AM
oops I didnt know lol -

got 1 last question on this script and I promise i wont bother you again lol...

if i decided to make the background image resize the background image to the browser window but forcing the image to stay in scale and not distorting the image with horrible stretching how would i do this as ive just realized upon changing my resolution that the image is out of proportion and im not getting the desired effect...

here is a link to a site online that gave me the inspiration for my site.... http://www.vivadayspa.com/

if you resize the browser the background image resizes but never stretches it stays in proportion.. ive realised thats what i need as im using 1920x1080 background images but on a 1024x768 screen you just cant see the background image properly if you see what i mean..

could you help 1 last time

cheers steve.

hall2003
07-05-2012, 03:23 PM
ive viewed the source for the way that vivadayspa keep their background to scale using css and here is the code they use. ive tried adding it to the script that you did vic but it doesnt work..

please can anyone help with adding this style to the background script vic made for me thanks

the style i need is below. its used to strecth the background image of www.vivadayspa.com so the image always fits the browser window perfect but stays in scale without distortion.

--------------------------

<style>

.bgstretcher {background:white;overflow:hidden;width:100%;position:fixed!important;z-index:1;}

.bgstretcher,.bgstretcher UL,.bgstretcher UL LI
{position:absolute;top:0;right:0;left:0;bottom:0;}

.bgstretcher UL,.bgstretcher UL LI{margin:0;padding:0;list-style:none;}

<style>

--------------------------

thanks. steve

hall2003
07-12-2012, 06:44 PM
Please can someone help me with this script please I need the background to resize to the browser window when it is resized withought distorting, similar to www.vivadayspa.com but obviously leaving the smoothe fade when changing backgrounds..

Please can someone take a look at the script and help.

Thanks, steve

hall2003
08-15-2012, 07:44 PM
I'm still struggling with this please can someone help?