Accéder au contenu principal

jQuarax - a parallax plugin

This plugin is still in the making and complete documentation (as well as a downloadable package) will be available later. Sample code and quick variable explanation further below.

jQuarax-latest.js: 

var jquarax = {
  load: loader
};

function loader(){
  jQuery(document).ready(function(){
    // parallax script
    $(".jquarax-div-container").scroll(function(){
      scrollPos = parseInt($(".jquarax-div-container").scrollTop());
      scrollPosPC = (100/parseInt($(".jquarax-div-container").css("height")))*(parseInt($(".jquarax-div-container").scrollTop()));
      $(".jquarax-object").each(function(e){
        var unit = $(this).attr("frmode");
         if(unit=="%"){scrollPos=scrollPosPC;}
        var startIt = parseInt($(this).attr("frstart"));
        var stopIt = parseInt($(this).attr("frstop"));
        if(scrollPos>=startIt && scrollPos<=stopIt){
          var posY = parseInt($(this).css("top"));
          var movF = parseFloat($(this).attr("frmov"));
          var startPos = parseInt($(this).attr("stpos"));           
          var newPos = startPos + (movF*scrollPos);
          if(unit=="%"){
            $(this).css("top",newPos + "%");
          } else{          
            $(this).css("top",newPos + "px"); 
          }
        }else{
          $(this).css("top","99999px");
        }
      });
    });
  // smooth scrolling - found the code on the internet, I take no credit for this
    $('a[href*=#]').click(function(){
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
      && location.hostname == this.hostname){
        var $target = $(this.hash);
        $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
        if($target.length){
          var targetOffset = $target.offset().top;
          $(".jquarax-div-container").animate({scrollTop: targetOffset}, 1000);
          return false;
        }
      }  
    });  
  });
}

jQuarax.css:

.jquarax-div-container{
    width:100%;
    height:100%;
    overflow:auto;
    position:absolute;
}

.jquarax-container{
    width:100%;
    height:100%;
    overflow:hidden;
    position:absolute;
}

.jquarax-object{
    position:absolute;
    float:left;
    z-index: 500;
}

body, html, div{
    padding:0 0;
    margin:0 0;
    overflow:hidden;
}


Sample HTML code: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title></title>
     
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="jquarax-latest.js"></script>
        <link rel="stylesheet" type="text/css" href="jquarax.css"/>

         <script>jquarax.load();</script>

         <style>
        #divA{width:100%; height:100%; background: red;}
        #divB{width:100%; height:100%; background: blue;}
        #divC{width:100%; height:100%; background: orange;}
        #divD{width:100%; height:100%; background: green;}

            #frame{
               width:500px;height:500px;
          top:-50px;left:-150px;
          background: url(test1.png) no-repeat;
           }
        #frame2{
          width:500px;height:530px;
          top:1500px;right:-100px;
          background: url(test2.png) no-repeat;
        } 
        #frame3{
          width:280px;height:210px;
          top:9999px;left:10px;
          background: url(test3.png) no-repeat;
        }         
        </style>

      </head>
     <body>

     <div class="jquarax-container">
     <div class="jquarax-div-container">
         <div id="divA">
        <div style="margin:0 auto; width:640px; overflow:visible;">
        Lorem Ipsum [...]
        </div>
      </div>
         <div id="divB">Curriculum vitae</div>
         <div id="divC">Projects</div>
         <div id="divD">Find me</div>
     </div>
     <div id="frame" class="jquarax-object" frmov="1.76" frstart="0" frstop="9999" stpos="-50">&nbsp;</div>
     <div id="frame2" class="jquarax-object" frmov="0.6" frstart="500" frstop="9999" stpos="-550">&nbsp;</div>
     <div id="frame3" class="jquarax-object" frmov="0.2" frstart="200" frstop="9999" stpos="-50" frmode="%">&nbsp;</div>   
    </div>

      </body>
</html>


frmov = number of units to move per scroll movement
frstart = frame (position of scrollbar) at which the object should start moving
frstop = frame (position of scrollbar) at which the object should stop moving
stpos = start position of the object (Y position)
frmod = by default, pixels; since this can cause rendering to differ from one computer to another (screen resolution), percentages can be used (frmod="%"). In this case, all values mentioned above are calculated in terms of %
Libellés :

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

Date format matching regex

Regex is a must-learn for any programmer, plus it is always interesting to see how an apparently complex check can be done with a basic rule (...or how a simple check sometimes requires a long and obscure rule, but that's the whole fun of it :P). Here's a short and useful regex to match a date field (for instance when submitting a form). // expected field value format: YYYY-MM-DD var e = document.getElementById("myDateField").value; var m = e.match(/(20\d\d|19\d\d)\-(0\d|1[012])\-([012]\d|3[01])/); Breaking it down: / (20\d\d|19\d\d) \- (0\d|1[012]) \- ([012]\d|3[01]) / 1. Year (20\d\d|19\d\d) Trying to match either "20" followed by 2 digits (2000, 2001,2002,...2099) or "19" and then 2 digits (1900...1999). Would not match: 20a0, 201, 20AA 2. Month (0\d|1[012]) Trying to match either "0" followed by one digit (01...09) or "1" followed by 0, 1 or 2 (hence only 10,11 or 12). We assume here that the month must ...
Enregistrer un commentaire
Lire la suite

Reordering Javascript functions

If you have already injected some Javascript dynamically in a page (possibly because you cannot modify the original scripts directly), you may have realised the order in which Javascript functions are triggered is dependent on the order of declaration. Hence, if you try and bind a new "onclick" handler on a button for which another function has already been bound, the latter will be executed before yours. Here is a simple trick to reorder the order of execution.  Say your original code looks like so: <script> function showAlert(message){      alert(message); } </script> [...] <input type=text id="myButton" onClick="showAlert(this.value);" /> You can 't modify the HTML part and yet y ou want to execute a new function of your own before the alert message of showAlert is sent, for instance the following one: function changeMessage(newMessage){       document.getElementById("myButton").value=newMessage; ...
Enregistrer un commentaire
Lire la suite