PDA

View Full Version : Parallax effect



verzenden
04-13-2009, 10:24 PM
1) CODE TITLE: Horizontal Parallax Script

2) AUTHOR NAME/NOTES: Kevin de Kreij

3) DESCRIPTION: Combine a couple of DIV's with a little Javascript to simulate the Parallax effect.

4) URL TO CODE: Check the Demo here (http://wiitext.kreij.nl/parallax.html)

I hope you enjoy.

Nile
04-13-2009, 10:47 PM
Nice, but it only works in IE.

verzenden
04-13-2009, 10:54 PM
I only tested it in Opera (my main browser) and IE. Tomorrow I will have a look at FF and try to fix it.

djr33
04-13-2009, 11:10 PM
Doesn't work in Safari either, or FF mac.
Cool idea, though.

Nile
04-13-2009, 11:40 PM
Here, this works in all browsers (change is highlighted):


<base href="http://wiitext.kreij.nl/">
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Robots" content="INDEX,NOFOLLOW">
<title>Parallax Demonstration</title>

<style type="text/css">
<!--
#BgOne {
width: 992px;
z-index: -8;
margin-left: -96px;
background-image: url(images/parallax/992.png);
}
#BgTwo {
width: 1056px;
z-index: -7;
margin-left: -128px;
background-image: url(images/parallax/1056.png);
}
#BgTre {
width: 1120px;
z-index: -6;
margin-left: -160px;
background-image: url(images/parallax/1120.png);
}
#BgFou {
width: 1184px;
z-index: -5;
margin-left: -192px;
background-image: url(images/parallax/1184.png);
}
#BgFiv {
width: 1248px;
z-index: -4;
margin-left: -224px;
background-image: url(images/parallax/1248.png);
}
#BgSix {
width: 1312px;
z-index: -3;
margin-left: -256px;
background-image: url(images/parallax/1312.png);
}
#BgSev {
width: 1376px;
z-index: -2;
margin-left: -288px;
background-image: url(images/parallax/1376.png);
}
#BgEig {
width: 1440px;
z-index: -1;
margin-left: -320px;
background-image: url(images/parallax/1440.png);
}
.Parallax {
background-repeat: no-repeat;
background-position: center;
position: absolute;
height: 400px;
}
#Frame {
height: 400px;
width: 800px;
position: relative;
border: medium solid #333;
z-index: 0;
overflow: hidden;
margin: 0px auto;
}
-->
</style>

<script type="text/javascript">
function Parallax()
{
var resolution = 0;
if( typeof( window.innerWidth ) == 'number' ) {
var resolution = window.innerWidth;}

else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
var resolution = document.documentElement.clientWidth;}

else if( document.body && ( document.body.clientWidth ) ) {
var resolution = document.body.clientWidth;}

var center = resolution/2;
var e = window.event;
var divOne = (e.clientX|e.pageX)*0.1;
var divTwo = (e.clientX|e.pageX)*0.2;
var divTre = (e.clientX|e.pageX)*0.3;
var divFou = (e.clientX|e.pageX)*0.4;
var divFiv = (e.clientX|e.pageX)*0.5;
var divSix = (e.clientX|e.pageX)*0.6;
var divSev = (e.clientX|e.pageX)*0.7;
var divEig = (e.clientX|e.pageX)*0.8;

var one = center-center*0.1;
var two = center-center*0.2;
var tre = center-center*0.3;
var fou = center-center*0.4;
var fiv = center-center*0.5;
var six = center-center*0.6;
var sev = center-center*0.7;
var eig = center-center*0.8;

var frameone = document.getElementById('BgOne');
frameone.style.left = divOne-center+one;
var frametwo = document.getElementById('BgTwo');
frametwo.style.left = divTwo-center+two;
var frametre = document.getElementById('BgTre');
frametre.style.left = divTre-center+tre;
var framefou = document.getElementById('BgFou');
framefou.style.left = divFou-center+fou;
var frameone = document.getElementById('BgFiv');
frameone.style.left = divFiv-center+fiv;
var frametwo = document.getElementById('BgSix');
frametwo.style.left = divSix-center+six;
var frametre = document.getElementById('BgSev');
frametre.style.left = divSev-center+sev;
var framefou = document.getElementById('BgEig');
framefou.style.left = divEig-center+eig;
}
</script>
</head>

<body>
<h1>Parallax Demonstration</h1>
<p>Hover your mouse over the image. This image actually consists of 8 overlayed images, ranging in size from 992px - 1440px (8 steps of 64px). The javascript is simple, creating the images requires more creativity!</p>
<div id="Frame" onmousemove=Parallax()>
<div id="BgOne" class="Parallax"></div>
<div id="BgTwo" class="Parallax"></div>
<div id="BgTre" class="Parallax"></div>
<div id="BgFou" class="Parallax"></div>
<div id="BgFiv" class="Parallax"></div>
<div id="BgSix" class="Parallax"></div>
<div id="BgSev" class="Parallax"></div>
<div id="BgEig" class="Parallax"></div>
</div>
<h2>Created by Kevin de Kreij</h2>
<p><a href="http://www.kreij.nl">http://www.kreij.nl</a></p>
</body>
</html>

verzenden
04-14-2009, 03:23 AM
Hi Nile,

I have changed the highlighted code now so it should work cross-browser now. I don't have the time to test it now so i suppose your right. Thx.:)

Nile
04-14-2009, 03:55 AM
It doesn't work, just change the document to this code:


<base href="http://wiitext.kreij.nl/">
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Robots" content="INDEX,NOFOLLOW">
<title>Parallax Demonstration</title>

<style type="text/css">
<!--
#BgOne {
width: 992px;
z-index: -8;
margin-left: -96px;
background-image: url(images/parallax/992.png);
}
#BgTwo {
width: 1056px;
z-index: -7;
margin-left: -128px;
background-image: url(images/parallax/1056.png);
}
#BgTre {
width: 1120px;
z-index: -6;
margin-left: -160px;
background-image: url(images/parallax/1120.png);
}
#BgFou {
width: 1184px;
z-index: -5;
margin-left: -192px;
background-image: url(images/parallax/1184.png);
}
#BgFiv {
width: 1248px;
z-index: -4;
margin-left: -224px;
background-image: url(images/parallax/1248.png);
}
#BgSix {
width: 1312px;
z-index: -3;
margin-left: -256px;
background-image: url(images/parallax/1312.png);
}
#BgSev {
width: 1376px;
z-index: -2;
margin-left: -288px;
background-image: url(images/parallax/1376.png);
}
#BgEig {
width: 1440px;
z-index: -1;
margin-left: -320px;
background-image: url(images/parallax/1440.png);
}
.Parallax {
background-repeat: no-repeat;
background-position: center;
position: absolute;
height: 400px;
}
#Frame {
height: 400px;
width: 800px;
position: relative;
border: medium solid #333;
z-index: 0;
overflow: hidden;
margin: 0px auto;
}
-->
</style>

<script type="text/javascript">
function Parallax()
{
var resolution = 0;
if( typeof( window.innerWidth ) == 'number' ) {
var resolution = window.innerWidth;}

else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
var resolution = document.documentElement.clientWidth;}

else if( document.body && ( document.body.clientWidth ) ) {
var resolution = document.body.clientWidth;}

var center = resolution/2;
var e = window.event;
var divOne = (e.clientX|e.pageX)*0.1;
var divTwo = (e.clientX|e.pageX)*0.2;
var divTre = (e.clientX|e.pageX)*0.3;
var divFou = (e.clientX|e.pageX)*0.4;
var divFiv = (e.clientX|e.pageX)*0.5;
var divSix = (e.clientX|e.pageX)*0.6;
var divSev = (e.clientX|e.pageX)*0.7;
var divEig = (e.clientX|e.pageX)*0.8;

var one = center-center*0.1;
var two = center-center*0.2;
var tre = center-center*0.3;
var fou = center-center*0.4;
var fiv = center-center*0.5;
var six = center-center*0.6;
var sev = center-center*0.7;
var eig = center-center*0.8;

var frameone = document.getElementById('BgOne');
frameone.style.left = divOne-center+one;
var frametwo = document.getElementById('BgTwo');
frametwo.style.left = divTwo-center+two;
var frametre = document.getElementById('BgTre');
frametre.style.left = divTre-center+tre;
var framefou = document.getElementById('BgFou');
framefou.style.left = divFou-center+fou;
var frameone = document.getElementById('BgFiv');
frameone.style.left = divFiv-center+fiv;
var frametwo = document.getElementById('BgSix');
frametwo.style.left = divSix-center+six;
var frametre = document.getElementById('BgSev');
frametre.style.left = divSev-center+sev;
var framefou = document.getElementById('BgEig');
framefou.style.left = divEig-center+eig;
}
</script>
</head>

<body>
<h1>Parallax Demonstration</h1>
<p>Hover your mouse over the image. This image actually consists of 8 overlayed images, ranging in size from 992px - 1440px (8 steps of 64px). The javascript is simple, creating the images requires more creativity!</p>
<div id="Frame" onmousemove=Parallax()>
<div id="BgOne" class="Parallax"></div>
<div id="BgTwo" class="Parallax"></div>
<div id="BgTre" class="Parallax"></div>
<div id="BgFou" class="Parallax"></div>
<div id="BgFiv" class="Parallax"></div>
<div id="BgSix" class="Parallax"></div>
<div id="BgSev" class="Parallax"></div>
<div id="BgEig" class="Parallax"></div>
</div>
<h2>Created by Kevin de Kreij</h2>
<p><a href="http://www.kreij.nl">http://www.kreij.nl</a></p>
</body>
</html>

For some reason it will only work with the base href.

verzenden
04-14-2009, 05:28 PM
I changed and tried some things. I externalised the js & css files. I validated the files with W3C.

I tried <base href="http://wiitext.kreij.nl/"> which doesn't seem to do anything.

I installed FF and saw myself it ain't working.

I guess I'm to much a js newbie but sooner or later I will find out why it ain't working in FF, now it's driving me nuts.:eek:

Nile
04-15-2009, 12:21 AM
Its because firefox uses pageY and pageX, not client.
For some reason, the code works when it isn't on your site.

Look: http://unlinkthis.net/examples/parallax.html Works in IE and FF.

boogyman
04-15-2009, 12:25 PM
Nile - doesn't work for me in Fx3 on XP says
e (window.event) is undefined, and yes my js is enabled.

Master_script_maker
04-15-2009, 01:59 PM
The problem was when you were assigning then style.left you must add px to the value eg. frameone.style.left = divOne-center+one+"px"; If you want I optimised the code a little:
function parallax(e) {
var resolution = 0;
if( typeof( window.innerWidth ) == 'number' ) {
var resolution = window.innerWidth;
} else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
var resolution = document.documentElement.clientWidth;
} else if( document.body && ( document.body.clientWidth ) ) {
var resolution = document.body.clientWidth;
}

var center = resolution/2;
var posx = 0;
e=e||window.event;
if (e.pageX) {
var tempX = e.pageX;
} else if (e.clientX) {
var tempX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
} else {
return false; //browser doesn't work

}
var div, num, framen;
var ids=['BgOne', 'BgTwo', 'BgTre', 'BgFou', 'BgFiv', 'BgSix', 'BgSev', 'BgEig'];
for(var i=0;i<8;++i) {
div=tempX*(i+1)/10;
num=center-center*(i+1)/10;
document.getElementById(ids[i]).style.left=div-center+num+"px";
}
}

verzenden
04-15-2009, 07:37 PM
Master_script_maker,

Your the true master. I know with js there might be many ways that lead to Rome and I did feel my function could be optimized but, Wow.

I had already discovered that in FF var tempX did got a value when i did alert(tempX); but i never expected the solution to be in the +px thing.

Thx.

verzenden
04-16-2009, 09:38 PM
I updated the script.

- The Parallax effect does not have to be centered on the page anymore and can be placed anywhere on a page. The position of div id="Frame" is determined at the start of the Parallax function.

- I tested the script in IE7, FF3.0 and Opera9.63 without any problems.

- Furthermore I added some comments to help explain how the script works.

- See the result here: Parallax demo page (http://wiitext.kreij.nl/parallax.html)

verzenden
04-24-2009, 08:38 PM
My site is temporary out of order. Sorry, I forgot to pay my hosting provider:eek:

I hope to get things fixed after the weekend.