How to Advanced Marquee Effect with CSS3 Animation
Today we are going to take a look at “marquee” once again. We actually have covered about it in our previous post which talked about using the -webkit-marquee property, but this time we will take this subject a little further.
In this post, we are going to create a marquee-like effect using the CSS3 Animation. That way we will be able to add more functionalities that could not be attained with only the -webkit-marquee.
Unless you are already familiar with the CSS3 Animation module, we recommend you take a look at the following references before proceeding with this documentation:
- CSS3 Animations – W3School
- CSS Animations – Mozilla Dev. Network
Also take a note that, at the moment, CSS3 Animation can only work in Firefox 8+, Chrome 12+ and Safari 5.0+ with the prefixed version (-moz- and -webkit-). However, we will only use the official version from W3C without the prefix to avoid overstuffing this article with superfluous codes.
Addressing Marquee Issue
One of the problems with marquee is that the text is continuously moving. This behavior is disruptive to reading, and the text is also difficult to read. This time, we will try to create our own version of marquee and make it user-friendlier. For example; instead of having the text move continuously, we will stop it when it is fully visible, so the user can read the text for a moment.
The Storyboard (sort of)
Every creative and design creation, like a logo, an illustration or a website, usually starts with a sketch. In the field of animation production, this is done with a storyboard. Before we start on any coding, we will first create a sort of storyboard, to help us visualize our animation.
As you can see from the above storyboard, we plan to show only two lines of text, which will both move sequentially from the right to the left.
Our storyboard is not as complicated as a storyboard for real animation movie, but the point is: we are now able to visualize how our marquee will look like.
The HTML Markup
Since our animation is going to be simple, the HTML markup will also be as simple as:
<div class="marquee">
<p>How to add WordPress Related Posts Without Plugins</p>
<p>Automate Your Dropbox Files With Actions</p>
</div>
The Basic Styles
Before working around the animation stuff, let’s add some basic styles. Let’s start off by adding a background texture for the html element.
html {
background: url('../images/skewed_print.png');
}
Next, we will place the marquee at the center of the browser window as well as add some details like inner shadow, background color and borders.
.marquee {
width: 500px;
height: 50px;
margin: 25px auto;
overflow: hidden;
position: relative;
border: 1px solid #000;
background-color: #222;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
}
Then, we will position the text – which in this case is wrapped inside a paragraph tag – absolutely, and since the absolute position will cause the element to collapse, we will have to define the width’s element to 100% so as to cover its parent’s width.
.marquee p {
position: absolute;
font-family: Tahoma, Arial, sans-serif;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
color: #fff;
text-shadow: 1px 1px 0px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
}
Let’s take a look at the result for a while.
At this point, we have done with all the basic styles we need; you are free to add more or personalized the styles. But, we suggest you stick with our specified marquee dimension (the height and the width) until the end of the tutorial.
The Animation
In short, animation is a presentation of moving objects. Each movement is defined in a time frame. So, when we are working on animation, we are mostly dealing with the Time. We take into account matters like:
- When does the object start moving?
- How long does it take for the object to move from one point to another?
- When and how long should the object remain at a given point?
In CSS3 Animation, the time can be defined with the @keyframe syntax. But, before jumping into this section, let’s first specify the marquee text starting position.
We have planned that the text will start from the right then move to the right. So, here we will first position it to the right using the CSS3 Transformation property.
.marquee p {
transform: translateX(100%);
}
Remember, the 100% that we have defined for our paragraph element was equal to its parent width. So, the same will also be applied here; the paragraph element will be translated to the right for 100% which in this example is equal to 500px.
Keyframes
The @keyframe syntax may be a bit puzzling for some people, so here we have created a simple visual guide to help you easily understand what is happening in the @keyframe syntax.
Click here to see the larger version.
The whole animation will last about 20 seconds and is divided into two sequences lasting 10 seconds each.
In the first sequence, the first text will instantly slide-in from the right and remain visible momentarily to let the user read the text, while the second text will remain hidden. In the second sequence, the first marquee text will slide-out to the left, and the second text will immediately slide-in from the right.
And here are all the keyframe codes we need to apply to run the animation.
@keyframes left-one {
0% {
transform: translateX(100%);
}
10% {
transform: translateX(0);
}
40% {
transform: translateX(0);
}
50% {
transform: translateX(-100%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes left-two {
0% {
transform: translateX(100%);
}
50% {
transform: translateX(100%);
}
60% {
transform: translateX(0);
}
90% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
The left-one keyframes will define the first sequence of the animation, while the left-two keyframes will define the second sequence.
Applying Animation to the Elements
For the animation to work, don’t forget to apply the animation to the element. The first sequence is applied for the first text or in this case first paragraph and the second sequence is applied for the second paragraph as well.
.marquee p:nth-child(1) {
animation: left-one 20s ease infinite;
}
.marquee p:nth-child(2) {
animation: left-two 20s ease infinite;
}
Bonus
We can also define the marquee text to move it from top to bottom or vice versa, just like we did in our previous post. Here is how to do it; replace our above Animation codes with this one below to move the text 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%);
}
}
Notice that we have changed the X-axis to Y-axis and flip all the translation negative value to positive and vice versa.
We also have renamed the Animation to down-one and down-two, so we need to re-apply the Animation name in the paragraph element as well.
.marquee p:nth-child(1) {
animation: down-one 20s ease infinite;
}
.marquee p:nth-child(2) {
animation: down-two 20s ease infinite;
}
Or else, if you want to move it the opposite; from bottom to the top. Here are all the codes you need to apply:
.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%);
}
}
Conclusion
Despite the lack of current browser support, CSS3 Animation, if done properly, will undoubtedly solve many usability issues in the future, like we have done in this example. If we need only a short animation intended for modern browsers, using CSS3 Animation is probably better than having to load a jQuery script.
Lastly, we are aware that this article may be a bit overwhelming for some people, so if you have any questions regarding this article, feel free to post it in the comments section below.