Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-dynamic-marquee

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-dynamic-marquee

Marquee component for Vue - repeatedly translate content across wrapper. Completely responsive to after-render changes with many options to customize.

  • 0.1.7
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Vue Dynamic Marquee

Build Status

Playground and Demo

A neat docs, demo and playground site can be found on https://yishaiberg.github.io/dynamic-marquee-playground/. The site code is open source if you would like to make any improvements.

Installation

	yarn add vue-dynamic-marquee
	// or 
	npm i vue-dynamic-marquee

Alternatively the component can be delivered via CDN

    <script src="https://cdn.jsdelivr.net/npm/vue-dynamic-marquee@0.x/dist/vue-dynamic-marquee.umd.min.js"></script>
    <script>
	    Vue.component('dynamic-marquee', window['vue-dynamic-marquee'])
    </script>

Usage

register globally

    //in main.js
    import DynamicMarquee from 'vue-dynamic-marquee';
    Vue.component('dynamic-marquee', DynamicMarquee);

or import locally

	<template>	
		<div>
			<dynamic-marquee>
			//your content to be animated
			</dynamic-marquee>
		</div>
	</template>

	<script>
	import DynamicMarquee from 'vue-dynamic-marquee';
	</script>

The slot contents will translate across the component's immediate wrapper. Take note that since the slot will be absolutely positioned, the wrapper's width and height cannot rely on the contents.

Props

PropTypeDefaultExplanation
direction'row'|'column''column'animation direction
reversebooleanfalseBy default the slot will translate according to document flow - top to bottom for {direction: 'column'} and and for {direction: 'row'} in accordance to ltr-rtl direction style of the wrapper. This behaviour can be reversed with this prop.
repeatbooleantrueIf true the slot will repeat itself so as not to leave whitespace as the slot is finishing to translate out of the wrapper. The component will compute the number of times to repeat the slot in accordance with the repeatMargin prop.
repeatMarginnumber10Pixels between repeated slots.
speed{type: 'pps'|'duration',
number: number}
{type: 'pps',
number: 100}
There are two ways to define the translation speed. When choosing 'pps', 'number' is number of pixels per second. When choosing 'duration', 'number' is the number of milliseconds in which the slot will translate from the begining to the end of the wrapper element.
hoverPausebooleantrueShould animation pause upon hovering over wrapper element.
pausebooleanfalseUse to programmaticlly pause animation.

Responsiveness

The component should be able to accommodate for any changes in wrapper or slot content dimensions that take place on the fly. Number of times to repeat the slot will be recalculated, and the margin between them will be unharmed. This is accomplished thanks to the ResizeObserver Api. Only if the component detects that browser does not support ResizeObserver it will async load a polyfill.

Author

© Yishai Berg
Feature requests and PR's are very much welcomed.

Keywords

FAQs

Package last updated on 13 Mar 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc