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

talk show tell print

lib-jquery-plugin-parallax-parallax-demos-target.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";
  
  #content
    {}
  #target
    {position:absolute; top:172px; bottom:80px; left:80px; right:80px;
     background: #eeeeee; overflow: hidden;}
  #control
    {position:absolute; bottom:40px; left:80px; right:80px;}
  
  </style>
  
  <script type="text/javascript" src="lib-jquery-plugin-parallax-parallax-demos-target-files-jquery-1.js"></script>
  <script type="text/javascript" src="lib-jquery-plugin-parallax-parallax-demos-target-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('#target').jparallax({triggerExposesEdges: true}, {xtravel:0.2, ytravel:0.2}, {xtravel:0.6, ytravel:0.6}).append(corners);
                  
          jQuery('a[href="#one"]').click(function() {
      var ref=jQuery(this).attr("href");
      jQuery('#target').trigger("jparallax", [ref]);
      return false;
          });
  
  });
  
  //-->
  </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>
  #target {
    height:expression(document.body.clientHeight-252);  
    width:expression(document.body.clientWidth-169);
  }
  <![endif]-->
  
  </head><body>
  
  <div id="header">
  <a href="http://webdev.stephband.info/index.html"><h1><img src="parallax-demos-target-files-logo_stephband_grey.png"></h1></a>
  </div>
  
  <div id="content">
  <h2>jParallax Demos <a href="http://webdev.stephband.info/parallax_demos.html">next</a></h2>
  </div>
  
  <div id="target">
          <div style="width: 2000px; height: 2000px; position: absolute; left: 44.1728%; margin-left: -883.456px; top: 41.5603%; margin-top: -831.206px;">
            <img src="lib-jquery-plugin-parallax-parallax-demos-target-files-target-blue.png" alt="">
    </div>
          <div style="width: 2000px; height: 2000px; position: absolute; left: 32.5184%; margin-left: -650.368px; top: 24.6809%; margin-top: -493.618px;">
      <img src="lib-jquery-plugin-parallax-parallax-demos-target-files-target-green.png" alt="">
    </div>
          <div style="width: 2000px; height: 2000px; position: absolute; left: 20.864%; margin-left: -417.28px; top: 7.80147%; margin-top: -156.029px;">
      <img src="lib-jquery-plugin-parallax-parallax-demos-target-files-target-red.png" alt="">
      <div style="position: absolute; top: 999px; left: 999px; width: 2px; height: 2px;">
        <a name="one"></a>
      </div>
    </div>
  <img src="lib-jquery-plugin-parallax-parallax-demos-target-files-corner-dark-tl.png" class="tl"><img src="lib-jquery-plugin-parallax-parallax-demos-target-files-corner-dark-tr.png" class="tr"><img src="lib-jquery-plugin-parallax-parallax-demos-target-files-corner-dark-bl.png" class="bl"><img src="lib-jquery-plugin-parallax-parallax-demos-target-files-corner-dark-br.png" class="br"></div>
  
  <div id="control">
  <a href="#one">centre</a>
  </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) _

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