Security News
GitHub Removes Malicious Pull Requests Targeting Open Source Repositories
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
vue-dynamic-marquee
Advanced tools
Marquee component for Vue - repeatedly translate content across wrapper. Completely responsive to after-render changes with many options to customize.
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.
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>
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.
Prop | Type | Default | Explanation |
---|---|---|---|
direction | 'row'|'column' | 'column' | animation direction |
reverse | boolean | false | By 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. |
repeat | boolean | true | If 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. |
repeatMargin | number | 10 | Pixels 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. |
hoverPause | boolean | true | Should animation pause upon hovering over wrapper element. |
pause | boolean | false | Use to programmaticlly pause animation. |
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.
© Yishai Berg
Feature requests and PR's are very much welcomed.
FAQs
Marquee component for Vue - repeatedly translate content across wrapper. Completely responsive to after-render changes with many options to customize.
We found that vue-dynamic-marquee demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.