Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Parallax effect

  1. #1
    Join Date
    Mar 2009
    Location
    Belgium
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Parallax effect

    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.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Nice, but it only works in IE.
    Jeremy | jfein.net

  3. #3
    Join Date
    Mar 2009
    Location
    Belgium
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I only tested it in Opera (my main browser) and IE. Tomorrow I will have a look at FF and try to fix it.

  4. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Doesn't work in Safari either, or FF mac.
    Cool idea, though.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  5. #5
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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>
    Jeremy | jfein.net

  6. #6
    Join Date
    Mar 2009
    Location
    Belgium
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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.
    Jeremy | jfein.net

  8. #8
    Join Date
    Mar 2009
    Location
    Belgium
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  9. #9
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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.
    Last edited by Nile; 04-15-2009 at 12:34 AM.
    Jeremy | jfein.net

  10. #10
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Nile - doesn't work for me in Fx3 on XP says
    e (window.event) is undefined, and yes my js is enabled.

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •