Using FullClip(jquery plug-in) to switch between backgrounds

Recently I've started working more with Jquery and Plug-ins that Jquery has to offer like SuperSlides, EasyPieChart, CountUp.
Trying some of them made me come across one that is pretty handy, and easy to set up, and its call FullClip.

About Full Clip

This simple plugin does only one thing and it does it well - it creates a responsive full-screen body background image by specifying the desired image whether it is a local or remote one. Also, it can create a beautiful background image slideshow by specifying an array of images.
via GitHub

Set up

The set-up for the plugin is quite simple, the first thing we have to do is to download it from the GitHub Repo.
After downloading the files from repo, we will get the following files

The files we need are in the src folder

Copy both files to your root folder and link the fullclip.js to your index file and you're ready to go

<script src="fullclip.js"></script>

Coding with the PlugIn

I will use some simple examples on how to use the PlugIn.
First, we will create in the Html a simple container and a class with the name .fullBackground

<section class="container">
  <div class="fullBackground"></div>
  <h2 class="caption">The future is now</h2>
</section>

Styling

After setting up the Html, we will need some styling in the CSS, you can set up your section or header as you wish, I will use this only as an example.

.fullBackground {
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Jquery Code

In the code, we have set up an array of images that will be used as a slideshow.
We can set up the transition time and the delay of transition between images.
In the end, it is up to you to customize it for your needs 🙂

$('.fullBackground').fullClip({
  images: ['images/house.jpg', 'images/road.jpg', 'images/winter.jpg'],
  transitionTime: 1000,
  wait: 7000
});

To see the full effect of the plugin and how it works, you can download the official Repo from GitHub.
Also, I have a template that I've made with FullClip that you can also download from my GitHub Account😊

Hope that you enjoyed reading this, and if you have more recommendations for a plugIn that you think It's useful, make sure to let me know 😊