Marquee

Marquee Component Documentation

Overview

The Marquee component is a flexible animation system that creates smooth, continuous scrolling effects for content. It's built using GSAP (GreenSock Animation Platform) and supports various configurations for different use cases.

Related Files

wp-content\themes\nopio_master_theme\inc\helpers\marquee-helper.php wp-content\themes\nopio_master_theme\sources\js\components\animations\marquee.js wp-content\themes\nopio_master_theme\sources\css\components\marquee.scss

Core Features

  • Smooth infinite scrolling animation
  • Responsive breakpoint support
  • Configurable speed and direction
  • Support for both LTR and RTL directions
  • Mobile/desktop specific modes
  • Customizable gap spacing
  • Support for images and text content

HTML Structure

<div class="marquee js-marquee" data-mq-direction="ltr" data-mq-speed="100">
  <div class="marquee__content js-marquee-content">
    <!-- Content items -->
    <div class="marquee__item">
      <!-- Your content here -->
    </div>
  </div>
</div>

Locomotive scroll speed up marquee on scroll

add data-scroll data-scroll-event-progress="progressEvent" on js-marquee element

 
<div class="l__container container-fluid">
    <div class="l__marquee bg-dark">
        <div class="marquee js-marquee" 
             data-mq-direction="ltr" 
             data-scroll 
             data-scroll-event-progress="progressEvent">
             ...
        </div>
    </div>
</div>

Block Settings

The Marquee component requires specific style configurations to be properly rendered. These settings should be included in your block configuration:

{
  "style": [
    "file:./../../../css/style-block-shared-marquee-repeater-logos.css",
    "nopiomaster-component-marquee-style"
  ]
}

Style Configuration Details

  • file:./../../../css/style-block-shared-marquee-repeater-logos.css: Path to the shared marquee styles for logo repeater blocks
  • nopiomaster-component-marquee-style: Core marquee component styles

Style Registration

To register the marquee component styles, add the following code to your theme's functions.php:

wp_register_style('nopiomaster-component-marquee-style', get_template_directory_uri() . '/css/style-component-marquee.css', array(), SITE_VERSION, 'all');

Helper Registration

To register the marquee component helper, add the following code to your theme's functions.php:

include_once dirname(__FILE__) . '/inc/helpers/marquee-helper.php';

Configuration Parameters

Data Attributes

AttributeTypeDefaultDescription
data-mq-speednumber100Animation speed in seconds
data-mq-directionstring'ltr'Direction of animation ('ltr' or 'rtl')
data-mq-modestring''Display mode ('mobile-only' or 'desktop-only')
data-mq-reversebooleantrueWhether to reverse animation on direction change

CSS Custom Properties

.marquee {
  --gap: 5px; // Default gap between items
}

Component Structure

JavaScript (marquee.js)

const Marquee = {
    name: 'marquee',
    speed: 100,
    breakpoint: 767,
    currentWidth: window.innerWidth,
    resizeTimeout: null,
    debug: false,
    reverse: true
}

SCSS Structure (marquee.scss)

.marquee {
  --gap: #{nopio_clamp(5, 5)};
  margin-left: calc(var(--gap) * -1);
  display: flex;
  overflow: hidden;
 
  &__content {
    display: flex;
    gap: var(--gap);
    will-change: transform;
  }
 
  &__item {
    --scaledHeight: var(--scaled-height);
    --scale: var(--scaledHeight) / var(--height);
    --scaledWidth: calc(var(--width) * var(--scale));
    width: nopio_clamp_variables(var(--scaledWidth) / 2, var(--scaledWidth));
  }
}

Usage Examples

1. Basic Logo Marquee

<div class="marquee js-marquee" data-mq-direction="ltr" data-mq-speed="100">
  <div class="marquee__content js-marquee-content">
    <div class="marquee__item">
      <img class="marquee__img" src="logo.svg" alt="Logo">
    </div>
  </div>
</div>

2. Text Marquee

<div class="marquee js-marquee" data-mq-direction="rtl" data-mq-speed="50">
  <div class="marquee__content js-marquee-content">
    <div class="marquee__text-item">Your text here</div>
  </div>
</div>

3. Custom Gap Spacing

.b--your-custom-block {
  .marquee {
    --gap: 100px;
  }
}

Marquee Image Loop Helper Function

Function: get_marquee_image_loop

Calculates the number of times a set of images needs to be repeated to fill a screen width in a marquee/slider component.

Parameters

ParameterTypeDescription
$settingsarrayAn array containing configuration settings with the following keys:
- screen_width: The width of the screen/viewport
- height: The desired height for the images
$repeaterarrayAn array of image items, where each item contains:
- image: The attachment ID of the image

Return Value

  • Returns an integer representing the number of times the image set needs to be repeated to fill the screen width.

How It Works

  1. Initializes a loop counter starting at 1
  2. Gets the screen width from settings
  3. For each image in the repeater:
    • Retrieves the image dimensions using wp_get_attachment_image_src()
    • Calculates a scale factor based on the desired height
    • Computes the scaled width of the image
    • Adds the scaled width to a running sum
  4. If the total width is greater than 0:
    • Calculates the required number of loops by dividing screen width by total image width
    • Adds 1 to ensure complete coverage
  5. Returns the calculated loop count

Example Usage

$settings = [
    'screen_width' => 1920,
    'height' => 400
];
 
$repeater = [
    ['image' => 123], // Image attachment ID
    ['image' => 124]
];
 
$loop_count = get_marquee_image_loop($settings, $repeater);

Notes

  • The function uses the 'image-640-nocrop' image size for calculations
  • Images are scaled proportionally based on the desired height
  • The function ensures at least one complete set of images is shown by adding 1 to the calculated loop count

4. Image Marquee with Settings

<?php
$marquee_settings = array(
  'height' => 70,  // Height in pixels
  'speed' => 50,   // Animation speed
);
?>
 
<div class="marquee js-marquee">
  <?php for ($i = 0; $i < 2; $i++): ?>
    <div class="marquee__content js-marquee-content">
      <?php foreach ($images as $image): ?>
        <div class="marquee__item">
          <?php
          $imageWidth = wp_get_attachment_image_src($image, 'image-640-nocrop')[1];
          $imageHeight = wp_get_attachment_image_src($image, 'image-640-nocrop')[2];
          ?>
          <div style="--height:<?= $imageHeight; ?>; --width:<?= $imageWidth; ?>; --scaled-height: <?= $marquee_settings['height']; ?>;"
               class="marquee__item" data-strength="100">
            <img class="marquee__img" src="<?= $image_url ?>" alt="Image">
          </div>
        </div>
      <?php endforeach; ?>
    </div>
  <?php endfor; ?>
</div>

5. Text Loop Example

<div class="marquee js-marquee marquee--rtl" data-mq-direction="rtl" data-mq-speed="50">
  <?php for ($i = 0; $i < 2; $i++): ?>
    <div class="marquee__content js-marquee-content">
      <?php for ($j = 0; $j < 20; $j++): ?>
        <div class="marquee__text-item" data-strength="100">
          <span class="l__text title-xl">Your Text Here</span>
        </div>
      <?php endfor; ?>
    </div>
  <?php endfor; ?>
</div>

Responsive Behavior

  • The component automatically handles window resizing
  • Supports different behaviors for mobile and desktop through data-mq-mode
  • Breakpoint is set to 767px by default
  • Animation pauses on mobile when in desktop-only mode and vice versa

Best Practices

  1. Always include both js-marquee and marquee classes
  2. Use js-marquee-content for the content wrapper
  3. Set appropriate data-mq-speed based on content length
  4. Use data-mq-direction to control animation direction
  5. Override --gap in your custom styles when needed
  6. Use will-change: transform for better performance

Common Use Cases

  1. Logo carousels
  2. Text tickers
  3. Image galleries
  4. Testimonial sliders
  5. News tickers

Performance Considerations

  • Uses GSAP for smooth animations
  • Implements debounced resize handling
  • Optimizes for performance with will-change: transform
  • Supports lazy loading through no-lazy class

Browser Support

  • Modern browsers (Chrome, Firefox, Safari, Edge)
  • Requires JavaScript enabled
  • Supports CSS custom properties

Dependencies

  • GSAP (GreenSock Animation Platform)
  • Modern browser with CSS custom properties support

Overwriting Marquee Styles Inside Block CSS

In some cases, you may want to completely overwrite the default Marquee component styles within a specific block's CSS file. This approach allows for full customization of the marquee's appearance and behavior for that block, independent of the global marquee styles.

Note: The following example demonstrates how to fully override marquee styles inside a block CSS file. This code should be placed within your block-specific CSS (e.g., b--your-block-name { ... }).

@import "../../../sources/css/pre-blocks";
 
.b--your-block-name {
  // Custom properties and overrides
  --progress: 0;
  overflow: hidden;
 
  .l__container {
    margin-bottom: #{nopio_clamp(-5, -5)};
  }
 
  .marquee__content {
    align-items: center;
  }
 
  .marquee__item {
    height: #{nopio_clamp(160, 300)};
    aspect-ratio: calc(var(--width)/var(--height));
    width: auto;
  }
 
  .marquee__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

Best Practice:

  • Place these overrides inside your block's CSS file to ensure they only affect the intended block.
  • This method is useful when you need a marquee with a completely different look or layout for a specific section.
IndexNopio Alm Filter