sailnote.js

A tiny and minimalist library that allows you to easily create a slideshow with HTML/JS

The HTML for the gif above is:

  <div class="sn-slide">sailnote is a</div>
  <div class="sn-slide" sn-id="fadeIn">minimalist</div>
  <div class="sn-slide">javascript library</div>
  <div class="sn-slide">that helps you</div>
  <div class="sn-slide">create beautiful cards</div>

Sailnote listens to mousescrolls, up/down key presses, and touch to navigate slides.

Usage

Have 'sn-slide' as a class on elements, and sailnote with turn them into full page slides.

To then initialize, simply do:

  Sailnote.init();

To be able to do certain things to a slide when it is scrolled to, put an sn-id attribute on the element:

  <div class="sn-slide" sn-id="example-fade-in">minimalist</div>

and listen for the 'enter' event, like so:

  Sailnote.on('enter', 'example-fade-in', function(slide){
    // hide slide so we can fade it back in
    slide.css('opacity', 0);
    
    slide.fadeIn(1000);
  });

the function will receive the element with the sn-id "example-fade-in" as an argument.

You can also listen for the 'leave' event.

API

There are two simple methods exposed if you want to use javascript to navigate slides.

to go to next:

  Sailnote.next();

to go back:

  Sailnote.back();

Dependencies

jQuery