Scroller 1.0

The purpose of this Mootools plugin is to easily scroll a 'film' containg slide throught a 'window'.



Details

Author
Damien Degois
Current version
1.0
GitHub
babs/mootools-scroller
Downloads
2154
Category
Effects
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_:
    • core/1.2.4: '*'
    • more/1.2.4: 'Fx.Scroll'

How to use

JS

HTML

You will need a window div, a film div and some slides (without comments :D):

<!-- The window div (the one thought you see strip sliding) -->
<div id="scroll1" style="overflow: hidden; width: 215px; height: 100px; padding: 5px;">
    <!-- the 'film' containing slides -->
    <div>
    <!-- Slide #1 -->
        <div>
            aaa
        </div>

        <!-- Slide #2 -->
        <div>
            bbb
        </div>

    ...
    </div>
</div>

Class Elements

Creation

new Scroller(WindowObject, {options})
  • WindowObject: (html object) the scrolling viewport object (div element)

Options

  • duration: (integer) effect duration (ms)
  • selectBy: (string) child | class (def: child)
    • selecting by child, the scroller will use each child tags of the film as a slide
    • selecting by class, it will use as slide only child tags which classes contains 'slide'
  • autostart: (boolean) makes the slide start on init
  • autostart_dir: (string) forward | back (def: forward)
  • sleep: (integer) sleep time in ms beetween slide (in auto mode)
  • transistion: (string|transition object) animation algorythm for transition (see Fx.Fx documentation and Easing demo)
  • leftm: (interger) letf margin for micro adjustements
  • topm: (interger) top margin for micro adjustements

Methods

  • stop: stops the autoscroll
  • start(backward): starts the autoscroll
    • backward (opt boolean): if true, the slide goes backwards
  • next(stop): go to the next slide
    • stop (opt boolean): if true, it also stops the autoslide
  • prev(stop): go to the previous slide
    • stop (opt boolean): if true, it also stops the autoslide
  • updateTransition(options): Updates transition options and aply them
    • options (array): array conteining new values for options (duration and transition algorythm)

Requirements

Mootools core 1.2.4:

  • Core : [Core, Browser]
  • Native : [Array, Function, Number, String, Hash, Event]
  • Class : [Class, Class.Extras]
  • Element : [Element, Element.Style, Element.Dimensions]
  • Utilities: [Selectors]
  • Fx : [Fx]

Mootools more 1.2.4:

  • Fx.Scroll

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus