JASE V 4.0
Loading...
JASE V 4.0
AND PARALLAX FOR DESIGNERS

ENTER

Talk about Jase
talk about
Jparallax

Jparallax

Easy to use Javascript library, even for non coders.
Jparallax solved a lot of known issues with parallax. As Jase itself it works as standalone or Jquery and Bootstrap. One Big issue was Image fixing with mobile devices. So alot of parallax designs has to be developed twice. A version for desktop and one for mobiles.
Let's go thru it step by step.
Please select what you want to see first, or scroll down to see everything

Demonstration of image fixing

Please select... (or scroll down)
  • Fixed image
  • Fixed image (HOW TO)
  • Smoothscrolling
  • Smoothscrolling (HOW TO)
  • Smooth image animation
  • Smooth image animation (HOW TO)
  • Smoothing without images
  • Smoothing without images (HOW TO)
Fixed image

Fixed Images

A common way for parallax. With jparallax also available for apple mobile devices.
Thats how to use it 

 
<div class="BgFix"  style="background-image:url(urltoyourimage);
 width:100%;
  height:100%;
">
Your text
</div>
Or with more images and content in between 

 
<div class="BgFix"  style="background-image:url(urltoyourimageA);
 width:100%;
  height:100%;
">
Your text
</div>
<div>Your content in between</div>
<div class="BgFix"  style="background-image:url(urltoyourimageB);
 width:100%;
  height:100%;
">
Your text
</div>
Description
Jparallax comes with some css classes. In this case it's "imageFixed"
.imageFixed{
    position:relative;
    height: 100%;
    background-attachment: fixed;
    background-position: center;   
    background-repeat: no-repeat;   
    background-size: cover;
   }
which is normal to use for non mobiles (or better non apple mobiles).
Apple won't play the game others play and it gets worse. Thats way you should use "BgFix" instead of "imageFixed". By adding BgFix, Jparallax checks for your device. If it's not an iphone or ipad etc. Jparallax adds imageFixed by itself. Otherwise Jparallax do what its made for. Fix it.

NOTICE

Jparallax works. But some animations on this page are'nt smooth as they supposed to be. Especially with safari and Internet Explorer. The reason is simple. I show everything Jparallax can do in only one page.
In Other words: Your CPU work up a sweat.
For your regular use, everything should be fine.
Fixed image

What about a smooth scrolleffect

Scroll down.
Scrolls up

Vertical scroll with fullrange (read more below)

Scrolls up

And horizontal

Scrolls left

Horizontal scroll with halfrange (read more below)

Scrolls right

Smooth scrolled images

It's easy...
Thats how to use it 

 

/*Horizontal with halfrange (smoothleft)*/
<div style="background-color:#FFFFFF;
 color:#303030;
 width:yourwidthvalue;
 overflow:hidden;
 height:yourheightvalue">
<img  class="smoothleft halfrange"  width="doubleofparentelementwidth" src="urltoyourimage" />
<div class="smoothcontent">Your content</div>
</div>
Or vertical 

 
/*Vertical with fullrange (smoothtop)*/
<div style="background-color:#FFFFFF;
 color:#303030;
 width:yourwidthvalue;
 overflow:hidden;
 height:yourheightvalue">
<img  class="smoothtop fullrange"  height="doubleofparentelementheight" src="urltoyourimage" />
<div class="smoothcontent">Your content</div>
</div>
Description
Jparallax has 4 different classes to move your images.
But first of all
As you see, you have to put your image element within your parent element instead of just using "background-image".
The reason is simple. This classes are made for effects with more than one image (as you're going to see below).

Lets go thru the classes
  • "smoothtop" Your image scrolls from bottom to top. (image element height must overstep image parent height)
  • "smoothbottom" Your image scrolls from top to bottom. (image element height must overstep image parent height)
  • "smoothleft" Your image scrolls from right to left. (image element width must overstep image parent width)
  • "smoothright" Your image scrolls from left to right. (image element width must overstep image parent width)
Now you may specify how, when and how long your image will move by scrolling
  • "As default (no class for this)" Your image starts moving when your image parent element hits the top of your Browser and ends when your image parent element hits bottom the top of your Browser again and backwards.
  • "fullrange" Your image starts moving when your image parent element hits the bottom of your Browser and ends when your image parent element bottom hits the top of your Browser and backwards.
  • "halfrange" Your image starts moving when your image parent element hits the middle of your Browser and ends when your image parent element bottom hits the middle of your Browser again and backwards.
Multiple Smooth

How to do this


 
<div class="container-fluid nopad" style="background-color:#FFFFFF;
 color:#303030;
 width:100%;
 overflow:hidden;
 height:80%">
<img  class="smoothtop fullrange"  height="110%" src="images/mountlong.jpg" />
<img  class="smoothleft fullrange"  width="150%" src="images/clouds.png" />
<img  class="smoothtop fullrange"  height="140%" src="images/mountainbefore.png" />
<div class="oswald center smoothcontent $.load {lineheightcenter}" style="font-size:40px;
 color:#303030;
"><b>Multiple Smooth</b></div>
</div>
What is oswald? And what center and nopad? And what the h... is $.load {lineheightcenter}?

Well oswald (font oswald), center (text-align:center), nopad (no padding) are just css classes which are not included in Jparallax. But "$.load {lineheightcenter}" is. Read more about the $.load attribute under Jase. "lineheightcenter" is just a function of Jparallax that keeps the vertical align in center.

Leave images

but stay on smoothing for a last example
smoothtop,smoothleft,smoothbottom and smoothright also works with regular div elements as well as fullrange and halfrange.

90%

70%

60%

How to do this


 
<div id="divsmooth" class="container-fluid oswald nopad"  style="position:relative;
 background-color:#FFFFFF;
 height:200%;
 width:100%;
 overflow:hidden;
">
<div id="diagra" class="innerfixedStall" style="height:90%;
 top:60px;
   width:100%;
 overflow:hidden;
">
    <div class="smoothtop" style="height:150%;
 width:5%;
 overflow:hidden;
 left:5%;
"><div class="center" style="position:relative;
 top:30%;
 width:100%;
 height:100%;
 background-color:#FF0000;
 color:#000000;
"><br />90%</div></div>
    <div class="smoothtop" style="height:150%;
 width:5%;
 overflow:hidden;
 left:35%;
"><div class="center" style="position:relative;
 top:40%;
 width:100%;
 height:60%;
 background-color:#000099;
 color:#000000;
"><br />70%</div></div>
    <div class="smoothtop" style="height:150%;
 width:5%;
 overflow:hidden;
 left:65%;
"><div class="center" style="position:relative;
 top:50%;
 width:100%;
 height:80%;
 background-color:#00FF00;
 color:#000000;
"><br />60%</div></div>
</div>
</div>
(innerfixedStall keep it on top while scrolling)

Lets go more precise in animation

%

DATA ANIMATION (the data attributes)

 
Rotating square
BOUNCING BALL

How to do this


 
<div class="container-fluid nopad" style="background-color:#FFFFFF;
 width:100%;
 height:300%;
 position:relatve;
 overflow:hidden;
">&nbsp;
<div class="content_inset_shadow innerfixedStall" style="position:relative;
 top:60px;
 left:5%;
 width:90%;
 background-color:#999999;
 height:30%;
 overflow:hidden;
">
<div style="position:absolute;
 color:#333333;
 left:100%;
 top:0%;
 width:120px;
 height:120px;
 background-color:#009999;
 color:#00CC00;
 text-align:center;
 line-height:120px;
 font-size:20px;
" class="fullrange"  data-animation="[[rotate|0|720|0|80|regularout][left|100%|10%|0|80][top|0%|70%|0|80]]"><b>Rotating square</b></div>
<div style="position:absolute;
 color:#333333;
 left:10%;
 top:30%;
 font-size:40px;
" class="halfrange"  data-animation="flip3Dy|0|360|0|50"><b>BOUNCING BALL</b></div>
<div id="aniball" style="position:absolute;
  background-color:#FF0000;
" data-animation="[[left|0%|90%|0|100][top|0%|90%|0|50|bounceout]]"></div>
</div>
</div>
(innerfixedStall keep it on top while scrolling)

Explanation

You can animate every element by adding an "data-animation" attribute with your animation values seperated by Pipe (|).
For each animation you can add 6 differnet values. (TYPE|STARTVALUE|ENDVALUE|FROMPERCENTAGE|TOPERCENTAGE|EASETYPE)

TYPE

List of possible animation types
  • left Moves your element horizontal from left
  • top Moves your element vertical from top
  • bottom Moves your element vertical from bottom
  • width Width of your element
  • height Height of your element
  • opacity Opacity of your element
  • rotate Rotation of your element
  • flip3Dx Flips your element on x Axis with perspective
  • flip3Dy Flips your element on y Axis with perspective
  • flipx Flips your element on x Axis without perspective
  • flipy Flips your element on y Axis without perspective
  • number Writes a number from startnumber to endnumber in your element. (E.g. for diagrams)

STARTVALUE & ENDVALUE

Value from where your animation starts and where it ends
If you're using left,top,bottom,width or height as type, you may add a % to your number. Without % it will be handled with pixel. With % as %.
Like 

 
<div style="left:100px;
"></div>
and 

 
<div style="left:100%;
"></div>

Examples

Move your element horizontally from 60 Pixel to 100 Pixel 

 
<div data-animation="left|60|100"></div>
Move your element horizontally from 60 Pixel to 50% 

 
<div data-animation="left|60|50%"></div>
Move your element horizontally from 10% to 60 Pixel 

 
<div data-animation="left|10%|60"></div>
Move your element horizontally from 10% to 60% Pixel 

 
<div data-animation="left|10%|60%"></div>

FROMPERCENTAGE & TOPERCENTAGE

Value [only numbers] from where your animation starts and where it ends by scrolling
By scrolling your parent element a percentage is calculated from 0 to 100. (Remember "fullrange", "halfrange" or default?)

FROMPERCENTAGE is optional and has a default value of 0. TOPERCENTAGE is optional as well and has a default value of 100.
But always keep the straight chain
If you don't set FROMPERCENTAGE, you can't set TOPERCENTAGE or EASETYPE. If you don't set TOPERCENTAGE, you can't set EASETYPE.

This will result in an error: 

 
<div data-animation="left|10%|60%|50|bounce"></div>

Example

Move your element horizontally from 60 Pixel to 100 Pixel between scrolling of 30 and 80%; 

 
<div data-animation="left|60|100|30|80"></div>

EASETYPE

Optional. Default is NULL. Read more about easing under Jmation
List of possible easeing types
  • "backease" or "backeasein" or "backeaseout" or "backeaseinout"
  • "easenone" or "easein" or "easeout" or "easeinout"
  • "strong" or "strongin" or "strongout" or "stronginout"
  • "regular" or "regularin" or "regularout" or "regularinout"
  • "elastic" or "elasticin" or "elasticout" or "elasticinout"
  • "bounce" or "bouncein" or "bounceout" or "bounceinout"
You can add as many animations to an element as you want by nesting theme in [ and ] and nest all as well in [ ];

Example


 
<div data-animation="[[rotate|0|720|0|80|regularout][left|100%|10%|0|80][top|0%|70%|0|80]]"></div>

Let's go step by step thru the demo above


 
<div class="container-fluid nopad" style="background-color:#FFFFFF;
 width:100%;
 height:300%;
 position:relatve;
 overflow:hidden;
">
container-fluid is a bootstrap class and has nothing to do with Jase or Jparallax. Google for bootstrap if you don't know what bootstrap is. Plus, you don't have to use bootstrap for using jparallax. But i did on american-webdesign.com.


 
<div class="content_inset_shadow innerfixedStall" style="position:relative;
 top:60px;
 left:5%;
 width:90%;
 background-color:#999999;
 height:30%;
 overflow:hidden;
">

Rotating Square


 
<div style="position:absolute;
 color:#333333;
 left:100%;
 top:0%;
 width:120px;
 height:120px;
 background-color:#009999;
 color:#00CC00;
 text-align:center;
 line-height:120px;
 font-size:20px;
" class="fullrange"  data-animation="[[rotate|0|720|0|80|regularout][left|100%|10%|0|80][top|0%|70%|0|80]]"><b>Rotating square</b></div>

"fullrange" as explained above. We'll go closer to this below.

data-animation="[[rotate|0|720|0|80|regularout][left|100%|10%|0|80][top|0%|70%|0|80]]"

Text "BOUNCING BALL"


 
<div style="position:absolute;
 color:#333333;
 left:10%;
 top:30%;
 font-size:40px;
" class="halfrange"  data-animation="flip3Dy|0|360|0|50"><b>BOUNCING BALL</b></div>

"halfrange" as explained above. We'll go closer to this below.

data-animation="flip3Dy|0|360|0|50"

BOUNCING BALL

I'll tell you how i did the ball. But first go thru this. 

 
<div id="aniball" style="position:absolute;
  background-color:#FF0000;
" data-animation="[[left|0%|90%|0|100][top|0%|90%|0|50|bounceout]]"></div>
</div>
</div>
data-animation="[[left|0%|90%|0|100][top|0%|90%|0|50|bounceout]]"

But as promised, that's how i made the ball itself

Jase comes with the librarys Jmation and Jcss as default. Jcss has a prototype function called "addRadius". So Object.addRadius(50) will round the object by a radius of 50. (Best way for a circle is using the same value for height, width and radius.

Also Jcss comes with a prototype function called "gradiation". So Object.gradiation(attributeobject) fills the background with your defined gradiant colors.

Jase itself can store functions for different events as e.g. window.onload, onresize, onorientationchange and so on. I stored a function for onresize to calculate the width, height and radius (same value) for my ball relative to it's parent element. Because i've needed that ball always with exact 10% width and height. Even by resiing the window.

But read more about Jase and the other librarys in their sections of american-webdesign.com.
Let's
FLY

Ready for takeof with flyover

What is parallax without flyover elements? !NOTHING!. While other parallax systems failed (even some popular JQuery plugins) with some mobiles, Jparallax works.

And it's easy No coding knowledge necessary if you know about html and css. Jparallax classes "flybase", "flyhalf" and "flyover" do the trick.

First talk about "flybase" and "flyover"

flybase and flyover belongs together but on two different elements. A element with the class flybase will be overflown by an element with class flyover.

But keep on with the straight chain

Elements with flybase and flyover as well will be stored in an array. Only elements with a related flybase element will fly.
In other words: ElementA with flybase,ElementB with flybase,ElementC with flybase,ElementD with flybase and
ElementE with flyover,ElementF with flyover,ElementG with flyover,ElementH with flyover,ElementI with flyover will comes to this:

ElementE flys over ElementA, ElementF flys over ElementB, ElementG flys over ElementC, ElementH flys over ElementD and guess what...
ElementI flys nowhere because of an missing flybase.
It's that simple.

Lets talk about "flyhalf"

Add flyhalf to that flyover element where you want the flyover starts on absolute top of it's flybase. (As i did on this page. Remember the very first black sheet with the enter button in it?) Of course you should not put any content in that flybase element. Because the flyover will always be over it unless your flyover height is smaller than your flybase height.

Take a look at the core


 
<div class="flybase" style="width:100%;
 height:100%">FLYBASE ELEMENTA</div>
<div class="flyover" style="width:100%;
 height:100%">FLYOVER ELEMENTE OVER ELEMENTA</div>
<div class="flybase" style="width:100%;
 height:100%">FLYBASE ELEMENTB</div>
<div class="flyover" style="width:100%;
 height:100%">FLYOVER ELEMENTF OVER ELEMENTB</div>
<div class="flybase" style="width:100%;
 height:100%">FLYBASE ELEMENTC</div>
<div class="flyover" style="width:100%;
 height:100%">FLYOVER ELEMENTG OVER ELEMENTC</div>
<div class="flybase" style="width:100%;
 height:100%">FLYBASE ELEMENTD</div>
<div class="flyover" style="width:100%;
 height:100%">FLYOVER ELEMENTH OVER ELEMENTD</div>
Of course you can put any other elements in between 

 
<div class="flybase" style="width:100%;
 height:100%">FLYBASE ELEMENTA</div>
<div>I am another element</div>
<div class="flyover" style="width:100%;
 height:100%">FLYOVER ELEMENTE OVER ELEMENTA</div>
<div class="flybase" style="width:100%;
 height:100%">FLYBASE ELEMENTB</div>
<div class="flyover" style="width:100%;
 height:100%">FLYOVER ELEMENTF OVER ELEMENTB</div>
<div>I am another element</div>
<div>I am another element</div>
<div class="flybase" style="width:100%;
 height:100%">FLYBASE ELEMENTC</div>
<div>I am another element</div>
<div>I am another element</div>
<div class="flyover" style="width:100%;
 height:100%">FLYOVER ELEMENTG OVER ELEMENTC</div>
<div class="flybase" style="width:100%;
 height:100%">FLYBASE ELEMENTD</div>
<div class="flyover" style="width:100%;
 height:100%">FLYOVER ELEMENTH OVER ELEMENTD</div>

Examples

How to


 
<div class="flybase" style="position:relative;
 font-size:20px;
 line-height:200px;
 text-align:center;
 width:100%;
 height:100%;
 background-color:#FFFFFF;
">FLYBASE ELEMENTA<div style="font-size:14px;
 line-height:14px;
">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div></div>
<div>I am another element</div>
<div class="flyover" style="position:relative;
 font-size:20px;
 line-height:50px;
 text-align:center;
 width:100%;
 height:50%;
 background-color:#CCCCCC;
">FLYOVER ELEMENTE OVER ELEMENTA</div>
<div class="flybase" style="position:relative;
 font-size:20px;
 line-height:200px;
 text-align:center;
 width:100%;
 height:height:200px;
 background-color:#FFFFFF;
">FLYBASE ELEMENTB<div style="font-size:14px;
  line-height:14px;
">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div></div>
<div class="flyover" style="position:relative;
 font-size:20px;
 line-height:50px;
 text-align:center;
 width:100%;
 height:50%;
 background-color:#CCCCCC;
">FLYOVER ELEMENTF OVER ELEMENTB</div>
<div>I am another element</div>
<div>I am another element</div>
<div class="flybase" style="position:relative;
 font-size:20px;
 line-height:200px;
 text-align:center;
 width:100%;
 height:100%;
 background-color:#FFFFFF;
">FLYBASE ELEMENTC<div style="font-size:14px;
  line-height:14px;
">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div></div>
<div>I am another element</div>
<div>I am another element</div>
<div class="flyover" style="position:relative;
 font-size:20px;
 line-height:100px;
 text-align:center;
 width:100%;
 height:60%;
 background-color:#CCCCCC;
">FLYOVER ELEMENTG OVER ELEMENTC</div>
<div class="flybase" style="position:relative;
 font-size:20px;
 line-height:200px;
 text-align:center;
 width:100%;
 height:100%;
 background-color:#FFFFFF;
">FLYBASE ELEMENTD<div style="font-size:14px;
  line-height:14px;
">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div></div>
<div class="flyover" style="position:relative;
 font-size:20px;
 line-height:100px;
 text-align:center;
 width:100%;
 height:30%;
 background-color:#CCCCCC;
">FLYOVER ELEMENTH OVER ELEMENTD</div>
<div style="position:relative;
width:100%;
 height:100%;
">I am another element</div>

And with flyhalf

How to


 
<div class="flybase" style="position:relative;
width:100%;
 height:50%;
 background-color:#FFFFFF;
">FLYBASE ELEMENTA</div>
<div>I am another element</div>
<div class="flyover flyhalf" style="position:relative;
 font-size:20px;
 line-height:50px;
 text-align:center;
 width:100%;
 height:100%;
 background-color:#CCCCCC;
">FLYOVER ELEMENTE OVER ELEMENTA</div>
<div class="flybase" style="position:relative;
 font-size:20px;
 line-height:200px;
 text-align:center;
 width:100%;
 height:height:200px;
 background-color:#FFFFFF;
">FLYBASE ELEMENTB<div style="font-size:14px;
  line-height:14px;
">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div></div>
<div class="flyover" style="position:relative;
 font-size:20px;
 line-height:50px;
 text-align:center;
 width:100%;
 height:50%;
 background-color:#CCCCCC;
">FLYOVER ELEMENTF OVER ELEMENTB</div>
<div>I am another element</div>
<div>I am another element</div>
<div class="flybase" style="position:relative;
 font-size:20px;
 line-height:200px;
 text-align:center;
 width:100%;
 height:100%;
 background-color:#FFFFFF;
">FLYBASE ELEMENTC<div style="font-size:14px;
  line-height:14px;
">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div></div>
<div>I am another element</div>
<div>I am another element</div>
<div class="flyover" style="position:relative;
 font-size:20px;
 line-height:100px;
 text-align:center;
 width:100%;
 height:60%;
 background-color:#CCCCCC;
">FLYOVER ELEMENTG OVER ELEMENTC</div>
<div class="flybase" style="position:relative;
 font-size:20px;
 line-height:200px;
 text-align:center;
 width:100%;
 height:50%;
 background-color:#FFFFFF;
">FLYBASE ELEMENTD</div>
<div class="flyover flyhalf" style="position:relative;
 font-size:20px;
 line-height:100px;
 text-align:center;
 width:100%;
 height:100%;
 background-color:#CCCCCC;
">FLYOVER ELEMENTH OVER ELEMENTD</div>
<div style="position:relative;
width:100%;
 height:100%;
">I am another element</div>

DATA FUNCTION

Till now, there was no need for coding. But of course you can. Jparallax gives you the opportunity to catch the value of user scrolling for each element and work with it. The return is a number between 0 and 100%. As before you may add halfrange and fullrange for different start and end values.

How to

Just add data-function="yourfunctionname" to your element.
For better understanding, here's a short example that do nothing else but writes the scrollvalue in percent into the element.

Just like this

 

The code


 
<script type="text/javascript">
function demofunc(ob,prz){
	    ob.HTML(Math.round(prz)+'% scrolled');
	}
</script>
<div class="container-fluid" style="position:relative;
 height:800px;
 width:100%;
 background-color:#CCCCCC;
">
<div style="position:relative;
 width:100%;
 height:300px;
 display:inline-block;
">&nbsp;
</div>
<div  style="position:relative;
 width:100%;
 height:50px;
  font-size:20px;
 line-height:20px;
  text-align:center;
 background-color:#006666;
 color:#FFFFFF;
" data-function="demofunc"></div>
</div>
It's that easy. Your function gets two parameters. First: The element with data-function, Second: The value in %.

CSS CLASSES with Jparallax

Jparallax comes with several css classes to work. Let's go thru.

Background images

  • "coverim" Does nothing else than set your background image size to cover mode
  • "imageFixed" Does nothing else than set your background image to a fixed position. It stays on scrolling. But it's strongly recommend to use "BgFix" instead
  • "BgFix" Does the same thing as "imageFixed". But jparallax take care, that your image is really fixed on all devices.

Smooth scrolling

  • "smoothtop" Element moves from bottom to top by scrolling. (Element must be higher than parent element)
  • "smoothbottom" Element moves from top to bottom by scrolling. (Element must be higher than parent element)
  • "smoothleft" Element moves from right to left by scrolling. (Element must be broaden than parent element)
  • "smoothright" Element moves from left to right by scrolling. (Element must be broaden than parent element)

Element fixing

  • "innerfixedStall" Does the same like BgFix, but with every element as long parent element is higher.

Scrolling

  • "halfrange" Calculation of scrolling starts (0%) when element top hits center of your browser window and ends (100%) when element bottom hits center of your browser window
  • "fullrange" Calculation of scrolling starts (0%) when element top hits bottom of your browser window and ends (100%) when element bottom hits top of your browser window
  • default (nothing given) Calculation of scrolling starts (0%) when element top hits top of your browser window and ends (100%) when element bottom hits top of your browser window

Apologize my english

That's not my native language. But the domain is american-webdesign.com. Im not american at all. But i almost have only clients from USA. So this domain usually contains demonstration of progress for client's projects. Now that i have a better solution for that, this domain came superfluous. But there is no domain with "Jase" available and i don't want to buy one for a free project. So this domain came back again for Jase.
But there's a contact form. Please use it for any questions. I will answer within 24 hours.

Questions or Job offers

Click to open contactform

Like or share this page