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

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):

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>

**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:

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.

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

Thread: Parallax effect

Thread Tools

Search Thread

Parallax effect

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions