Tutorial 1: Jarallax basics

preface

In these tutorials we expect you to have some basic knowledge of HTML, CSS, Javascript and Jquery.

The basics of HTML and CSS can be learned at: w3schools.com
The basics of Javascript and Jquery can be learned at: jquery.com

html css preperations:

In this tutorial we will animate a background using the scroll bar.
Our body is:

<span class="jarallax_background"></span>
<p>
  {a long loremipsum text}
</p>

To make it all look nice i have used the following css for the background:

.jarallax_background{
margin-left:-650px;
width:1300px;
height:2000px;
position:fixed;
left:50%;
background: url(cloud.jpg);
display:block;
z-index:-1;
top:-500px;
}

p{
font-size:11px;
margin:20px auto;
width:50%;
max-width:300px;
min-width:100px;
padding:20px;
background:rgba(255,255,255,0.5);
}

The background has a fixed position so it can easily be moved without any aditional scrolling of the scrollbar. The width and height of the background are predefined. The z-index is -1, otherwise the background would be in the front of the text.

Jarallax code

To get started coding you should download and import Jquery and the Jarallax libraries

The Jarallax library is availible at the download page.
> The Jquery library is availible at the Jquery.com.

To create a Jarallax object a Jarallax class instance needs to be created:

var jarallax = new Jarallax()

This initializes Jarallax and stores it in the Jarallax variable. within the parentheses you can add the Jarallax controller, which won’t be demonsstrated in this tutorial. By default Jarallax uses the scroll controller on the body, which is the controller needed. The scroll controller will update the Jarallax animation based on the scrollbar position. It’s important that the body already scrolls when you want to use this controller.

To play animations with Jarallax one needs to be added first.
Jarallax uses the addAnimation method to apply animations to jarallax, like so:

jarallax.addAnimation(selector, [keys])

The selector can be any jquery selector.

for example:

p
.logo
#ball
h1, h2, h3, nav li

The Jarallax keys are a bit more complicated. Jarallax expects an array of keys to which it can react. Most of the time two keys are used.

[key1, key2, key,3, etc]

A Jarallax key is nothing more than an object with a progress attribute and additional CSS attributes.

{progress, css atribute1, css atribute2, etc}

Progress expects a string. like '50%'. This means that when the Jarallax animation is halfway, the css properties that follow will be applied to the selector. The CSS selectors work just like Jquery’s css method.

top will effect te top property marginLeft will effect margin-left etc.

a key could be:

{progress: '50%', top:'25px'}

an array of keys could look like:

[{progress: '0%', top:'25px'},
 {progress: '0%', top:'0px'},
 {progress: '0%', top:'25px'}]

So when things are put together for an animation sequence the code would be:

var jarallax = new Jarallax()
jarallax.addAnimation('.jarallax_background', 
                      [{progress:'0%', top:'0'},
                       {progress:'100%', top:'-500px'}])

Below is the result:

The background now scrolls slower than the text.
Add multiple Animations to jarallax to create a prallax scrolling effect.

Congratulations, you have implemented Jarallax.
More tutorials will be available soon.

Download result Example files