Sup fam! Have you seen this sick animation effect on websites, where text or images glide across your screen like it’s nobody’s business? That’s called a marquee, and it’s not just mesmerizing, but also so easy to make happen with some modern CSS magic. Let me spill the tea on creating fire marquees to make your website pop off. ?
What’s Good with Marquees?
A marquee is just a scrolling piece of text or an image that goes horizontally across your screen. They used to be big in old school web design (ya’ll remember <marquee> tags? lol), and while they aren’t as common today, they can still be super clutch for highlighting stuff. Marquees work great for: Shouting out your brand affiliations or past clients Announcing some breaking news or upcoming events Basically showcasing any message you want viewers focused on They add motion and visual flavor to a website, which fights against boring static pages and connects better with users. That gliding motion attracts people’s attention and gives their eyes a place to follow along while reading your page. Pretty unexpected, right?
“Marquees introduce an element of surprise and novelty, helping to break the monotony of static pages.”
But just a word of caution, don’t overdo it! Use them at choice spots, and keep your overall site design ordered and minimal. Our mantra: less is often best.
Marquee Dos and Don’ts 101
Some key tips when working marquee magic:
Highlight the Good Stuff: Use them for your spiciest announcements and messages.
Keep it Simple: Skip super bouncy or complex animations.
Go for subtle, smooth, straightforward motions. Easy on the eyes, ya feel?
Readable AF: If your marquee has text, make sure it’s easy to read and to the point. Don’t overwhelm people scrolling by!
Don’t Block the Bars: Position marquees so they don’t hide key stuff like your main nav links or CTAs. Major party foul.
Pause Button: Let users pause that motion if needed. Reading comprehension is ?.
Those are the need-to-knows! Now let’s dive into actually building one…
Crafting Your First Marquee in WordPress
I’ll walk you through creating a marquee step-by-step using Gutenberg in WordPress. Even if you’ve never coded before, just stick with me!
Step 1: Setting Up a Test Environment
We’ll build this on a safe sandbox site so we don’t mess up your real site during development: Go to taste.wp.com and click Setup it up! to spin up a test environment automatically. Easy!
Brew some tea ☕️ because we learning up in here today!
Step 2: Grabbing Our Starter Files
You’ll need the files I’ve cooked up to hit the ground running:
Download my quick start kit here. Pay what you want to fuel my work, even $0 is fine!
You’ll get a .zip with some CSS styles, templates, logos – the works!
Step 3: Prepping Our Theme
Let’s setup a clean theme and install some key plugins: Switch your WP theme to something simple like Twenty Twenty Four Theme. Install and activate that thang.
We’ll also need an SVG plugin for vector image support in our marquee. Install that through the plugin browser like usual.
Step 4: Importing Our Code/Assets
Time to inject our starter code: Open the template.txt and style.css files and copy their contents.
Paste everything in the WordPress Editor. You can find this in Appearance > Editor, and clicking the preview.
We’ll build on top of this shortly…
Step 5: Reviewing the CSS
Classes Before jumping into the visual editor, let’s recap what our CSS is doing under the hood:
Alignment Fixes: Adjusts positioning that may get funky.
Hidden Overflow: Clips anything outside our marquee container.
Animation Classes: Defines our slide motion and effects like infinite scroll, reverse, slowing down, etc.
The classes do the heavy lifting! We just apply them where needed.
Step 6: Constructing Our Marquee
Let the fun begin!
Add a row named Infinite Scroll
Inside the row add another row named Slider.
Add images, text blobs, whatever you want inside the slider row.
Slap on animation classes for effects to the Infinite Scroll row: .infinite-scroll, .is-rotated, .is-slower.
Get crazy with it! Add 5 marquees, try every combo. The world is your oyster babyyy!
Step 7: Applying Finishing Touches
Dial it in with some polish:
Add padding, margins for breathing room.
Test responsiveness across device sizes. Gotta play nice!
And voila! You now have a slick animated marquee that will make your site pop, lock, and drop it (within reason, remember our dos and don’ts!).
Wash, rinse and repeat as needed! Don’t be shy with trying new combos.
Wrap Up
Marquees might seem basic, but when used wisely they can majorly level up your site’s engagement and visual appeal. Subtle yet mesmerizing motion guides visitors’ eyes across pages smoothly.
Give people a nudge towards your most important content, announcements and offers with marquees sprinkled in. Just keep it classy!
And while you’re here being awesome at web design – smash that subscribe button for more sweet tutorials up in ya feed! Later gators ?
Work in Progress.
Thanks for reading so far ?. This is still a work in progress. Let me know if you already have some questions I could seek to answer or tips on improving this article!
