Marqueefy · Marqueefy is a custom Marquee component used to create horizontal or vertical scrolling content.

Installation

CDN

Styles

<!-- Marqueefy CSS -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@marqueefy/marqueefy@1.0.3/dist/css/marqueefy.min.css" 
      integrity="sha384-wADgvhAqbORDLWCl6LHRmwaldDxcsCZJ9EfC4tyLmlqRSrxK8SQSmUprPJYdtCZb" 
      crossorigin="anonymous">

Scripts

<!-- Marqueefy JS -->
<script src="https://cdn.jsdelivr.net/npm/@marqueefy/marqueefy@1.0.3/dist/js/marqueefy.min.js" 
        integrity="sha384-GkNdpzZA0aigYQs7bhB94ikrs1rxyzcoGZqE/KBxsvvsQPERiMHw4vrDlCgDewnu" 
        crossorigin="anonymous"></script>

Styles

<!-- Marqueefy CSS -->
<link rel="stylesheet"
      href="https://unpkg.com/@marqueefy/marqueefy@1.0.3/dist/css/marqueefy.min.css" 
      integrity="sha384-wADgvhAqbORDLWCl6LHRmwaldDxcsCZJ9EfC4tyLmlqRSrxK8SQSmUprPJYdtCZb" 
      crossorigin="anonymous">

Scripts

<!-- Marqueefy JS -->
<script src="https://unpkg.com/@marqueefy/marqueefy@1.0.3/dist/js/marqueefy.min.js" 
        integrity="sha384-GkNdpzZA0aigYQs7bhB94ikrs1rxyzcoGZqE/KBxsvvsQPERiMHw4vrDlCgDewnu" 
        crossorigin="anonymous"></script>

npm

Install

npm i @marqueefy/marqueefy

Import Marqueefy JS

import * as marqueefy from '@marqueefy/marqueefy'

Import Marqueefy SCSS in your SCSS file

@import "~@marqueefy/marqueefy/scss/marqueefy";

Download

Download v1.0.3

Usage

Add the following HTML snippet to your page and initialize it with Javascript.

<div class="marqueefy" tabindex="0">
    <div class="content">
        Marqueefy is a custom Marquee component used to create horizontal or vertical scrolling content.
    </div>
</div>

Javascript

// Initialize Marqueefy
const marqueefyList = Array.prototype.slice.call(document.querySelectorAll('.marqueefy'))
const marqueefyInstances = marqueefyList.map(m => {
  return new marqueefy.Marqueefy(m)
})

Options

Content Types

Text

Marqueefy is a custom Marquee component used to create horizontal or vertical scrolling content.

VIEW CODE

html

<div class="marqueefy" tabindex="0">
    <div class="content">
        Marqueefy is a custom Marquee component used to create horizontal or vertical scrolling content.
    </div>
</div>

Icons

If the Marqueefy contains Web fonts or Icons, please make sure they are loaded and ready before initiallizing Marqueefy, because it uses its content’s dimensions to determine the appropriate Speed.

The following example uses Bootstrap Icons. It makes use of the Document.fonts property to ensure the fonts are ready before initiallizing Marqueefy.

VIEW CODE

html

<div class="marqueefy" id="marqueefy-with-icon" tabindex="0">
  <div class="content">
    <i class="bi bi-emoji-smile-fill fs-1"></i>
    <i class="bi bi-emoji-smile-upside-down-fill fs-1"></i>
    <i class="bi bi-emoji-sunglasses-fill fs-1"></i>
    <i class="bi bi-emoji-wink-fill fs-1"></i>
    <i class="bi bi-emoji-kiss-fill fs-1"></i>
    <i class="bi bi-emoji-heart-eyes-fill fs-1"></i>
    <i class="bi bi-emoji-laughing-fill fs-1"></i>
  </div>
</div>

html

<script>
window.addEventListener('DOMContentLoaded', (event) => {
  document.fonts.ready.then(() => {
    // Initiallize Marqueefy after fonts are ready
    const marqueefyWithIcon = document.querySelector('#marqueefy-with-icon')
    const marqueefyWithIconInstance = new marqueefy.Marqueefy(marqueefyWithIcon)
  })
});
</script>

Images

If the Marqueefy contains Images, please make sure they are loaded before initiallizing Marqueefy, because it uses its content’s dimensions to determine the appropriate Speed.

The following example initiallizes Marqueefy on Window: load event.

VIEW CODE

html

<div class="marqueefy" id="marqueefy-with-image" tabindex="0">
    <div class="content">
        <img src="/assets/images/pexels-nishant-aneja-2416482.jpg">
        <img src="/assets/images/pexels-pixabay-264337.jpg">
        <img src="/assets/images/pexels-roman-davayposmotrim-35990.jpg">
        <img src="/assets/images/pexels-the-th-179908.jpg">
        <img src="/assets/images/pexels-yan-krukov-6815665.jpg">
    </div>
</div>

html

<script>
// Initiallize Marqueefy on "Window: load event"
window.addEventListener('load', () => {
  const marqueefyWithImages = document.querySelector('#marqueefy-with-image')
  const marqueefyWithImagesInstance = new marqueefy.Marqueefy(marqueefyWithImages)
});
</script>

Variants

Single item

Marqueefy is a custom Marquee component used to create horizontal or vertical scrolling content.

VIEW CODE

html

<div class="marqueefy" tabindex="0">
    <div class="content">
        Marqueefy is a custom Marquee component used to create horizontal or vertical scrolling content.
    </div>
</div>

Multiple items

This is the first item This is the second item This is the third item

VIEW CODE

html

<div class="marqueefy" tabindex="0">
    <div class="content">
        <span class="item">This is the first item</span>
        <span class="item">This is the second item</span>
        <span class="item">This is the third item</span>
    </div>
</div>

Directions

Set the scrolling direction of the Marqueefy using the attribute: data-mq-direction. Possible values are left, right, up and down. If no value is specified, the default value is left.

Left (Default)

This text will scroll from right to left.

VIEW CODE

html

<div class="marqueefy" tabindex="0">
    <div class="content">
        This text will scroll from right to left.
    </div>
</div>

Right

data-mq-direction="right"

This text will scroll from left to right.

VIEW CODE

html

<div class="marqueefy" data-mq-direction="right" tabindex="0">
    <div class="content">
        This text will scroll from left to right.
    </div>
</div>

Top

data-mq-direction="top"

This text will scroll from bottom to top.

VIEW CODE

html

<div class="marqueefy" data-mq-direction="top" style="height: 150px;" tabindex="0">
    <div class="content">
        This text will scroll from bottom to top.
    </div>
</div>

Bottom

data-mq-direction="bottom"

This text will scroll from top to bottom.

VIEW CODE

html

<div class="marqueefy" data-mq-direction="bottom" style="height: 150px;" tabindex="0">
    <div class="content">
        This text will scroll from top to bottom.
    </div>
</div>

Speed

Set the scrolling speed of the Marqueefy using the attribute: data-mq-speed. Value must be a number. Default speed is 100.

This text will scroll from right to left at a speed of 50.

VIEW CODE

html

<div class="marqueefy" data-mq-speed="50" tabindex="0">
    <div class="content">
        This text will scroll from right to left at a speed of 50.
    </div>
</div>

Javascript

Configuration

Direction and Speed can also be set using Javascript. Simply pass the configuration object {direction: 'left', speed: 100} as the second argument. Configurations set via Javascript takes priority over HTML attributes.

const marqueefyList = Array.prototype.slice.call(document.querySelectorAll('.marqueefy'))
const marqueefyInstances = marqueefyList.map(m => {
  return new marqueefy.Marqueefy(m, {direction: 'left', speed: 100})
})

Non-visible elements

Marqueefy uses dimensions of the content to determine the animation-duration. Since the dimensions cannot be determined correctly on target elements that aren’t visible, Marqueefy instances that are initialized when they are not visible must be refreshed by calling the refresh method on the instance once they become visible.

 const marqueefyInstance = marqueefy.Marqueefy.getInstance('#hidden-marquee')
 marqueefyInstance.refresh()

Customization

Customize Marqueefy by changing CSS custom properties

Background color

Marqueefy is a custom Marquee component used to create horizontal or vertical scrolling content.

VIEW CODE

html

<style>
  #example1 {
    --mq-bg: #ffe69c; 
    --mq-hover-bg: #ffda6a;
  }
</style>

<div class="marqueefy" id="example1" tabindex="0">
    <div class="content">
        Marqueefy is a custom Marquee component used to create horizontal or vertical scrolling content.
    </div>
</div>

Border radius

Marqueefy is a custom Marquee component used to create horizontal or vertical scrolling content.

VIEW CODE

html

<style>
  #example2 {
    --mq-bg: #a6e9d5;
    --mq-hover-bg: #79dfc1;
    --mq-border-radius: 3rem;
  }
</style>

<div class="marqueefy" id="example2" tabindex="0">
    <div class="content">
        Marqueefy is a custom Marquee component used to create horizontal or vertical scrolling content.
    </div>
</div>

Border

Marqueefy is a custom Marquee component used to create horizontal or vertical scrolling content.

VIEW CODE

html

<style>
  #example3 {
    --mq-border-width: 4px; 
    --mq-border-style: dashed; 
    --mq-border-color: #6f42c1;
  }
</style>

<div class="marqueefy" id="example3" tabindex="0">
    <div class="content">
        Marqueefy is a custom Marquee component used to create horizontal or vertical scrolling content.
    </div>
</div>

Font

If the Marqueefy contains Web fonts or Icons, please make sure they are loaded and ready before initiallizing Marqueefy, because it uses its content’s dimensions to determine the appropriate Speed.

The following example uses “Kaushan Script” from Google Fonts. It makes use of the Document.fonts property to ensure the fonts are ready before initiallizing Marqueefy.

Marqueefy is a custom Marquee component used to create horizontal or vertical scrolling content.

VIEW CODE

html

<style>
  #example4 {
    --mq-font-family: "Kaushan Script", cursive; 
    --mq-font-size: 1.5rem; 
  }
</style>

<div class="marqueefy" id="example4" tabindex="0">
    <div class="content">
        Marqueefy is a custom Marquee component used to create horizontal or vertical scrolling content.
    </div>
</div>

html

<script>
window.addEventListener('DOMContentLoaded', (event) => {
  document.fonts.ready.then(() => {
    // Initiallize Marqueefy after fonts are ready
    const marqueefyWithCustomFont = document.querySelector('#example4')
    const marqueefyWithCustomFontInstance = new marqueefy.Marqueefy(marqueefyWithCustomFont)
  })
});
</script>

Specs

CSS custom properties

Customize Marqueefy by changing CSS custom properties

Property	Default Value	Description
--mq-bg	#f8f9fa	Background color
--mq-hover-bg	#e9ecef	Hover background color
--mq-color	#212529	Color
--mq-hover-color	#000	Hover color
--mq-border-width	0	Border width
--mq-border-style	solid	Border style
--mq-border-color	transparent	Border color
--mq-border-radius	.375rem	Border radius
--mq-padding-y	1rem (for direction left and right)	Padding top and bottom
--mq-padding-y	0 (for direction top and bottom)	Padding top and bottom
--mq-padding-x	0 (for direction left and right)	Padding left and right
--mq-padding-x	1rem (for direction top and bottom)	Padding left and right
--mq-font-size	1rem	Font size
--mq-font-family	sans-serif	Font family
--mq-animation-duration	15s	Animation duration (Automatically set according to the dimensions of the content and specified speed, default speed is 100)
--mq-item-gap	1rem	Gap between multiple items (In multiple items variant)

Javascript functions

function	Description
refresh	Reconfigures a Marqueefy instance. (Useful in reconfiguring non-visible elements when they become visible)
dispose	Destroys an element’s instance. (Removes stored data on the DOM element)
getInstance	Static method which allows you to get the Marqueefy instance associated with a DOM element.
getOrCreateInstance	Static method which allows you to get the Marqueefy instance associated with a DOM element, or create a new one in case it wasn’t initialized.

HTML attributes

HTML attribute	Javascript equivalent option	Description
data-mq-direction	direction	Sets the scrolling direction of the Marqueefy.
data-mq-speed	speed	Sets the scrolling speed of the Marqueefy.

CONTENTS