topical media & game development

topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _
lib-jquery-plugin-parallax-parallax-demos-stalkremote.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_remote
          {float:left; position:relative; background:#2f3134;
           width:60px; height:60px; margin:6.4em 3.2em 0 2.4em;}
           
  #button_control
          {float:left; position:relative; background:#2f3134;
           width:60px; height:60px; margin:6.4em 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-stalkremote-files-jquery-1.js"></script>
  <script type="text/javascript" src="lib-jquery-plugin-parallax-parallax-demos-stalkremote-files-jquery.js"></script>
  <script type="text/javascript">
  <!--
  
  // jQuery.noConflict();
  
  // RUN
  
  var corners = '<img src="lib-jquery-plugin-parallax-images-corner-dark-tl.png" class="tl" />'+
                                                          '<img src="lib-jquery-plugin-parallax-images-corner-dark-tr.png" class="tr" />'+
                                                          '<img src="lib-jquery-plugin-parallax-images-corner-dark-bl.png" class="bl" />'+
                                                          '<img src="lib-jquery-plugin-parallax-images-corner-dark-br.png" class="br" />';
  
  jQuery(document).ready(function(){
  
    jQuery('h1').html('<img src="lib-jquery-plugin-parallax-images-logo-stephband-grey.png" />');
          
          jQuery('.button_remote').jparallax(
                  {mouseport: jQuery('#button_control') },                          // 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
          ).add('#button_control').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 $=.png]').ifixpng(); });$ </script>
  <![endif]-->
  <!--[if lt IE 8]>
  <style type="text/css">
  @import "css/style_ie.css";
  </style>
  <![endif]-->
  
  </head><body>
  
  <div id="header">
  <a href="http://webdev.stephband.info/index.html"><h1><img src="lib-jquery-plugin-parallax-parallax-demos-stalkremote-files-logo_stephband_grey.png"></h1></a>
  </div>
  
  <div id="content">
  
  <h2>jParallax Demos <a href="http://webdev.stephband.info/parallax_demos_type.html">next</a></h2>
  
  <div id="wrapper" class="clear">
  
  <div class="button_remote"><img src="lib-jquery-plugin-parallax-parallax-demos-stalkremote-files-corner_dark_tl.png" class="tl"><img src="lib-jquery-plugin-parallax-parallax-demos-stalkremote-files-corner_dark_tr.png" class="tr"><img src="lib-jquery-plugin-parallax-parallax-demos-stalkremote-files-corner_dark_bl.png" class="bl"><img src="lib-jquery-plugin-parallax-parallax-demos-stalkremote-files-corner_dark_br.png" class="br">
          <img style="left: 50%; top: 50%; position: absolute; margin-left: -25.4928px; margin-top: -23.4007px;" src="lib-jquery-plugin-parallax-parallax-demos-stalkremote-files-1.png" alt="" class="layer_0">
          <img style="left: 50%; top: 50%; position: absolute; margin-left: -29.9855px; margin-top: -25.8014px;" src="lib-jquery-plugin-parallax-parallax-demos-stalkremote-files-2.png" alt="" class="layer_1">
          <img style="left: 50%; top: 50%; position: absolute; margin-left: -40.9638px; margin-top: -30.5034px;" src="lib-jquery-plugin-parallax-parallax-demos-stalkremote-files-3.png" alt="" class="layer_2">
          <img style="left: 50%; top: 50%; position: absolute; margin-left: -55.9348px; margin-top: -37.1062px;" src="lib-jquery-plugin-parallax-parallax-demos-stalkremote-files-4.png" alt="" class="layer_3">
          <img style="left: 50%; top: 50%; position: absolute; margin-left: -75.3985px; margin-top: -46.1096px;" src="lib-jquery-plugin-parallax-parallax-demos-stalkremote-files-5.png" alt="" class="layer_4">
          <img style="left: 50%; top: 50%; position: absolute; margin-left: -99.8551px; margin-top: -58.0137px;" src="lib-jquery-plugin-parallax-parallax-demos-stalkremote-files-6.png" alt="" class="layer_5">
  </div>
  
  <div id="button_control"><img src="lib-jquery-plugin-parallax-parallax-demos-stalkremote-files-corner_dark_tl.png" class="tl"><img src="lib-jquery-plugin-parallax-parallax-demos-stalkremote-files-corner_dark_tr.png" class="tr"><img src="lib-jquery-plugin-parallax-parallax-demos-stalkremote-files-corner_dark_bl.png" class="bl"><img src="lib-jquery-plugin-parallax-parallax-demos-stalkremote-files-corner_dark_br.png" class="br"></div>
  
  </div>
  
  </div></body></html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _
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.