Submit your widget

jQuery crossfading images as you scroll down page

Created 4 years ago   Views 16837   downloads 2305    Author mikefowler
 jQuery crossfading images as you scroll down page
View DemoDownload 549.3 KB
77
Share |

This is a tiny plugin for crossfading images as you scroll down a page with  jQuery .

And initialize it…

$(function () {

  $('.crossfade').crossfade(options);

});

Some things to keep in mind…

  1. The elements you initialize Crossfade.js on must be able to contain their children. Use CSS to set the position to “relative”, “absolute” or “fixed”, depending on your use case.
  2. Any content already inside the element you initialize Crossfade.js on will need to be set to “position: relative” to make sure it's visible above the injected<canvas> element:
    <div class="cover">
    
      <div class="cover-content" style="position: relative;">
        <h1>Make sure I'm above the background!</h1>
      </div>
    
      <!-- I get injected by crossfade.js -->
      <canvas></canvas> 
    
    </div>

Read more:https://github.com/mikefowler/crossfade.js