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

Libellés :

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

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

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(){             dl...
Enregistrer un commentaire
Lire la suite