Curtain.js: jQuery plugin to create curtain effect on fixed pages

Curtain.js: jQuery plugin to create curtain effect on fixed pages

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 panel.

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.

Example

<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
    });
});

DocumentationDemo 1Demo 2Demo 3Download

Enjoyed this article? Subscribe to read more like it

 
 
 
 
 

Sponsors