search

aamirafridi / jQuery.Marquee

jQuery plugin to scroll the text like the old traditional marquee
http://aamirafridi.com/jquery/jquery-marquee-plugin
MIT License
961 stars 280 forks source link
animation css css3-support javascript jquery jquery-plugin marquee

readme

jQuery-Marquee with CSS3 Support

Known Vulnerabilities

A ~2KB MINIFIED + GZIPPED (minified) jQuery plugin to scroll the text like the old traditional marquee.

Install:

Links:

Options:

Events:

Methods:

These methods can be used like this:

Here is the list of all methods:

Usage:

Requiring in The Node.js Environment

Here's how to import the plugin as a CommonJS module:

var $ = require("jquery");
require("jquery.marquee");

HTML:

Usually you assign the marquee class to the desired element. Then you initialize it with an options hash in your code (see below).

<div class='marquee'>Lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>

Alternatively you can provide all the options listed above as data attributes:

<div class='marquee' data-duration='5000' data-gap='10' data-duplicated='true' >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit END.
</div>

CSS:

.marquee {
  width: 300px; /* the plugin works for responsive layouts so width is not necessary */
  overflow: hidden;
  border:1px solid #ccc;
}

How to Apply Plugin:

/**
 * Example of starting a plugin with options.
 * I am just passing some of the options in the following example.
 * you can also start the plugin using $('.marquee').marquee(); with defaults
*/
$('.marquee').marquee({
    //duration in milliseconds of the marquee
    duration: 15000,
    //gap in pixels between the tickers
    gap: 50,
    //time in milliseconds before the marquee will start animating
    delayBeforeStart: 0,
    //'left' or 'right'
    direction: 'left',
    //true or false - should the marquee be duplicated to show an effect of continues flow
    duplicated: true
});

How to Use in a React Component (Class-Based)

import React, { Component } from 'react';
import $ from 'jquery';
import  'jquery.marquee';

class Marquee extends Component {
  componentDidMount() {
    this.$el.marquee({
      duration: 15000,
      gap: 50,
      delayBeforeStart: 0,
      direction: 'left'
    });
  }

  render() {
    return (
      <div ref={(el) => this.$el = $(el)}>
        I'm using jQuery.Marquee with React!!!!
      </div>
    );
  }
}

How to Use in a React Component (Functional)

import React, { useEffect, useRef } from 'react';
import $ from 'jquery';
import  'jquery.marquee';

function Marquee(props) {
  const el = useRef();

  useEffect(function() {
    const $el = $(el.current);

    $el.marquee({
      duration: 5000,
      gap: 50,
      delayBeforeStart: 0,
      direction: 'left'
    });
  });

  return (
    <div ref={el}>
      I'm using jQuery.Marquee with React!!!!
    </div>
  );
}

How to Use Methods:

var $mq = $('.marquee').marquee();
$('.someLink').click(function(){
  $mq.marquee('pause/resume/toggle');
});

Change content and re-apply the plugin. Check demo page for example: http://aamirafridi.com/jquery/jquery-marquee-plugin#examples

$('.marquee')
    .bind('finished', function(){
        //Change text to something else after first loop finishes
        $(this).marquee('destroy');
        //Load new content using Ajax and update the marquee container
        $(this).html('Some new data loaded using ajax')
            //Apply marquee plugin again
            .marquee()
    })
    .marquee();

How to Use Events:

Check demo page for example: http://aamirafridi.com/jquery/jquery-marquee-plugin#examples

$('.marquee')
    .bind('beforeStarting', function () {
        //code you want to execute before starting the animations
    })
    .bind('finished', function () {
        //code you want to execute before after each animation loop
    })
    //Apply plugin
    .marquee({
        duration: 2000
    });

Images:

If you are using images in marquee, sometimes the plugin cannot calculate accurate widths while images are still loading. You can try this instead of $(document).ready(function(){...})

//if you have images in marquee
$(window).load(function() {
    $('.marquee').marquee();
});

Updates:

Update (8 Mar 2016): Now plugin have new option: startVisible The marquee will be visible in the start if set to true. Thanks to @nuke-ellington 👍

Update (24 Jan 2014):

Note: people who been asking me how to use this plugin with content being loaded with Ajax, please read notes about this update.

PLEASE report any bugs you find.

For details please check the demos at: http://aamirafridi.com/jquery/jquery-marquee-plugin#examples

Update (20 Dec 2013): Now the plugin will detect if browser supports CSS3 animations than it will animate the element using CSS3 which will perform much better than animating using jQuery.

The pauseOnHover also works using CSS3. The plugin just prepares the setup and required CSS3 animation CSS.

Due to some reasons if you want plugin to animate always using jQuery than you need to set allowCss3Support option to false. Also an extra option css3easing is added.

Check demo page for example: http://aamirafridi.com/jquery/jquery-marquee-plugin#examples

Update (27 Nov 2013): Easing option added. Requires jQuery easing plugin.

Update (22 Nov 2013): Now plugin supports the 'up' and 'down' directions. Please have a look at the example to see how to use.

Update (21 Aug 2013): If you want to hide the marquee for certain devices, try using visibility: hidden with height: 0 & position: absolute instead of display: none because jQuery cannot calculate with width etc of hidden elements. For more details:

Update (22 Feb 2013): pauseOnHover option added. Please note that you will need to include jQuery pause plugin: https://github.com/tobia/Pause before the jQuery Marquee plugin.

Update (20 Feb 2013):