The tag < marquee > creates a moving
object on the screen on the basis of the marquee. Initially, the tag was created for Internet Explorer. Today we remember this (probably forgotten by many) tag, and learn how to use it to create an animated line on pure css3.* Before beginning the lesson, we recommend reading on CSS animation masterclass
Problem
One of the problems with the <marquee> that the text is in constant motion, so it is very difficult to read. At this time, we will try to create our own version of <marquee> and make it more usability. For example, instead of continuously moving the text, we will stop it at the moment when it is fully visible, so that the user can fully read it.
Getting Started
All creative solutions begin with a sketch. In the field of animation, this is done with storyboards. Before you start writing code, we must first create a kind of storyboard to help us visualize the animation.
HTML markup
<div class="marquee">
<p>How to add WordPress Related Posts Without Plugins</p>
<p>Automate Your <a href="http://www.hongkiat.com/blog/out/dropbox" style="" rel="nofollow" onmouseover="self.status='http://www.hongkiat.com/blog/out/dropbox';return true;" onmouseout="self.status=''">Dropbox</a> Files With Actions</p>
</div>
Since our animation is fairly simple, then the markup accordingly too.
Basic styles
Before you create the animation, let's add some basic styles. Start by adding a background for the HTML-elements.
html {
background: url('../images/skewed_print.png');
}
Now we will place our line in the middle of the browser window and add some details, such as the inner shadow, background color and contours.
.marquee {
width: 500px;
height: 50px;
margin: 25px auto;
overflow: hidden;
position: relative;
border: 1px solid #000;
margin: 25px auto;
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);
}
Now align our text - add absolute positioning and set 100% width and height.
.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);
}
We should get the following result:
Animation
When you create an animation you need to answer the following questions:
- When will start the animation?
- How long will peremaschatsya object from one point to another?
- How long should be the object at this point?
In CSS3-animation, time will be set using the syntax @ Keyframe . But let's first define a starting position of the text.
We decided that the text will appear on the right and move to the right, so he set the following value
.marquee p {
transform:translateX(100%);
}
Keyframes
The syntax of the key personnel (@ keyframes) can be a bit puzzling to some people, so we created a simple visual guide to help you easily understand what is happening:
Click to enlarge .
All the animation will last about 20 seconds, and is divided into two events for 10 seconds each.
In the first act, the first text appears on the right and remains visible for a moment that the user can read the text, and the second text will be hidden. In the second act, the first text will be displayed on the left and the second text will gradually appear on the right side.
But all the code for the key personnel that we need to use to start 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 use of animation to the elements
The first sequence is applied to the first text (in this case, the first paragraph) and the second sequence is applied to the second paragraph.
.marquee p:nth-child(1) {
animation: left-one 20s ease infinite;
}
.marquee p:nth-child(2) {
animation: left-two 20s ease infinite;
}
Demo
Bonus
We can also change the direction of the text scrolling text, such as top to bottom or vice versa. Here's how you can implement:
.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%);
}
}
In addition, we have renamed our animation, so we must re-apply the name of the animation in the paragraph element.
.marquee p:nth-child(1) {
animation: down-one 20s ease infinite;
}
.marquee p:nth-child(2) {
animation: down-two 20s ease infinite;
}
And finally, here is the entire code:
.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% {
transform:translateY(0);
}
40% {
transform:translateY(0);
}
50% {
transform:translateY(-100%);
}
100%{
transform:translateY(-100%);
}
}
@keyframes up-two {
0% {
transform:translateY(100%);
}
50% {
transform:translateY(100%);
}
60% {
transform:translateY(0);
}
90% {
transform:translateY(0);
}
100%{
transform:translateY(-100%);
}
}
Demo
Conclusion
Despite the lack of support for current browsers, CSS3 animation (if done correctly) will undoubtedly solve many usability issues in the future. If we only have a short animation designed for modern browsers use CSS3-animation, probably better than loading JQuery-script.
Author - hongkiat
0 comments:
Post a Comment