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-type.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;}
  
  #parallax div div
    {font-family: Palatino, Georgia, Trebuchet MS, serif; font-size: 20em; line-height: 0.6em;}
  
  </style>
  
  <script type="text/javascript" src="lib-jquery-plugin-parallax-parallax-demos-type-files-jquery-1.js"></script>
  <script type="text/javascript" src="lib-jquery-plugin-parallax-parallax-demos-type-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('#parallax').jparallax({triggerExposesEdges: true}).append(corners);
                  
          jQuery('a.goto').click(function(){
      var ref=jQuery(this).attr("href");
      // console.log(ref);
      jQuery('#parallax').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>
  <![endif]-->
  <!--[if lt IE 8]>
  <style type="text/css">
  @import "lib-jquery-plugin-parallax-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-type-files-logo-stephband-grey.png"></h1></a>
  </div>
  
  <div id="content">
  
  <h2>jParallax Demos <a href="http://webdev.stephband.info/parallax_demos_target.html">next</a></h2>
  
  <div id="parallax" style="width: 60em; height: 320px;">
  
          <div style="width: 1200px; height: 640px; position: absolute; left: 19.4083%; margin-left: -232.899px; top: 0%; margin-top: 0px;">
      <div style="position: absolute; top: 280px; left: 200px; color: rgb(155, 192, 229);">
        <a name="j"></a>
        j
      </div>
    </div>
  
          <div style="width: 1800px; height: 420px; position: absolute; left: 19.4083%; margin-left: -349.349px; top: 0%; margin-top: 0px;">
      <div style="position: absolute; top: 180px; left: 340px; color: rgb(164, 197, 34);">
        <a name="P"></a>
        P
      </div>
    </div>
  
          <div style="width: 1400px; height: 460px; position: absolute; left: 19.4083%; margin-left: -271.716px; top: 0%; margin-top: 0px;">
      <div style="position: absolute; top: 140px; left: 380px; color: rgb(233, 148, 0);">
        <a name="a1"></a>
        a
      </div>
    </div>
    
    <div style="width: 2000px; height: 495px; position: absolute; left: 19.4083%; margin-left: -388.166px; top: 0%; margin-top: 0px;">
      <div style="position: absolute; top: 260px; left: 540px; color: rgb(181, 12, 12);">
        <a name="r"></a>
        r
      </div>
    </div>
    
    <div style="width: 1540px; height: 480px; position: absolute; left: 19.4083%; margin-left: -298.888px; top: 0%; margin-top: 0px;">
      <div style="position: absolute; top: 230px; left: 540px; color: rgb(233, 148, 0);">
        <a name="a2"></a>
        a
      </div>
      <div style="position: absolute; top: 220px; left: 900px; color: rgb(181, 12, 12);">
        <a name="x"></a>
        x
      </div>
          </div>
          
    <div style="width: 1800px; height: 480px; position: absolute; left: 19.4083%; margin-left: -349.349px; top: 0%; margin-top: 0px;">
      <div style="position: absolute; top: 170px; left: 800px; color: rgb(164, 197, 34);">
        <a name="l1"></a>
        l
      </div>
          </div>
          
    <div style="width: 1320px; height: 560px; position: absolute; left: 19.4083%; margin-left: -256.189px; top: 0%; margin-top: 0px;">
      <div style="position: absolute; top: 100px; left: 600px; color: rgb(164, 197, 34);">
        <a name="l2"></a>
        l
      </div>
          </div>
          
    <div style="width: 1400px; height: 460px; position: absolute; left: 19.4083%; margin-left: -271.716px; top: 0%; margin-top: 0px;">
      <div style="position: absolute; top: 120px; left: 740px; color: rgb(155, 192, 229);">
        <a name="a3"></a>
        a
      </div>
          </div>
  
  <img src="lib-jquery-plugin-parallax-:parallax-demos-type-files-corner-dark-tl.png" class="tl"><img src="lib-jquery-plugin-parallax-parallax-demos-type-files-corner-dark-tr.png" class="tr"><img src="lib-jquery-plugin-parallax-parallax-demos-type-files-corner-dark-bl.png" class="bl"><img src="lib-jquery-plugin-parallax-parallax-demos-type-files-corner-dark-br.png" class="br"></div>
  
  <a href="#j" class="goto"> j </a>.<a href="#P" class="goto"> P </a>.<a href="#a1" class="goto"> a </a>.<a href="#r" class="goto"> r </a>.<a href="#a2" class="goto"> a </a>.<a href="#l1" class="goto"> l </a>.<a href="#l2" class="goto"> l </a>.<a href="#a3" class="goto"> a </a>.<a href="#x" class="goto"> x </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) _
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.