/curtain.js

This plugin allows you to create a web page with multiple fixed panels that unroll with an amusing effect.

Primary LanguageJavaScript

Curtain.js

This plugin allows you to create a web page with multiple fixed panels that unroll with an amusing effect. Exactly like a curtain rises.

To navigate, you can use your keyboard instead the scrollbar or mousewheel to navigate into the document. But that's not all, there is more features! For example, you can easily add a fixed element or multiple "steps" element inside a pannel.

I created this plugin for the website of my friend Etienne but we didn't use it. And I decided to deliver this one as an open source project. I would like you to note that the transition effect between two panels is extensively inspired by http://editsquarterly.com We were also such inspired by the following websites:

Feel free to fork the project on github or ping me on twitter for any comments.

Click here to lend your support to: Curtain.js and make a donation at www.pledgie.com !

Demonstrations

Site using Curtain.js

Send me your :)

Documentation

Basic Usage

Usage is very straightforward, simply include curtain.js file in the page, along with jQuery.

<script src="js/libs/jquery.js"></script>  
<script src="js/libs/curtain.js"></script>

And don't forget to add the base stylesheet

<link rel="stylesheet" href="curtain.css">

Then call $('.curtains').curtain(); to launch the plugin. You can add a set of optional options.

Options

Valid options for curtain.js are:

  • scrollSpeed - Adjust the scroll speed (default 400)
  • menu - Bind event on "up" or "down" button (default null)
  • curtainLinks - If you want add a <a> (or multiple) link to a specific panel simply add a class name to this option. Take a look of the example bellow.(default '.curtain-links')
  • enableKeys - Enable/Disable keyboard navigation (default true)
  • easing - Change this option to specify the easing function used by jQuery animate calls. (defaults swing) (You muse use jQuery easing plugin or similar to have more easing functions)

Example

Setup the correct element structure:

<ol class="curtains">
    <li class="cover"> 
        your content
    </li>
    <li>
        <div class="fixed"> <!-- if you need a "fixed" content -->
            a fixed content
        </div>
        [...]
    </li>
    <li class="cover">
       [...]
    </li>
    <li >
        <ul>
            <li class="step"> ... </li> <!-- Add the class "step" to an element to  -->
            <li class="step"> ... </li> <!-- make a break at this point with keyboard controls  -->
        </ul>
    </li>
</ol>

Then, you can launch the plugin:

$(function () {
    $('.curtains').curtain({
        scrollSpeed: 400
    });
});

Features

Add a "next" and "prev" link

Insert your menu in your html document. You must use href="#up" and href="#down".

<ul class="menu">
    <li><a href="#up">↑</a></li>
    <li><a href="#down">↓</a></li>
</ul>

Then, you can launch the plugin and specify the class of your menu.

$(function () {
    $('.curtains').curtain({
        scrollSpeed: 400,
        controls: '.menu'
    });
});

Add a link to a specific panel

Simply add an id attribute to your panel:

<ol class="curtains">
    <li id="myfirstpanel" class="cover"> 
        your content
    </li>
    [...]
</ol>

Then you can add a link anywhere to your first panel like:

<ol class="curtains">
    [...]
    <li class="cover">
       <a href="#myfirstpanel" class="curtain-links">Go to first panel</a>
    </li>
</ol>

Then, you can launch the plugin and specify the class of your links.

$(function () {
    $('.curtains').curtain({
        scrollSpeed: 400,
        curtainLinks: '.curtain-links'
    });
});

Add a new panel dynamically

You can add a new panel in your list dynamically. Simply use the public function called 'insert'.

var html = [
    '<h1>My New Panel!</h1>',
    '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>'
].join('');

$('.curtains').data('plugin_curtain').insert({
    html:html,
    htmlId: 'newpannel',
    htmlClass: 'cover',
    insertAfter:'#intro', // If null, the content is inserted at the end
    goTo: false // Go to the new panel directly after the insertion (default: true)
});

id, class, insertAfter and goTo attributes are optional.

Add callbacks to slide change events

You can fire a callback when the slide changes

$('.curtains').curtains({
    nextSlide: function() { console.log('next slide'); },
    prevSlide: function() { console.log('previous slide')}
});

Compatibility

  • Safari
  • Firefox
  • Chrome
  • IE8/IE9
  • iOs (iPhone/iPad) but the curtain effect is disabled
  • Android (Chrome/Opera) but the curtain effect is disabled

Roadmap

  • Remove panels dynamically
  • Better android default browser support
  • scroll horizontally

Credits

Author

Victor Coulon or ping me on twitter http://twitter.com/_victa

Contributors

Inspirations

Licence

Licence MIT