jQuery Plugin To Animate Background Image - Coverrr

jQuery Plugin To Animate Background Image -  Coverrr
File Size: 1.22 MB
Views Total: 2735
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Coverrr is a fancy jQuery plugin which allows to animate background-size:cover background images with infinite 'Back and Forth' scrolling effects.

How to use it:

1. Add a background image to a container element using CSS.

.element {
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(1.jpg);
}

2. Include jQuery library and the jQuery coverrr plugin at the end of the web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="dist/jquery.coverrr.js"></script> 

3. Call the plugin on the container element and set the duration, delay, and direction options for the scroll animation.

$(function() {
$(".element").coverrr({
  duration: 20,
  direction: 'alternate',
  delay: 0,
  timingFunction: 'ease-in-out',
  iterationCount: 'infinite'
});
});

Change log:

2014-10-21

  • Update the animation if our element changes its dimensions on window resize

This awesome jQuery plugin is developed by omulet. For more Advanced Usages, please check the demo page or visit the official website.