Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/Victa/curtain.js

PROJECT IS NOT MAINTAINED - This plugin allows you to create a web page with multiple fixed panels that unroll with an amusing effect.
https://github.com/Victa/curtain.js

Last synced: 26 days ago
JSON representation

PROJECT IS NOT MAINTAINED - This plugin allows you to create a web page with multiple fixed panels that unroll with an amusing effect.

Host: GitHub
URL: https://github.com/Victa/curtain.js
Owner: Victa
Created: 2012-01-29T19:32:24.000Z (over 12 years ago)
Default Branch: development/v2.0
Last Pushed: 2015-12-22T08:50:07.000Z (over 8 years ago)
Last Synced: 2024-04-29T21:10:32.072Z (about 2 months ago)
Language: JavaScript
Homepage: http://curtain.victorcoulon.fr
Size: 4.54 MB
Stars: 1,083
Watchers: 80
Forks: 251
Open Issues: 16
Metadata Files:
- Readme: readme.md

Lists

my-awesome-starred - Victa/curtain.js - PROJECT IS NOT MAINTAINED - This plugin allows you to create a web page with multiple fixed panels that unroll with an amusing effect. (JavaScript)
awesome-github-repos - Victa/curtain.js - PROJECT IS NOT MAINTAINED - This plugin allows you to create a web page with multiple fixed panels that unroll with an amusing effect. (JavaScript)
my-awesome-starred - curtain.js - (THIS PROJECT IS NOT MAINTAINED ANYMORE) This plugin allows you to create a web page with multiple fixed panels that unroll with an amusing effect. (JavaScript)

README

        Curtain.js (The plugin is no longer maintained)

========================================

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](http://twitter.com/_victa) for any comments.



## Demonstrations

* [Demo website](http://curtain.victorcoulon.fr)

### Site using Curtain.js

* [http://sports.espn.go.com/espn/eticket/story?page=Dock-Ellis](http://sports.espn.go.com/espn/eticket/story?page=Dock-Ellis)

* [http://womenandtech.com/](http://womenandtech.com/)

* [http://iconic-furniture.com/](http://iconic-furniture.com/)

* http://btpdesign.com/

## Documentation

### Basic Usage

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

```html

  

```

And don't forget to add the base stylesheet

```html

```

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 ```` (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:

```html



     

        your content

    

    

         

            a fixed content

        

        [...]

    

    

       [...]

    

    

        

             ...  

             ...  

        

    



```

Then, you can launch the plugin:

```js

$(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"``.

```html



    ↑

    ↓



```

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

```js

$(function () {

    $('.curtains').curtain({

        scrollSpeed: 400,

        controls: '.menu'

    });

});

```

### Add a link to a specific panel

Simply add an id attribute to your panel:

```html



     

        your content

    

    [...]



```

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

```html



    [...]

    

       Go to first panel

    



```

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

```js

$(function () {

    $('.curtains').curtain({

        scrollSpeed: 400,

        curtainLinks: '.curtain-links'

    });

});

```

### Add callbacks to slide change events

You can fire a callback when the slide changes

```js

$('.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](http://victorcoulon.fr) or ping me on twitter http://twitter.com/_victa

### Contributors

* [Jordan Jefferson](https://github.com/jordanj77)

* [Francis Thomas](http://francisthomas.fr/)

* [John Brown](http://www.thisisjohnbrown.com/)

### Inspirations

* 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

Licence MIT