jQuery Plugin To Animate Background Image - Coverrr

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.