A modern replacement for jQuery.marquee

Overview

vanilla-marquee

Badge Badge Badge

An es5 vanilla-js implementation of jQuery.marquee

Installation

npm i vanilla-marquee

Usage

import marquee from 'vanilla-marquee'

new marquee( element, {
  options
})

Demo

https://mattiacoll.github.io/vanilla-marquee-site/


Differences between this plugin and jQuery.marquee

Although this plugin can be a drop in replacment for the jQuery plugin there are some caveats, which may be deal breaking:

  • allowCss3Support and easing options have been removed (all animations use the @keyframe implementation)
  • pauseOnCycle option has been removed, since it was available only when allowCss3Support was set to false
  • no IE and dead browser support, since we are in $currentYear I don't think it's necessary
  • this module is not transpiled for old browsers, you can transpile it yourself: example with rollup and babel
babel({
  babelHelpers: 'bundled',
  exclude:      '/node_modules/',
  include: [
    'src/**', // src folder
    /node_modules\/.+(vanilla-marquee|matt-utils)/,
  ]
}),
  • the methods can only be called with instance.method(), in the jQuery version they can be called using $( selector ).marquee( 'methodName' )
  • events are fired on the selector rathen than the instance

Documentation

All the options, methods and events have been moved to the Wiki page

How to contribute

Prerequisites

  • Install nodeJS: https://nodejs.org
  • Switch to the project root directory with the command-line.
  • Run npm install to install dependencies and create the virtual environment.

Making changes

  • Edit source code in the src folder.
  • Once ready, compile the package with npm run rl.
You might also like...

A Hackable Markdown Note Application for Programmers. Version control, AI completion, mind map, documents encryption, code snippet running, integrated terminal, chart embedding, HTML applets, plug-in, and macro replacement.

A Hackable Markdown Note Application for Programmers. Version control, AI completion, mind map, documents encryption, code snippet running, integrated terminal, chart embedding, HTML applets, plug-in, and macro replacement.

Yank Note A hackable markdown note application for programmers Download | Try it Online Not ecommended English | 中文说明 [toc]{level: [2]} Highlights

Dec 31, 2022

A drop in replacement for Hacker News with support for dark mode and more.

A drop in replacement for Hacker News with support for dark mode and more.

Worker News A drop in replacement for Hacker News with support for dark mode, quotes in comments, user identicons and submission favicons. What's cool

Dec 31, 2022

A Drop-in Jalali Replacement for filament DateTimePicker

Filament Jalali Date Time Picker Field This package is a Drop-in replacement for DatePicker and DateTimePicker field type you just need to replace tho

Dec 3, 2022

Pretty, customisable, cross browser replacement scrollbars

jScrollPane - cross browser custom scroll bars jScrollPane is a jQuery plugin which allows you to replace a browser's default scroll bars (on an eleme

Dec 15, 2022

Lightweight plugin for easy responsive images replacement

Responsive image replacement Check out the example here. resonsive-img.js is a lightweight plugin for fast, clean and easy responsive image replacemen

Sep 20, 2022

An efficient drop-in replacement for JSON.

An efficient drop-in replacement for JSON.

JCOF: JSON-like Compact Object Format A more efficient way to represent JSON-style objects. Status This format isn't nailed down yet. Most changes wil

Nov 26, 2022

A Cypress plugin that generates test scripts from your interactions, a replacement Cypress Studio for Cypress v10 🖱 ⌨

A Cypress plugin that generates test scripts from your interactions, a replacement Cypress Studio for Cypress v10 🖱 ⌨

DeploySentinel Cypress Recorder Plugin Create Cypress tests scripts within the Cypress test browser by simply interacting with your application, simil

Dec 15, 2022

shell script replacement; write shell scripts in js instead of bash, then run them with a single static binary

yavascript YavaScript is a bash-like script runner which is distributed as a single statically-linked binary. Scripts are written in JavaScript. There

Dec 29, 2022

This package is a replacement for superjson to use in your Remix app

This package is a replacement for superjson to use in your Remix app

This package is a replacement for superjson to use in your Remix app. It handles a subset of types that superjson supports, but is faster and smaller.

Jan 3, 2023
Comments
  • Blurry text/icons while marquee is scrolling

    Blurry text/icons while marquee is scrolling

    Hey! Well done on this package - fits my use case perfectly.

    Just had one little bug come up that might help others - icons and text show up blurry when the marquee starts scrolling.

    I was able to fix it with a line of CSS, might be useful to add a patch release eventually:

    .js-marquee {
      backface-visibility: hidden;
    }
    
    opened by dhunninghake 2
  • Detect wrapper resize on lazy loaded images

    Detect wrapper resize on lazy loaded images

    Thank you @mattiacoll for releasing vanilla-marquee. I like the available options, here are the ones I use in my latest project:

    const scroller = new marquee(el, {
    	duplicated: true,
    	speed: 80,
    	startVisible: true,
    });
    

    When the children element dimensions change after the initialization of this library, it is possible to observe skips, overlaps and large empty areas.

    Images that are lazy loaded result in their widths to be increased and this seems to break the animation. Firefox is especially prone to this, as it doesn't load anything below the fold (vs Chrome which is more lax and will try to load the images before they even come close to the viewport).

    EDIT: The refresh method works great, I'll be closing this issue.

    opened by datio 0
  • Gulp fails to import the library with babel 7 and preset-env

    Gulp fails to import the library with babel 7 and preset-env

    Doing import marquee from 'vanilla-marquee' fails in my project. Here is the stack trace:

    node_modules\vanilla-marquee\dist\vanilla-marquee.js:704
    export default marquee;
    ^
    ParseError: 'import' and 'export' may appear only with 'sourceType: module'
        at formatError (C:\Users\21267\AppData\Roaming\npm\node_modules\gulp\node_modules\gulp-cli\lib\versioned\^4.0.0\format-error.js:21:10)
        at Gulp.<anonymous> (C:\Users\21267\AppData\Roaming\npm\node_modules\gulp\node_modules\gulp-cli\lib\versioned\^4.0.0\log\events.js:33:15)
        at Gulp.emit (events.js:215:7)
        at Gulp.EventEmitter.emit (domain.js:476:20)
        at Object.error (C:\dev\envato\bulkit\bulkit-alpine\node_modules\undertaker\lib\helpers\createExtensions.js:61:10)
        at handler (C:\dev\envato\bulkit\bulkit-alpine\node_modules\now-and-later\lib\map.js:50:14)
        at f (C:\dev\envato\bulkit\bulkit-alpine\node_modules\once\once.js:25:25)
        at f (C:\dev\envato\bulkit\bulkit-alpine\node_modules\once\once.js:25:25)
        at tryCatch (C:\dev\envato\bulkit\bulkit-alpine\node_modules\async-done\index.js:24:15)
        at done (C:\dev\envato\bulkit\bulkit-alpine\node_modules\async-done\index.js:40:12)
    [15:38:34] 'dev' errored after 39 s
    
    opened by driss-chelouati 1
Releases(v1.1.2)
Owner
null
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
An easy to implement marquee JQuery plugin with pause on hover support. I know its easy because even I can use it.

Simple-Marquee Copyright (C) 2016 Fabian Valle An easy to implement marquee plugin. I know its easy because even I can use it. Forked from: https://gi

null 16 Aug 29, 2022
jQuery Plugin for Ticker, News Ticker with Vertical, Horizontal, Marquee and Typewriting effects

AcmeTicker - News Ticker A very lightweight jQuery plugin for creating advanced news ticker. Demo: Gutentor News Ticker Ticker Type Vertical Horizonta

Santosh Kunwar 11 Sep 3, 2022
Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mouse is over the marquee, and all with vanilla JavaScript.

TEG Marquee Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mou

Paul B. Joiner 0 Dec 30, 2021
Marquee is a VS Code extension designed to naturally integrate with your development flow, so that you will no longer lose track of your thoughts while you're coding

Marquee Stay organized with minimal context switching, all inside your Visual Studio Code. Marquee is a VS Code extension designed to naturally integr

stateful 60 Dec 13, 2022
Selectator is a jQuery-based replacement for select boxes

DEPRECATED - no longer actively maintained Selectator Selectator is a jQuery-based replacement for select boxes. It supports searching, custom rendere

KODIO 90 Dec 16, 2022
Automatic arxiv->ar5iv link replacement in Chrome.

Automatic arxiv->ar5iv link replacement in Chrome. This chrome extension will automatically replace arxiv.org/pdf/* links with ar5iv links for more we

yobi byte 44 Oct 29, 2022
Replacement for comma.ai backend and useradmin dashboard

Replacement for comma.ai backend and useradmin dashboard. Bundled with a modified version of comma's cabana to allow viewing & analyzing drives.

null 15 Jan 1, 2023