All Projects → joeycozza → marquee-ora

joeycozza / marquee-ora

Licence: MIT license
A tool to create an ora compatible spinner object that behaves like a scrolling marquee

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to marquee-ora

Txscrolllabelview
🌭TXScrollLabelView, the best way to show & display information such as adverts / boardcast / onsale e.g. with a customView.
Stars: ✭ 714 (+878.08%)
Mutual labels:  scrolling, marquee
body-scroll-freezer
↕️ Dependency-free JS module to freeze body scroll when opening modal box
Stars: ✭ 22 (-69.86%)
Mutual labels:  scrolling
Priority Nav Scroller
Priority Nav Scroller is a plugin for the priority+ navigation pattern.
Stars: ✭ 198 (+171.23%)
Mutual labels:  scrolling
Moveto
A lightweight scroll animation javascript library without any dependency
Stars: ✭ 2,746 (+3661.64%)
Mutual labels:  scrolling
Gravity View
Introducing Gravity View: Because swiping is so yesterday!
Stars: ✭ 200 (+173.97%)
Mutual labels:  scrolling
angular-inviewport
A simple lightweight library for Angular with no other dependencies that detects when an element is within the browser viewport and adds a "sn-viewport-in" or "sn-viewport-out" class to the element
Stars: ✭ 72 (-1.37%)
Mutual labels:  scrolling
Stickyfill
Polyfill for CSS `position: sticky`
Stars: ✭ 2,252 (+2984.93%)
Mutual labels:  scrolling
react-marquee
react无缝滚动组件
Stars: ✭ 27 (-63.01%)
Mutual labels:  marquee
RollingNotice-Swift
滚动公告、广告,支持灵活自定义cell。淘宝、口碑、京东、美团、天猫等等一切滚动广告 Roll Notice or Advertising, customize cell as UITableViewCell supported, Swift version is also ready
Stars: ✭ 109 (+49.32%)
Mutual labels:  marquee
Scrollstory
A jQuery plugin for building scroll-based stories
Stars: ✭ 249 (+241.1%)
Mutual labels:  scrolling
Vue Product Zoomer
Zoom Prodct Image, useful for e-shop website
Stars: ✭ 248 (+239.73%)
Mutual labels:  scrolling
V Bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
Stars: ✭ 216 (+195.89%)
Mutual labels:  scrolling
MHScrollingHeader
An Easy Way to Intergate Scrolling Header
Stars: ✭ 13 (-82.19%)
Mutual labels:  scrolling
Pageable
Create full page scrolling web pages. No jQuery.
Stars: ✭ 199 (+172.6%)
Mutual labels:  scrolling
scroll-sync-react
A scroll syncing library for react that is up to date
Stars: ✭ 49 (-32.88%)
Mutual labels:  scrolling
Scrollinglettersanimation
A switching title effect where a fixed element changes depending on the scroll position.
Stars: ✭ 197 (+169.86%)
Mutual labels:  scrolling
Smoothscrollanimations
Demo of a tutorial on how to add smooth page scrolling with an inner image animation
Stars: ✭ 238 (+226.03%)
Mutual labels:  scrolling
react-is-scrolling
Simply detect if users are scrolling in your components in a declarative API
Stars: ✭ 17 (-76.71%)
Mutual labels:  scrolling
ora
Bloq Ora multi-blockchain smart contract compute oracle and validation engine
Stars: ✭ 28 (-61.64%)
Mutual labels:  ora
render-props
㸚 Easy-to-use React state containers which utilize the render props (function as child) pattern
Stars: ✭ 33 (-54.79%)
Mutual labels:  scrolling

Build Status Maintainability

marquee-ora

A tool to create an ora compatible spinner object that behaves like a scrolling marquee

Install

npm install --save marquee-ora

Usage

This module is to be used in conjunction with ora the elegant terminal spinner.

const ora = require('ora');
const marquee = require('marquee');

const spinner = ora({
  text: 'This is a scrolling marquee',
  spinner: marquee({text: 'This marquee rocks!!'})
});

spinner.start();

setTimeout(() => {
  spinner.stop();
}, 3000);

This gif looks really slow, but the default interval isn't this bad, this is just the gif appearing slow This marquee rocks!! Scrolling

const ora = require('ora');
const marquee = require('marquee');

const spinner = ora({
  text: 'This is a scrolling marquee',
  spinner: marquee({
    text: 'Pause when fully in view',
    fullTextFrames: 15,
    interval: 50
  })
});

spinner.start();

setTimeout(() => {
  spinner.stop();
}, 3000);

Pause on Full Text

Options

text

type: String *required

Required text to be scrolled in the marquee

fill

type: String default=' '

The character to use for the empty space that isn't your text. Defaults to a single space, which looks pretty good.

fullTextFrames

type: Integer default=1

The number of frames to have the full text pause in the marquee. This option isn't valid if the viewWidth is smaller than the text length. (It makes no sense because the full text cant be displayed in this case)

viewWidth

type: Integer default=text.length

The character width for the marquee. If larger than text length, you will get padding of the fill. If smaller than text length, then you won't be able to see the full text at one time.

interval

type: Integer default=100

Number of milliseconds for each "frame" to be active. This is passed directly to ora's interval option

Example using All Options

const ora = require('ora');
const marquee = require('./index');

const spinner = ora({
  text: 'This is a scrolling marquee',
  spinner: marquee({
    text: 'Using lots of options',
    fullTextFrames: 8,
    viewWidth: 29,
    fill: '-',
    interval: 20
  })
});

spinner.start();

setTimeout(() => {
  spinner.stop();
}, 3000);

Using Many Options

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].