Background Slideshow With Ken Burns Effect - jQuery subtle-slideshow.js

File Size: 12.1 KB
Views Total: 10113
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Background Slideshow With Ken Burns Effect - jQuery subtle-slideshow.js

subtle-slideshow.js is a jQuery plugin used for generating a responsive fullscreen slideshow from background images. With Ken Burns effects (subtle image zoom & pan effects) based on CSS3 transforms and animations.

See also:

How to use it:

1. Insert jQuery JavaScript library together with the stylesheet subtle-slideshow.css and JavaScript subtle-slideshow.js into the html file.

<link rel="stylesheet" href="subtle-slideshow.css" />
<script src="jquery.min.js"></script>
<script src="jquery.subtle-slideshow.js"></script>

2. Add background images to the a based slides and specify the animation type you want to use. All possible animation types:

  • out
  • in
  • down
  • up
  • right
  • left
<div id="slides">
  <a class="slide" title="Image 1" href="#">
    <span class="animate down" style="background-image: url(1.jpg)"></span>
  <a class="slide" title="Image 2" href="#">
    <span class="animate in" style="background-image: url(2.jpg)"></span>
  <a class="slide" title="Image 3" href="#">
    <span class="animate out" style="background-image: url(3.jpg)"></span>

3. Call the main function slideshow on the top container.


4. Customize the duration of the animation.

  slideDuration: 6000,
  fadeDuration: 1000

5. Determine whether or not to randomize the play order of the slides.

  randomize: true

6. Enable/disable the CSS animations.

  animate: true

7. Determine whether or not to pause the slideshow when lost focus.

  pauseOnTabBlur: true

8. Default CSS selectors.

  slideElementClass: 'slide',
  slideshowId: 'slideshow'

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