Marquee
Marquee 2.1.0 requires:
- PHP: 8.2.0 or newer
- YOOtheme Pro: 5.0.51 or newer
- Joomla: 5.4.9 or newer, or WordPress: 7.1.3 or newer
- A current version of Chrome, Firefox, Safari or another WebKit-based browser
JavaScript must be enabled for the continuous scrolling loop. Without it, the original content remains available as a regular static row.
Marquee continuously moves a horizontal row of Builder items. It is useful for announcements, logos, testimonials, offers, partners, news or any repeating content that should travel across the available width.
The server renders one original set of items. The browser creates decorative copies only when they are needed to fill a seamless loop.
- Add the Marquee element in YOOtheme Pro Builder.
- Edit the placeholder items or add your own items.
- Choose Fixed or Auto under Item Width Mode.
- Choose Duration or Velocity under Mode, then set the movement value, Start Offset, Direction and Hover Behaviour.
- Configure the gap, dividers, Fade Size and optional progress bar.
- Use the Panel, Title, Meta, Content, Image, Video and Link sections to style all items consistently.
New elements start with eight placeholder items so the animation can be previewed immediately.
An item can contain a title, meta text, rich content, an image, a direct video file, an icon, hover media, a link and a Builder sublayout. The item can also override selected global settings such as panel style, link text, link ARIA label and link attributes.
Fixed uses the configured responsive item widths and is the best choice for cards, panels and evenly sized slides. Auto lets every item use the width required by its own content and is useful for a running line of text, badges or logos with different proportions.
In Fixed mode, set an item width for phone portrait, phone landscape, tablet landscape, desktop and large screens. Later breakpoints may inherit the previous value, so you only need to define widths where the layout changes.
Fill available column space distributes any remaining row space between fixed-width items. Disable it when every item must keep its exact configured width.
Switch to Auto item width and enable Don't wrap into multiple lines. This keeps text-based items on one line while allowing every item to retain its natural width.
Use Column Gap to control spacing between items. You can add dividers and center rows that do not yet fill the container.
Fade Size controls the soft fade at both edges from 0–50%. The default is 5%; set it to 0 to disable the effect. Layouts created with the former Mask option automatically retain a 5% fade when that option was enabled.
These settings apply to the complete Marquee while the content and panel sections control spacing inside individual items.
Duration sets the time required for one complete loop. It supports 5–50 seconds and defaults to 20 seconds. The cycle time remains fixed, so a wider set of items moves faster than a shorter set.
Velocity sets movement in pixels per second. It supports 1–200 px/s and defaults to 25 px/s. Marquee measures the original item set and recalculates the cycle duration after fonts, content or layout widths change, keeping the perceived speed consistent.
Only the control used by the selected Mode is shown in Builder. Existing layouts continue to use Duration mode.
Start Offset selects the initial position within the loop from 0–100%. A value of 0 starts at the normal origin, while higher values begin farther through the cycle. The item track and progress bar remain synchronized.
Direction supports Normal, Reverse, Alternate and Alternate-Reverse. Normal and Reverse move continuously in one direction. Alternate modes reverse direction at the end of each animation cycle.
Hover Behaviour provides three options:
- None keeps the animation running normally.
- Slow Down transitions smoothly to the configured Reduced Speed over 1000 ms.
- Pause stops the animation while the pointer is over the element.
Reduced Speed is available with Slow Down and sets the hover speed to 1–100% of the normal speed. The default 40% means that an 80 px/s Marquee slows to 32 px/s. Because the value is relative, it behaves consistently in Duration and Velocity modes.
Keyboard focus uses a separate accessibility mode: the loop stops, copies are hidden and the original row becomes manually scrollable regardless of the selected hover behavior.
No. Marquee is designed for horizontal movement. Vertical movement would require different layout, sizing and interaction rules and is not part of this element.
Choose Top or Bottom under Progress Position, then configure its height, fill color, background color, margin and responsive visibility.
The progress bar follows the current loop duration, Start Offset and hover slowdown. It is intentionally hidden while Marquee is static, keyboard focus mode is active or the visitor prefers reduced motion.
Choose an unboxed layout or a native YOOtheme card or tile style, then configure padding, clipping offset, hover style and image alignment. Match panel heights aligns the height of items in the same row.
Expand Content can stretch the image area, content area or both to use the available panel height. An individual item may override the global panel style.
Yes. A link can be applied to the title, image, call-to-action label or the complete panel. When Link panel is enabled, the visible call-to-action still points to the same destination.
Use the global link text and ARIA label for consistent output, or override them on a specific item.
Marquee supports opening a link in a new window, forcing a file download and adding nofollow or noreferrer. These options can be enabled globally for all linked items or enabled on an individual item.
A global option applies to every linked item. Item-level options add behavior for that item; they do not disable an option that is already enabled globally.
Primary media can be an image, direct video file or icon. A hover image or hover video can overlay the primary media with the selected transition. Native Builder controls are available for crop, focal point, border, grid width, alignment, inline SVG styling, icon size and color.
Image Background adds a subtle backing to the image area; it does not turn the image into a CSS background image.
Use a direct browser-playable video file, such as an MP4 or WebM file supplied through the media picker or an allowed local or HTTP(S) media URL.
YouTube and Vimeo page URLs are not direct video files, so they are not embedded and will not play in this field.
Choose whether video starts immediately, when it enters the viewport or when the item is hovered. The optional restart setting returns hover-controlled video to the beginning before the next playback.
Browser autoplay rules still apply, so videos intended to autoplay should normally be muted and use a browser-compatible format.
Images use lazy loading by default. Enable Enable eager loading only when an image must load immediately, such as prominent above-the-fold content.
Keep lazy loading enabled for most Marquee items to avoid downloading off-screen media earlier than necessary.
The sublayout can contain ordinary YOOtheme Pro Builder elements, including grids and more complex compositions. This makes it possible to build item layouts beyond the standard title, meta, content and media fields.
When a nested element should read data from the current Marquee item, select Parent as its Dynamic Content source.
An item with no visible content is omitted from frontend output. A sublayout containing only the empty structural row → column scaffold is also considered empty, even if that row or column has styling.
Add at least one real child element to make the sublayout count as content. This prevents blank panels from entering the animation.
The Display section can hide the sublayout, title, meta text, content, image, video, link and hover media for every item without deleting the saved values.
Hidden fields and a disabled sublayout are also excluded from Marquee's searchable content output, so search results do not advertise content that visitors cannot see on the page.
Yes. Use YOOtheme Pro Dynamic Content for supported item fields, and use a sublayout when the item requires several nested elements or a more complex data-driven design.
For elements inside the sublayout, the Parent source exposes the current Marquee item data.
Generated copies are decorative: they are hidden from assistive technology and removed from the Tab sequence. The original links and controls remain keyboard accessible.
When focus enters an original item, Marquee stops the loop, hides its copies and makes the original strip manually scrollable. Normal animation resumes after focus leaves the component.
Marquee respects prefers-reduced-motion. The animation and generated copies are disabled, the progress bar is hidden and the original items remain available in a static, manually scrollable row.
To protect the page from excessive DOM and media growth, one Marquee may create no more than 32 copy sets, 256 copied item roots, 4096 copied DOM elements and 16 cloned native video players. If filling the loop would exceed any limit, the element switches to a static, manually scrollable row.
This state is not permanent. Marquee measures again after relevant resize or Builder updates and resumes animation when the content fits within the limits.
You can use multiple independent Marquee elements on the same page. Each top-level instance owns its observers, generated copies, events and cleanup, so separate rows may use different speeds and directions.
A Marquee nested inside another Marquee item does not start an independent loop. It remains visible as static content and is synchronized as part of the outer item. For two moving rows, place two Marquee elements next to each other instead of nesting one inside the other.
The lifecycle also handles Builder partial refreshes and DOM replacement. Removed or replaced elements release their observers, listeners, timers and generated copies.
Use the native YOOtheme Pro controls for panels, typography, colors, borders, spacing, alignment, media, grids, visibility and animations. The General and Advanced sections also provide position, element ID, custom classes, custom attributes and custom CSS.
For targeted CSS, assign a unique class or ID to the Marquee or to an individual item instead of depending on generated copies.
The Content field keeps trusted rich HTML, matching normal YOOtheme Pro authoring behavior. Use it only for markup entered by trusted Builder authors.
Image alternative text is normalized to plain text and escaped on output. Media URLs accept supported local YOOtheme paths and HTTP(S) URLs while executable, data and file schemes are rejected.
Yes. Marquee 2.1.0 includes localized labels and descriptions for 28 languages, including the new animation controls. Shared native Builder terms continue to use YOOtheme Pro's own translations, while Marquee-specific text comes from the plugin catalog.
If a translation is unavailable, the original English text is used as the fallback.
The Marquee runtime itself does not send network requests. It only measures and manages the element already rendered on the page.
Images, videos and linked resources still load from the URLs configured by the site author, and the CMS may perform its normal extension update checks separately.
- Confirm that JavaScript is enabled and the original row has a measurable width.
- Check Hover Behaviour, reduced-motion preferences, viewport visibility, keyboard focus and whether the browser tab is hidden.
- Check whether the clone or video-player limits were exceeded; a very large element intentionally becomes static.
- Make sure enough visible items remain after the global Display settings are applied.
- Reload the Builder preview after installation or update, and clear stale site and browser caches.
- Recompile the active YOOtheme style if the element appears unstyled.
- For video, use a direct browser-playable file rather than a YouTube or Vimeo page URL.