Hello, lovers of layout and web languages! Today’s topic of publication is rightfully: “Animation for the html site.” Animations are quite popular these days and raise the most questions among beginners. That is why I want to touch on this topic and tell you what animated elements are needed for, where they are most often used and what tools are used.
I also decided to show specific code examples, implementing popular and in-demand tasks. After reading the article to the end, you will learn how to implement techniques such as ticker tape and falling snow. Now let's move on to the main part of the article!
Animation has taken the world by storm
Indeed, most web resources use animated objects in their content. The most striking example is online stores, where when you hover over a model or product, they scroll.
Previously, the role of animation was played by files gif format. However, today the bulk of moving elements is done using cascading style sheets. In addition, there are many libraries that simplify the work of web developers by providing them with ready-made solutions.
For example, the Animate.css library. The library can be downloaded and then connected to the program code via < link>.
Ticker
You may have sometimes noticed how text content on a website moves horizontally or vertically, or maybe even images move. It looks complicated, but in fact there is only one tag responsible for this html language .
I would like to note that this is not a new element and does not relate to html5. It was originally created for Internet Explorer, but after a while other browsers began to support it.
So how do you create a ticker? In fact, you just need to enter the required text in the paired tag - and he will “run”. How exactly he will move is another matter.
| Attribute | Description |
| behavior | Indicates how content is moved: alternate– content moves between two boundaries, bouncing off them; scroll– the object moves as if in a circle (appears on one side, disappears on the other); slide– the content goes all the way and stops. |
| loop | Determines how many times the contents of the described tag will be repeated. For example, -1 is used to repeat indefinitely. |
| direction | Sets the direction of movement: down– moves from the top edge down; left– from the right edge to the left; up– from the lower border to the upper; right- from left to right. |
| scrollamount | Sets the pixel distance between the current object position and the next one. Affects movement speed. Initially equal to 6. |
| scrolldelay | It also affects the “running” speed, but at the expense of the update frequency. Sets the delay in milliseconds. |
Now it's time to try out the acquired knowledge in practice. Paste the following software implementation of tickers into the code dialog box and run it in a browser.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Two animations were displayed on the page: a running (or rather jumping) line and a galloping horse.
As the winter months approach, many online resource owners decorate their websites with spruce branches, holiday toys, or falling snow. We will deal with the last point.
It is possible to create snowflakes different ways. Some draw their patterns on transparent background, others use ready-made materials from the Internet, and still others appeal to css tools. I decided to join the last group and worked my magic on the styles.
As you may have guessed, this time the animation will be created exclusively by the built-in mechanisms of cascading style sheets, although there are other solution scripts. Also, we will not use html, but will use only standard markup.
In order to create falling snow, you need to use the following tools:
property animation(which appeared in the css3 specification) and block @keyframes.
@keyframes helps determine the state of web page elements at a particular point in time and thus makes them move. Keyword from sets the initial location of objects, and the word to– final.
General view of the ad: @keyframes name (from(…)to (…) )
Animation is divided into several parameters, 4 of which we will use.
And now an example:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
|
There are two ways to animate a ticker.
First way
Open the image that will be the background (example). Create a new layer. Using the “Rectangular Area” tool, select a small rectangle that will act as a field along which the line will run and fill it with some color, which does not matter, since the visibility from it will be removed.
Create a text layer.
Add a layer mask to the text layer and fill it with black. Step onto the layer with the rectangle and load the selected area: “Tab” tab. Place it on the layer mask and fill the selected area with white.
Remove visibility from the layer with the rectangle. In the “Window” tab, select “Timeline” and create a storyboard. On the first frame we set “Selecting cycle display time” and “Selecting cycle parameters”. Unlink the text layer from the layer mask. Move the line to the right so that it disappears out of sight. This will provide a rectangular area, which is highlighted in white in the layer mask. In order for the line to be at the same level when moving, you should enable “Auxiliary Elements”: the “View” tab.
On the second frame, we shift the line to the left so that it disappears out of sight.
On the storyboard, hold down Shift key click the first and second frame. Click on the “Create intermediate frames” icon. In the dialog box, set the number of intermediate frames.
We get the first method of a creeping line.
Second way
Create a text layer that will be static, but with imitation of movement.
Turn off visibility from all layers except the text layer. Make a brush from the text layer.
We stand on the layer with the image, use the “Rectangular Area” tool to select a part of the image on which the creeping line will be simulated. Copy the selected area and paste.
Add a layer mask to the layer with the image fragment and fill it with black. In the layer mask, use a brush from the white text layer to reveal the layer. Create a new layer above the layer with the image fragment and paint it with a soft brush of the appropriate dark color. Make the layer a clipping mask in relation to the elk with a fragment of the image: while holding down the Alt key, click along the border of the layers in the layers window.
We create a storyboard. On the first frame, move the layer with the stripe to the right.
On the second frame, move the layer with the stripe to the left.
We create intermediate frames.
We save the animation and get the second method, simulating a ticker.
Ticker animation is usually used on fairly large screens. This is due to the fact that it is difficult to select graphics animation for a small screen so that it looks harmonious and does not distract all attention. But text movement is used for a wide variety of screen sizes.
The LED ticker can be either full color or monochrome, and this is also of great importance for the use of animation. In full-color models it can be used without restrictions, but for single-color screens it is necessary:
- Apply animation consisting of one color;
- Take into account the size ratio, otherwise the animation will simply blur.
Animating ticker text for single-color screens should not be too complex and loaded with effects. Remember that everything will be done in the same color and can merge into a single bright spot.
A convenient format for exchanging images: gif, most often used when working with screens. GIF animation for a creeping line it can be single-color or multi-color and contain up to 256 colors.
In LED screen editors, GIF files can be created both in a static position and in parallel movement:
- Own movement for the image;
- The effect of movement across the screen.
In this case, the animation for the ticker is configured through special editor programs and must be designed using special scripts. You can download them in a ready-made format or order development for your device.
Animation for LED ticker
The design of any image on an LED screen can become more interesting if you add movement to it. But you should distinguish between what animation is for an LED ticker and its own software effects. So, you can load animated text or image into the settings program in finished form. The file will contain sequential frames and information about the display time of each of them.
Loading...
