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.
Feel free to fork the project on github or ping me on twitter for any comments.
- http://sports.espn.go.com/espn/eticket/story?page=Dock-Ellis
- http://womenandtech.com/
- http://iconic-furniture.com/
- http://btpdesign.com/
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.
Valid options for curtain.js are:
scrollSpeed- Adjust the scroll speed (default400)menu- Bind event on "up" or "down" button (defaultnull)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 (defaulttrue)easing- Change this option to specify the easing function used by jQuery animate calls. (defaultsswing) (You muse use jQuery easing plugin or similar to have more easing functions)
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
});
});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'
});
});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'
});
});You can fire a callback when the slide changes
$('.curtains').curtains({
nextSlide: function() { console.log('next slide'); },
prevSlide: function() { console.log('previous slide')}
});- Safari
- Firefox
- Chrome
- IE8/IE9
- iOs (iPhone/iPad) but the curtain effect is disabled
- Android (Chrome/Opera) but the curtain effect is disabled
- Remove panels dynamically
- Better android default browser support
- scroll horizontally
Victor Coulon or ping me on twitter http://twitter.com/_victa
- http://editsquarterly.com/
- http://www.interviewmagazine.com
- http://www.dbworks.pro/
- http://www.deuxhuithuit.com/en/
- http://www.madebygrave.com/
- http://www.boston.com/bigpicture/
Licence MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent