<div class="BgFix" style="background-image:url(urltoyourimage);
width:100%;
height:100%;
">
Your text
</div>
<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>
/*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>
/*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>
<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>
<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>
<div class="container-fluid nopad" style="background-color:#FFFFFF;
width:100%;
height:300%;
position:relatve;
overflow:hidden;
">
<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>
<div style="left:100px;
"></div>
<div style="left:100%;
"></div>
<div data-animation="left|60|100"></div>
<div data-animation="left|60|50%"></div>
<div data-animation="left|10%|60"></div>
<div data-animation="left|10%|60%"></div>
<div data-animation="left|10%|60%|50|bounce"></div>
<div data-animation="left|60|100|30|80"></div>
<div data-animation="[[rotate|0|720|0|80|regularout][left|100%|10%|0|80][top|0%|70%|0|80]]"></div>
<div class="container-fluid nopad" style="background-color:#FFFFFF;
width:100%;
height:300%;
position:relatve;
overflow:hidden;
">
<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>
<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>
<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>
<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>
<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>
<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;
">
</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>