feat: add marquee/ticker shortcode for infinite scrolling banners#2907
Open
tunagirisken wants to merge 1 commit into
Open
feat: add marquee/ticker shortcode for infinite scrolling banners#2907tunagirisken wants to merge 1 commit into
tunagirisken wants to merge 1 commit into
Conversation
Add a new marquee shortcode pair (marquee + marquee-item) that creates an infinite horizontal scrolling banner, commonly used for skill/tech showcases, sponsor logos, or client lists. Features: - Configurable speed, direction (left/right), and pause-on-hover - Supports icons with labels, optional links, and plain text items - CSS mask-image edge fade for polished appearance - Accessible: role="marquee" with aria-label - Respects prefers-reduced-motion (falls back to wrapped grid) - Conditional CSS loading via vendor.html - Example site page with 4 demo variants New files: - layouts/shortcodes/marquee.html - layouts/shortcodes/marquee-item.html - assets/css/components/marquee.css - exampleSite/content/samples/marquee/index.md Modified: - layouts/partials/vendor.html (conditional marquee CSS loading)
✅ Deploy Preview for snazzy-dango-efb2ec ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Author
|
Hi! Just following up on this PR to see if it's still under consideration. I'm happy to make any changes or address any feedback if needed. Thanks! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a new
marquee+marquee-itemshortcode pair that creates an infinite horizontal scrolling banner — useful for skill/tech showcases, sponsor logos, client lists, or any repeating content strip.Usage
{{< marquee speed="30" direction="left" pauseOnHover=true label="Technologies" >}} {{< marquee-item icon="/icons/go.svg" >}}Go{{< /marquee-item >}} {{< marquee-item icon="/icons/rust.svg" href="https://rust-lang.org" >}}Rust{{< /marquee-item >}} {{< marquee-item >}}Plain text item{{< /marquee-item >}} {{< /marquee >}}Features
mask-imageedge fade, smooth infinite loop via duplicated inner contentrole="marquee"witharia-label, semantic markupprefers-reduced-motion— falls back to a wrapped grid layoutvendor.html)uid.htmlpartial)Files
layouts/shortcodes/marquee.htmllayouts/shortcodes/marquee-item.htmlassets/css/components/marquee.csslayouts/partials/vendor.htmlexampleSite/content/samples/marquee/index.mdDemo Variants (in example site)
Testing
hugo buildpasses without errors<a>/<span>rendering, CSS custom properties, conditional loadinghugo serverconfirmed smooth animation