How to Achieve an Advanced Marquee Effect with CSS3 Animation
Hey there! Today I want to show you how you can create an awesome marquee effect using CSS3 Animation. Now, I know we’ve talked about marquee before, but this time we’re taking it to a whole new level!
With CSS3 Animation, we’ll be able to enhance the marquee and add even more cool features that weren’t possible with just the -webkit-marquee property. Exciting, right?
If you’re not already familiar with the CSS3 Animation module, don’t worry! I’ve got you covered. Check out these helpful references:
- CSS3 Animations – W3School
- CSS Animations – Mozilla Dev. Network
Just so you know, CSS3 Animation only works in Firefox 8+, Chrome 12+, and Safari 5.0+ with the prefixed version (-moz- and -webkit-). But don’t worry, for this article, I’ll only use the official version from W3C without the prefix to keep things clean and simple.
Contents
Fixing the Marquee Problem
Have you ever noticed how annoying it is when text keeps moving on a marquee? It’s hard to read and it can be really distracting. Well, I have a solution. Instead of having the text continuously move, we’ll make it stop when it’s fully visible, giving you a chance to actually read it.
The Storyboard (Kind of)
When it comes to creating something artistic, like a logo, illustration, or website, I always start with a sketch. But in animation production, we use something called a storyboard. It’s like a sketch, but for our animation. Before we start coding anything, we need to create a kind of storyboard to help us visualize how our animation will look.
Take a look at the storyboard above. We’re planning to show two lines of text that will move from right to left, one after the other.
Our storyboard isn’t as complex as the ones used in real animated movies, but that’s okay. The important thing is that it helps us see what our marquee will look like.
The HTML Markup
Since our animation is going to be simple, the HTML markup will be simple too. Here’s what it looks like:
How to add WordPress Related Posts Without Plugins
Automate Your Dropbox Files With Actions
The Basics
Before we get into the animation stuff, let’s start by adding some basic styles. First, I’ll give the HTML element a background texture.
html {
background: url(‘../images/skewed_print.png’);
}
Next, I’ll center the marquee in the browser window and add some details like an inner shadow, background color, and borders.
.marquee {
/* styles for marquee */
}
Then, I’ll position the text, which is wrapped inside a paragraph tag, absolutely. Since the absolute position can cause the element to collapse, I’ll define the width of the element as 100% to cover its parent’s width.
.marquee p {
/* styles for text */
}
Now, let’s see how it looks.
Now that we’ve covered all the basic styles we need, you’re free to add more or customize the styles as you please. However, I recommend sticking with our specified marquee dimensions (height and width) until the end of the tutorial.
All About Animation
In simple terms, animation is all about making things move. Each movement is carefully planned and measured within a specific time frame. So, when we work on animation, we’re mainly focused on Time. We consider things like:
- When does the object start moving?
- How long does it take for the object to move from one point to another?
- When and for how long should the object pause at a specific point?
In CSS3 Animation, we can use the @keyframes rule to define the timing of an animation. But before we dive into that, let’s first determine where the marquee text will start.
We’ve decided that the text should start from the right and move towards the left. To achieve this, we’ll use the CSS3 Transform property to position it to the right.
Keep in mind that the “100%” we defined for our paragraph element represents its parent’s width. So, in this case, the paragraph element will be shifted to the right by 100%, which is equivalent to 500px in this example.
Now, let’s talk about keyframes. The @keyframes syntax may seem confusing at first, so we’ve created a simple visual guide to help you understand it better.
I’m going to create an animation that lasts about 20 seconds. This animation is divided into two parts, each lasting 10 seconds.
In the first part, the first text will slide in from the right and stay visible for a short time so you can read it. The second text will be hidden during this part.
In the second part, the first text will slide out to the left, and the second text will immediately slide in from the right.
Now, let’s take a look at the keyframe codes we’ll use to make the animation work.
I’ll need to use a few coding terms, but don’t worry – I’ll explain them along the way. Let’s do this!
To begin, let’s define two sets of animation sequences: left-one and left-two. We’ll be using these to add some movement to our webpage.
Now, let’s apply these sequences to our elements. For the first paragraph, we’ll use the left-one sequence, and for the second paragraph, we’ll use the left-two sequence. This way, both paragraphs will have some animated magic!
I can also show you how to make the marquee text move up and down if you prefer. Here’s how you can do it. Just replace the animation code we used earlier with the following code to make the text move downwards:
“`
.marquee p {
transform: translateY(-100%);
}
@keyframes down-one {
0% {
transform: translateY(-100%);
}
10% {
transform: translateY(0);
}
40% {
transform: translateY(0);
}
50% {
transform: translateY(100%);
}
100% {
transform: translateY(100%);
}
}
@keyframes down-two {
0% {
transform: translateY(-100%);
}
50% {
transform: translateY(-100%);
}
60% {
transform: translateY(0);
}
90% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
“`
This code will make the text scroll downwards and then back up again. Feel free to adjust the timing and animation properties as needed to achieve the desired effect.
Hey there! I’ve made some changes to the code for you. Check it out!
First, I switched the X-axis to the Y-axis. And get this – I flipped all the negative translation values to positive and vice versa. Pretty cool, huh?
Oh, and I gave the animation some new names – down-one and down-two. So now, you’ll need to update the animation name in the paragraph element as well.
animation: down-one 20s ease infinite;
animation: down-two 20s ease infinite;
But hey, if you want to move it in the opposite direction – from bottom to top – no worries. I’ve got all the codes you need right here:
.marquee.up p {
transform: translateY(100%);
}
.marquee.up p:nth-child(1) {
animation: up-one 20s ease infinite;
}
.marquee.up p:nth-child(2) {
animation: up-two 20s ease infinite;
}
@keyframes up-one {
0% {
transform: translateY(100%);
}
10%, 40% {
transform: translateY(0);
}
50%, 100% {
transform: translateY(-100%);
}
}
@keyframes up-two {
0%, 50% {
transform: translateY(100%);
}
60%, 90% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
A Final Thought
I want to leave you with this: CSS3 Animation may not work in all web browsers at the moment, but it’s a powerful tool that has the potential to solve many usability issues in the future. Just like we demonstrated in this example, CSS3 Animation can be a better option than using a jQuery script, especially if we only need a short animation for modern browsers.
Lastly, I understand that this article may seem overwhelming to some people. If you have any questions about what we’ve discussed, please don’t hesitate to leave a comment below. I’m here to help!
