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

//Add this after your you include your jQuery
<script type="text/javascript" src="path/jquery.queryloader2.js"></script>

Then, call it in your Main JS like this:

1
2
3

$(document).ready(function () {
    $("body").queryLoader2();
});

To make it work for iOS devices, use this code:

1
2
3

window.addEventListener('DOMContentLoaded', function() {
    $("body").queryLoader2();
});

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

//Add this after your you include your jQuery
<script type="text/javascript" src="path/jquery.smoothscroll.js"></script>

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

//Add this after your you include your jQuery
<script type="text/javascript" src="path/waypoints.min.js"></script>

Then, in your Main JS like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//this is the code how I use it in my Aura theme

//calling the container class or id
$('.client-logo').waypoint(function(event, direction) {
  //the effect you want to do 
  $(this).addClass("animated fadeIn").css("visibility", "visible");

  }, {
  //adding offset to make adjust more the window reach point
  offset: function() {
      var clientoffset = $(this).data('scoffset');
      return $.waypoints('viewportHeight') - $(this).outerHeight() - clientoffset;
  }
});

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

//Add this after your title tag
<script type="text/javascript" src="path/font-awesome.min.css"></script>

Sample code using Font Awesome Icon:

1

<i class="fa fa-arrow-up"></i>

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

//Add this after your title tag
<script type="text/javascript" src="path/animate.css"></script>

3. Bootstrap

I have a previous post about bootstrap, you can read it to know how i use bootstrap or click here.

A total of 6 plugin that I used to create the Aura theme. Click here so you can see the output. Thanks! - @AJ