If you have visited the jQtouch websites, you may have come across the demo section which displays all the impressive animations and features jQtouch is capable of.
If you have visited the jQtouch websites, you may have come across the demo section which displays all the impressive animations and features jQtouch is capable of.
Please note that these animations only work with Safari and mobile Safari because of the way Apple uses the webkit.
By default jQtouch comes with eight built in animations, slide, slideup, dissolve, fade, flip, pop, swap, and cube.
In this tutorial we will be covering how to add these animations into your jQtouch website.
An example of this can be found below at the jQtouch website, please ensure you are using Safari
Please note that all animations are handled with css3, their classes and of course jQuery.
Now when ever an animation occurs, two animations take place. One for fading out and one for fading in the new page.
I will use the same website I built in the basics tutorial.
To use the cube animation you first must add: cubeSelector: ‘.cube’ to your javascript at the top. The class cube can be changed to anything.
After you must add class=”cube out” to the first page and class=”cube in” to the second page.
Below is a list and the selectors of each built in animation:
By default the links in lists are set to slide to the next page.
Below is an image of the source code for the cube animation:
Whats really cool about jQtouch is it allows you to create and use custom animations.
The animations are created with the thanks of the webkit which the iPhone and the iPad fully support.
Below is a script for a simple reveal animation.
<script>
var jQT = new $.jQTouch();$(function(){
jQT.addAnimation({
name: 'reveal',
selector: '.revealme'
});
});
</script><style>
.reveal.in {
-webkit-animation-name: dontmove;
z-index: 0;
}.reveal.out {
-webkit-animation-name: revealout;
z-index: 10;
}.reveal.out.reverse {
z-index: 0;
-webkit-animation-name: dontmove;
}.reveal.in.reverse {
z-index: 10;
-webkit-animation-name: revealin;
}@-webkit-keyframes revealin {
from { -webkit-transform: translateX(100%); }
to { -webkit-transform: translateX(0); }
}@-webkit-keyframes revealout {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(100%); }
}
</style>
Next you simply add the class “reveal in” to the second page and “reveal out” to the first page.
Its that simple, try playing around with these animations to get used to them, they are very easy to use and implement into your jQtouch websites.
