Marquee

ES6 Module for create Marquee animation

Installation

npm install @manit-tree/marquee

Usage

index.html

<link rel="stylesheet" href="./style.css" />
<div class="container">
    <div class="block">
    <div class="block">
    <div class="block">
    <div class="block">
    <div class="block">
    <div class="block">
    <div class="block">
    <div class="block">
</div>

<script type="module" "./index.js"></script>

style.css

.block {
    background-color: red;
}

index.js

import { marquee } from '@manit-tree/marquee';

marquee('.container', {
    animation_duration: '30s',
    item_width: 200,
    item_height: 100,
    gap: 20
})

Options

• animation_duration:string (css animation duration as string, ex: '40s')
• item_width:number (width of marquee item as number, ex: 100)
• item_height:number (height of marquee item as number, ex: 80)
• gap:number (space between marquee item as number, ex: 20)

Credits

Adapted from codepen project of Ramzi Bach

License

MIT