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

HTML tables and auto-sizing cell heights : a workaround

Although this was common practice in the early days of the Web, working with HTML tables when it comes to building a webpage layout should be avoided as much as possible nowadays. CSS offers all the tools that are needed to create perfectly dynamic and flexible layouts, so you really should only rely on HTML tables to present actual data. This being said, it happens that you don't have the choice, and that this just what I've learned recently in my work. In the context of a client project, the framework I've had to use (Peoplesoft, an HRIS system) indeed generates HTML pages presenting a structure quite "2000"-ish, consisting in a complex nesting of HTML tables. Moreover, each time you add a component on the page (via the system itself, not when hardcoding it), a system TABLE is create to wrap the object. This can cause obviously a lot of problems, but in this case, my problem was quite specific. A few pages of the system use a well-defined table layout :
Enregistrer un commentaire
Lire la suite

Lightbox effect with jQuery (3) - ready-to-use library

I've been pretty busy with work over the past days, but I managed to finalize my lightbox javascript library still. Although I can't confirm it is 100% cross-browser, it seems to be running well under IE8/9, Firefox and Chrome. I reckon it should work as well on Safari, but you never know. The actual library and a sample HTML file can be found here: https://sourceforge.net/projects/delightbox/files/ How to use ? First, include jQuery and, needless to say, the library. Second, call the function init from dlb , once the DOM has been fully created and the page is ready. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="./delightbox-latest.js"></script>         <script>         jQuery(document).ready(function(){             dlb.init();         }); </script> Delightbox allows to create a lightbox e
Enregistrer un commentaire
Lire la suite

A binary clock in Javascript

Just a short post to share a tiny project I recently worked on: a binary clock. The script is written in pure Javascript (no jQuery for a change), and the design of the buttons was rapidly made in Photoshop, so nothing fancy...but I really wanted to create this :-) http://manuthommes.be/toolbox/binaryclock/ As usual, the code is not obfuscated so you can have a look and feel free to copy/edit.
Enregistrer un commentaire
Lire la suite