zZzzZ.
home
/
histoio
/
www
/
plugins
/
auto
/
.jparallax-master.bck
/
demos
New Folder
Editing: stalkbuttons.html
Save
Cancel
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="author" content="" /> <meta name="description" content="" /> <title>jQuery.parallax</title> <script>document.documentElement.className = 'js';</script> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> <!-- Force latest IE rendering engine & Chrome Frame --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- Make IE recognise HTML5 elements for styling --> <!--[if lte IE 8]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <noscript> <strong>Warning!</strong> Your browser does not support HTML5 so some elements on this page are simulated using JScript. Unfortunately your browser has JScript disabled. Please enable it in order to display this page. </noscript> <![endif]--> <!-- Disable image toolbar in IE6 --> <!--[if lte IE 6]><meta http-equiv="imagetoolbar" content="no" /><![endif]--> <link rel="icon" type="image/png" href="images/favicon.png" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="stylesheet" type="text/css" href="https://stephen.band/css/template.min.css" /> <link rel="stylesheet" type="text/css" href="https://stephen.band/css/template.theme.min.css" /> <link rel="stylesheet" type="text/css" href="https://stephen.band/css/site.layout.css" /> <link rel="stylesheet" type="text/css" href="https://stephen.band/css/docs.classes.css" /> <link rel="stylesheet" type="text/css" href="https://stephen.band/css/demos.theme.css" /> <!--[if (lt IE 9)&(!IEMobile)]> <link rel="stylesheet" href="https://stephen.band/css/template.layout.32em.css" media="all" /> <link rel="stylesheet" href="https://stephen.band/css/template.layout.48em.css" media="all" /> <![endif]--> <!--[if lte IE 8]><link rel="stylesheet" href="https://stephen.band/css/template.ie.css" /><![endif]--> <!--[if IE 8]><link rel="stylesheet" href="https://stephen.band/css/template.ie8.css" /><![endif]--> <!--[if IE 7]><link rel="stylesheet" href="https://stephen.band/css/template.ie7.css" /><![endif]--> <!--[if IE 6]><link rel="stylesheet" href="https://stephen.band/css/template.ie6.css" /><![endif]--> <link rel="stylesheet" href="../css/jquery.parallax.css" /> <style type="text/css" media="screen, projection"> #wrapper {width:60em;} .stalk { background:#2f3134; float:left; position:relative; width:60px; height:60px; margin:3.2em 3.2em 0 0; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } .layer_1 { position: absolute; width:45px; height:45px; z-index:101; } .layer_2 { position: absolute; width:48px; height:48px; z-index:102; } .layer_3 { position: absolute; width:52px; height:52px; z-index:103; } .layer_4 { position: absolute; width:58px; height:58px; z-index:104; } .layer_5 { position: absolute; width:67px; height:67px; z-index:105; } .layer_6 { position: absolute; width:80px; height:80px; z-index:106; } </style> </head> <body> <header class="site_header" id="page_header"> <div class="site_wrap wrap"> <a class="logo_thumb thumb" href="https://stephen.band" title="stephband" rel="index"> <h1>stephband.info</h1> </a> </div> </header> <div class="site_wrap wrap"> <h2>jParallax Demos <a href="remotecontrol.html">next</a></h2> <div class="clear"> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> <div class="stalk"> <img src="../images/parallax_button/1.png" alt="" class="layer_1"/> <img src="../images/parallax_button/2.png" alt="" class="layer_2"/> <img src="../images/parallax_button/3.png" alt="" class="layer_3"/> <img src="../images/parallax_button/4.png" alt="" class="layer_4"/> <img src="../images/parallax_button/5.png" alt="" class="layer_5"/> <img src="../images/parallax_button/6.png" alt="" class="layer_6"/> </div> </div> <script src="../js/jquery-1.7.2.js"></script> <script src="../js/jquery.parallax.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ // Set up each parallax instance seperately, because they // each have the their own mouseport. jQuery('.stalk') .each(function(){ jQuery('img', this) .parallax( { mouseport: jQuery(this) }, // Options { xparallax: '6px', yparallax: '6px' }, // Layer 1 { xparallax: '12px', yparallax: '12px' }, // Layer 2 { xparallax: '30px', yparallax: '30px' }, // Layer 3 { xparallax: '54px', yparallax: '54px' }, // Layer 4 { xparallax: '84px', yparallax: '84px' }, // Layer 5 { xparallax: '120px', yparallax: '120px' } // Layer 6 ) .click( function() { //console.log('remove'); jQuery(this).remove(); }); }); }); </script> </body> </html>