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.
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.
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><script>
$('.fullBackground').fullClip({
images: ['images/winter.jpg'],
static: true
});
</script>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 |
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).