topical media & game development
lib-jquery-plugin-parallax-parallax-demos-stalkbuttons.htm / htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>webdev.stephband.info</title>
<link rel="icon" type="image/png" href="http://webdev.stephband.info/images/favicon.png">
<style type="text/css" media="screen, projection">
@import "lib-jquery-plugin-parallax-css-reset.css";
@import "lib-jquery-plugin-parallax-css-typography.css";
@import "lib-jquery-plugin-parallax-css-style-dark.css";
#wrapper
{width:60em;}
.button
{float:left; position:relative; background:#2f3134;
width:60px; height:60px; margin:3.2em 3.2em 0 0;}
.layer_0
{width:45px; height:45px; z-index:101;}
.layer_1
{width:48px; height:48px; z-index:102;}
.layer_2
{width:52px; height:52px; z-index:103;}
.layer_3
{width:58px; height:58px; z-index:104;}
.layer_4
{width:67px; height:67px; z-index:105;}
.layer_5
{width:80px; height:80px; z-index:106;}
</style>
<script type="text/javascript" src="lib-jquery-plugin-parallax-parallax-demos-stalkbuttons-files-jquery-1.js"></script>
<script type="text/javascript" src="lib-jquery-plugin-parallax-parallax-demos-stalkbuttons-files-jquery.js"></script>
<script type="text/javascript">
<!--
// jQuery.noConflict();
// RUN
var corners = '<img src="images/corner-dark-tl.png" class="tl" />'+
'<img src="images/corner-dark-tr.png" class="tr" />'+
'<img src="images/corner-dark-bl.png" class="bl" />'+
'<img src="images/corner-dark-br.png" class="br" />';
jQuery(document).ready(function(){
jQuery('h1').html('<img src="images/logo_stephband_grey.png" />');
jQuery('.button').jparallax(
{}, // Options
{xtravel: '6px', ytravel: '6px'}, // Layer0
{xtravel: '12px', ytravel: '12px'}, // Layer1
{xtravel: '30px', ytravel: '30px'}, // Layer2
{xtravel: '54px', ytravel: '54px'}, // Layer3
{xtravel: '84px', ytravel: '84px'}, // Layer4
{xtravel: '120px', ytravel: '120px'} // Layer5
).prepend(corners).children('img').click( function() { jQuery(this).remove() } );
});
//-->
</script>
<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery.ifixpng.js"></script>
<script type="text/javascript">jQuery(document).ready(function(){ jQuery('img[@src
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
