Plugins Used in Creating Aura
Together with my co-trainee, our trainor gave us theme that we need to copy as an exercise. The theme that he gave to me is the Aura theme and in creating my own Aura theme I used some plugins to make it more attractive in users.
JS Plugins
1. Jqueryloader2
This is a loader that will show first before the content of the website appear. It is a loader that will wait if all the content of your website has been loaded like the images, videos and the text you put in.
To use the plugin all you need to do is download it here and connect it like the code below.
1 2 |
|
Then, call it in your Main JS
like this:
1 2 3 |
|
To make it work for iOS devices
, use this code:
1 2 3 |
|
2. Smoothscroll
This is a plugin that works with the mouse-wheel it makes a smooth effect when scrolling up and down in your website.
You can download the plugin here and connect it like the code below.
1 2 |
|
3. Waypoint
I use this to make a lazy load effect that when it reach the exact point or area of the browser window it will make an effect. For example you have a portfolio in you Homepage and you want an effect that the images will slide-up in their position when the browser window reach it, you can do that with this plugin, i am reffering to the point of the browser window that it will reach to activate the effect.
You can download the plugin here and connect it like the code below.
1 2 |
|
Then, in your Main JS
like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
CSS Plugins
1. Font Awesome
I use this CSS plugin for the icons only of Aura themes. You can download it here and connect like the code below.
1 2 |
|
Sample code using Font Awesome Icon:
1
|
|
2. Animate
This is the CSS3 animation, although you can create on your own I just download it, because it contain all the the effect and all I need to do is add the class like "animate"
, "fadeIn"
, "fadeUp"
and more. You can here and connect like the code below.
1 2 |
|
3. Bootstrap
I have a previous post about bootstrap, you can read it to know how i use bootstrap or click here.