Guide: How to create Advanced “Marquee” using CSS3 Animation
This series is dedicated to helping you become a better designer or developer. Check out our HTML5/CSS3 Tutorials for more tips and tricks.
Today, we’re revisiting “Marquee” to explore the -webkit-marquee property in greater detail.
Create a marquee-like effect with CSS3 animation to add features not possible with the -webkit selection box.
It’s advised to review the CSS3 Animation module references before proceeding with this documentation, unless you’re already familiar with it.
CSS3 Animations allow developers to create dynamic, interactive visuals on websites. W3Schools and Mozilla Dev. Network provide resources for learning how to use CSS Animations.
CSS3 Animation is supported by Firefox 8+, Chrome 12+ and Safari 5.0+. To avoid redundant code, only the official version of W3C should be used.
Tackle the marquee problem
We’re creating a more user-friendly version of marquee, which stops the text when it’s fully visible so users can read it without disruption.
The Storyboard (sort of)
Before beginning the coding process, it’s important to create a storyboard to help visualize the animation. This is a common practice in animation production and is similar to sketching out logos, illustrations or websites.
Our storyboard shows two lines of text that will move from right to left in sequence.
We can now envision our party tent, simplifying the process of creating an animated movie’s storyboard.
The HTML markup
The animation will be straightforward, and so will the HTML formatting.
The basic styles
Before beginning the animation, let’s apply some basic styling. We’ll start by adding a background texture to the HTML element.
Make managing your Dropbox files easier with automated actions.
The HTML code has been updated to include a background image of “skewed_print.png”.
A marquee was placed in the center of the browser window, with details such as inner shadow, background color and borders added.
A marquee with a width of 500px, height of 50px, and a 1px solid black border has been set up with an overflow hidden position and 25px auto margin.
The background of the page was set to a dark shade of gray (#222).
The web page element will have a rounded border of 5px radius.
A box-shadow effect has been applied to an element, creating a darker shadow on the inside and a lighter one on the outside.
We’ll place the text in a paragraph tag and set it to absolute position, causing it to collapse. To cover the width of its parent element, we’ll define its width as 100%.
The
element in the marquee has been given an absolute position, with a font family of Tahoma, Arial and sans-serif. It has a width and height of 100%, with a margin of 0. The line-height is set to 50px, text-align is centered, color is #fff and text-shadow is 1px 1px 0px #000000. Additionally, the filter dropshadow (color = #000000, offx = 1, offy = 1) has been applied.
The outcome is worth examining.
The tutorial is now complete, and users are free to add their own personal touches. However, it is recommended that the specified height and width of the bounding box remain unchanged.
The animation
Animators create moving images by defining the movement of objects in a given time frame. They consider factors such as speed, timing, and sequence to create a visually appealing animation.
What is the speed and trajectory of the object’s movement? Researchers are seeking answers to these questions as they investigate when, how long, and at what speed an object moves from one point to another.
Before defining the time of an animation with CSS3’s @keyframe syntax, the starting position of the bounding box must be set.
The text will begin on the right side of the page, then move to the right using CSS3 Transformation.
The CSS property transform: translateX (100%) has been applied to the
element within the
The paragraph element is translated 500px to the right, as it is set to 100% of the parent width.
Keyframes
Creating a visual guide to help make sense of @ keyframe syntax, this resource simplifies the process for those who find it confusing.
This link provides access to a larger version of the image.
The animation lasts for 20 seconds, split into two 10-second segments.
Two sets of text are displayed in a marquee-style animation: the first scrolls in from the right and remains visible for a time, while the second remains hidden; in the second set, both texts scroll to the left.
The animation can be run using these keyframe codes.
The @keyframes left-one and left-two animations move an element from right to left, starting at 100% of the width of the container and ending at -100%.
The first sequence of the animation is set by the left key frames, while the second is determined by the next two.
Apply animation to the elements
For successful animation, ensure the element is given two sets of animation: one for the first paragraph and another for the second.
The CSS code creates an animation effect that causes two elements to move from right to left in an infinite loop. The first element moves at a speed of 20 seconds with a convenience timing function, while the second element moves at the same speed but with an ease timing function.
The animation is complete, and now it’s time to view the results in a web browser.
Bonus
To create a marquee effect, replace the animation codes with new ones to move text down or up.
The CSS code sets a marquee element to move up and down in an alternating pattern. It defines two keyframes, one that moves the element up and down once, and another that moves it up and down twice.
The X axis and Y axis have been reversed, with negative translation values now becoming positive and vice versa.
The paragraph element must be updated with the new animation names: “down-one” and “down-two”.
The CSS code creates an animation effect that causes two elements to move down the page infinitely, with one element moving at a faster rate than the other.
To move an item from the bottom to the top, you’ll need to apply certain codes.
CSS code has been written to create an animation effect of two lines of text scrolling up the page infinitely.
Conclusion
CSS3 Animation has the potential to improve usability in the future, as demonstrated in this example. For short animations intended for modern browsers, it may be preferable to CSS3 animation than loading a jQuery script.
If you have any questions about this article, don’t hesitate to ask in the comments section.
How to create Advanced “Marquee” using CSS3 Animation: benefits
Faq
Final note
This guide provides step-by-step instructions on how to create an advanced “Marquee” animation using CSS3. If you have any questions, please reach out to us. Don’t forget to share the article with your friends!
Have a query about creating an advanced marquee using CSS3 animation? Need to correct misinformation or add an alternate method? Contact us via our contact page, social media accounts, or Telegram channel. We’ll answer your questions within 24-48 hours (weekends excluded).
