Country flags marquee by J

An Elementor widget plugin for WordPress that adds two mirrored marquee flag showcases. Flags "fade-pop" in big at the top, travel diagonally across the showcase, shrink, and fade out — with the second showcase mirrored by default, the two rows form a V composition.

Built for the Texora International "Countries" section; works on any Elementor site.

Features

• Two independent flag showcases — each is a repeater: upload a flag image, set the country name (used as the alt text for accessibility + SEO).
• V composition — a toggle mirrors showcase two so flags enter big at the top-right and shrink toward the bottom-left, mirroring showcase one.
• Marquee controls — travel time per flag (default 14s), end-of-path scale (default 0.4), pause on hover.
• Style controls — flag width per device, aspect ratio (3:2, 4:3, 16:9, 1:1), corner radius, border, box shadow, showcase height per device, and gap between showcases.
• Responsive — showcases sit side by side on desktop/tablet and stack on mobile (< 768px).
• Accessible & performant — respects prefers-reduced-motion (renders a static staircase, no animation), pauses while off-screen via IntersectionObserver, lazy-loads images, and animates only transform/opacity.
• Zero dependencies — vanilla JS and one small CSS file, enqueued only on pages that actually use the widget.
• Titles stay composable — the widget renders no heading or sub-heading of its own; pair it with any Heading / Text Editor widget above it.

Requirements

• WordPress 6.0+
• PHP 7.4+
• Elementor 3.5+ (free version is enough — Elementor Pro is not required)

Installation

1. Download this repository as a ZIP (Code → Download ZIP), or clone and zip the folder yourself.
2. In WordPress admin, go to Plugins → Add New → Upload Plugin, choose the zip, and activate.
3. Edit any page with Elementor and search for "Country Flags Marquee by J" (it sits in the By J category).

Usage

1. Drop the widget into a section.
2. Content → Flags · Showcase One (left): add flag items — a country name and a flag image per item.
3. Content → Flags · Showcase Two (right): same, plus the Mirror showcase two (V layout) toggle.
4. Content → Marquee Settings: travel time, end-of-path scale, pause on hover.
5. Style tab: flag size per device, aspect ratio, corner radius, border/shadow, showcase height, and gap.

Flag image guide

• Size: 600 × 400 px (3:2 ratio) — crisp on retina screens at every marquee size.
• Format: PNG, WebP, or SVG. Keep each file under ~150 KB.
• Use the same aspect ratio for every flag; images are cropped (object-fit: cover) to the ratio set in Style → Flags.

How it works

The animation is a small requestAnimationFrame loop in vanilla JS. Each flag travels the showcase diagonal on a shared loop clock:

p = (elapsed / duration + i / n) % 1

• p drives position, scale, and opacity — a quick ease-out-back "pop" for the first 8% of the path, full visibility through the middle, fade-out over the last 14%.
• z-index is layered by depth (1000 - p * 999) so larger, nearer flags always render on top — including at the loop wrap.
• Each instance exposes a __cfmjDestroy() teardown, so Elementor editor re-renders never leak listeners or duplicate animation loops.

File structure

country-flags-marquee-by-j/
├── country-flags-marquee-by-j.php        # Plugin bootstrap (requirements checks, asset registration)
├── widgets/
│   └── class-cfmj-widget.php             # Elementor widget: controls + render
├── assets/
│   ├── css/country-flags-marquee-by-j.css
│   └── js/country-flags-marquee-by-j.js  # rAF marquee engine
└── readme.txt                            # WordPress.org-style readme

Changelog

1.1.0

• Renamed to Country flags marquee by J.
• Removed the heading and sub-heading controls — the widget now renders only the flag marquees.
• Fixed flag layering so larger entering flags stay on top.

1.0.0

• Initial release.

License

GPL-2.0-or-later