Code Monkey home page Code Monkey logo

jquery.simplemarquee's Introduction

jquery.simplemarquee

A jQuery plugin that aims to provide a scrolling marquee similar to the good old winamp player.
The main goal of this plugin is simplicity, so it has very little options but it works nicely.

Why?

I've tried jQuery.Marquee which provides similar functionality but:

  • It has unnecessary cruft to support older browsers
  • Does not use transform: translate(x,y) when moving text, causing unnecessary reflows
  • Has some bugs, the most important one leaks <style> tags because they are not removed on destruction

So I've decided to implement my own since it was an easy task anyway.

Demo

Check out the demo.
This same demo is available in the test/demo.html file.

API

.simplemarquee([options])

Setups the marquee with the given options.
Once initialized, you can't change the options.

Available options:

  • speed: The speed in pixels per second, defaults to 100.
  • direction: The direction, defaults to left (available: left, right, top and bottom)
  • cycles: Number of cycles before pausing, defaults to 1 (pass Infinity to cycle continously)
  • space: The space in px between the duplicated contents, defaults to 40
  • delayBetweenCycles: The delay between each cycle in ms, defaults to 2000
  • handleHover: Pause/restart on hover, defaults to true
  • handleResize: Update marquee on resize, defaults to true
  • easing: The timing function used for the CSS animation, defaults to linear
$('.some-el').simplemarquee();

If scrolling is not necessary, the plugin will add has-enough-space class to the element.

.simplemarquee('update', [restart])

Updates the marquee, including calculations made.
If restart is true, the cycles will be restarted.

$('.some-el').simplemarquee('update');

.simplemarquee('pause')

Pauses the marquee.
Emits a pause event.

$('.some-el').simplemarquee('pause');

.simplemarquee('resume')

Resumes the marquee.
Emits a resume event.

$('.some-el').simplemarquee('pause');

.simplemarquee('toggle')

Toggle between the pause/resume methods.

$('.some-el').simplemarquee('toggle');

.simplemarquee('destroy')

Destroy marquee, releasing all events and leaving the element just like it was before.

$('.some-el').simplemarquee('destroy');

Events

  • cycle - Fired before each cycle
  • finish - Fired when all cycles are done
  • pause - Fired when paused
  • resume - Fired when resumed

How to use

Simply include the jquery.simplemarquee.js file after jQuery is loaded.
This plugin also integrates with AMD (no shim required) and CommonJS.

This plugin makes use of CSS transforms, so it's usage is limited to IE >= 10.

Tests

No tests yet :(

jquery.simplemarquee's People

Contributors

satazor avatar seinopsys avatar andyleggett avatar

Watchers

keywindy avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.