https://github.com/hakimel/stroll.js

CSS3 list scroll effects
https://github.com/hakimel/stroll.js

Last synced: 19 days ago
JSON representation

CSS3 list scroll effects

• Host: GitHub
• URL: https://github.com/hakimel/stroll.js
• Owner: hakimel
• License: mit
• Created: 2012-04-14T22:37:23.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2020-07-24T09:23:03.000Z (almost 4 years ago)
• Last Synced: 2024-05-01T22:47:35.212Z (21 days ago)
• Language: HTML
• Homepage: http://lab.hakim.se/scroll-effects
• Size: 110 KB
• Stars: 4,363
• Watchers: 187
• Forks: 732
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-javascript - stroll - A collection of CSS List scroll effects bind to dom through javascript. (Scroll / Other)
• awesome-frontend - stroll.js - CSS3 list scroll effects
• awesome-stars - hakimel/stroll.js - CSS3 list scroll effects (HTML)
• awesome-stars - stroll.js - CSS3 list scroll effects (HTML)
• awesome-stars - hakimel/stroll.js - CSS3 list scroll effects (others)
• awesome-frontend - stroll.js - CSS3 list scroll effects
• awesome-stars - hakimel/stroll.js - CSS3 list scroll effects (HTML)
• awesome-front-end - stroll.js - CSS3 list scroll effects
• awesome-frontend - stroll.js - CSS3 list scroll effects
• awesome-javascript-builds-project - stroll - A collection of CSS List scroll effects bind to dom through javascript. (Scroll / Other)
• awesome-stars - stroll.js
• my-stars - hakimel/stroll.js - CSS3 list scroll effects (HTML)

README

        
# stroll.js – because it scrolls, and trolls.

A collection of CSS list scroll effects. Works in browsers with support for CSS 3D transforms including a special touch-enabled mode for iOS & Android 4.x.

Curious about how this looks in action? [Check out the demo page](http://lab.hakim.se/scroll-effects/).

## Usage

The style of scroll effect is determined via the class that is set on the list. Once the class is set, stroll.js needs to be told to monitor that list via the bind method:

```javascript

// Bind via selectors

stroll.bind( '#main ul' );

// Bind via element reference

stroll.bind( document.getElementById( 'some-list' ) );

// Bind via array of elements / jQuery object

stroll.bind( $( '#main .some-list' ) );

```

You can provide an additional parameter with more options:

```javascript

// Makes stroll.js monitor changes to the DOM (like adding or resizing items). 

// This is taxing on performance, so use scarcely. Defaults to false.

stroll.bind( '#main ul', { live: true } );

```

To disable the effect on an already-bound list, you can use `stroll.unbind()`:

```javascript

// Same target options as stroll.bind

stroll.unbind( selector/element/array );

```

## History

#### 1.2 (master/beta)

- Mobile support (iOS/Android 4+)

- New effects

#### 1.1

- Optimizations

- New API

- New effects

#### 1.0

- Initial release

## Contributors

- [Paul Irish](https://github.com/paulirish) - Perf improvements

- [Felix Gnass](http://github.com/fgnass) - Perf improvements

- [Kilian Ciuffolo](http://github.com/kilianc) - Fly & Fly Reverse effects

- [Dave Arel](http://github.com/davearel) - Fade effect

- [Erick Daniszewski](http://github.com/edaniszewski) - Twirl Effect

## License

MIT licensed

Copyright (C) 2017 Hakim El Hattab, http://hakim.se