Full Clip - fullscreen body background image jQuery plugin
Switch branches/tags
Nothing to show
Clone or download
bdimitrovski Merge pull request #1 from vyskoczilova/master
Transition on background only
Latest commit d006374 Nov 10, 2017

README.md

Full Clip - fullscreen body background image jQuery plugin

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.

Setup

Make sure you load jQuery first. Then, just before the end of your <body> tag, first include the Full Clip plugin:

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

In your markup, load a div which will contain a background, preferably inside a container, e.g:

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

where fullBackground is the element containing the images.

Customized slideshow example

The power of this plugin is in its simplicity. You can easily make a slideshow of background images just by specifying them in the array:

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

Static background example

<script>
$('.fullBackground').fullClip({
  images: ['images/winter.jpg'],
  static: true
});
</script>

Options

The following options are available for more control over the plugin behaviour:

Name Description Type Default
images Array of background images that you wish to cycle through. Array []
transitionTime The speed at which the images will transition, expressed in ms. Integer 1000
wait Delay between transitions. Also expressed in ms. Integer 3000
static Use this option if you only specify one image in the array to make the background image static. Boolean false

Styling

To ensure that the images you load will actually be full page, you need to put this in your CSS:

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

For the most optimal effect, ensure that all your images are of the same dimensions (e.g. 1920 x 1080).

Image credits

https://unsplash.com