Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать в интернете на создании сайтов и блогов
Рубрика:Основы HTML

Простые анимация для сайта html: бегущая строка и падающий снег. Сделай свой сайт живым

Здравствуйте, любители верстки и веб-языков! Сегодняшней темой публикации по праву стала: «Анимация для сайта html». Анимации достаточно популярны в наше время и вызывают у новичков больше всего вопросов. Именно поэтому я хочу затронуть эту тематику и рассказать вам, для чего нужны анимированные элементы, где они чаще всего применяются и какие инструменты используются.

Также я решил показать конкретные примеры кода, реализовав популярные и востребованные задания. Прочитав статью до конца, вы научитесь реализовывать такие приемы, как бегущая строка и падающий снег. А теперь перейдем к основной части статьи!

Анимация покорила мир

Действительно, большинство веб-ресурсов используют в своем контенте анимированные объекты. Самым ярким примером являются интернет-магазины, в которых при наведении на модель или товар они прокручиваются.

Ранее роль анимации выполняли файлы формата gif. Однако сегодня основная масса двигающихся элементов выполняется средствами каскадных таблиц стилей. К тому же существует множество библиотек, которые упрощают работу веб-девелоперов, предоставляя им готовые решения.

Например, библиотека Animate.css. Библиотеку можно скачать и после подключать к программному коду через <link>.

Бегущая строка

Анимация бегущая лошадка

Возможно, вы иногда замечали, как на сайте движется текстовый контент по горизонтали или вертикали, а может даже передвигаются изображения. Выглядит это сложновато, но на самом деле за это отвечает всего лишь один тег языка html <marquee>.

Хочу заметить, что это не новый элемент и не относиться к html5. Изначально он был создан для Internet Explorer, но спустя время его стали поддерживать и другие браузеры.

Итак, как же создать бегущую строку? На самом деле нужно просто ввести необходимый текст в парном теге <marquee> – и он «побежит». Другое дело, как именно он будет двигаться.

Ниже я добавил таблицу с описанием важных атрибутов данного элемента.

Атрибут Описание
behavior Указывает способ передвижения контента:

alternate – содержимое двигается между двумя границами, отбиваясь от них;

scroll – объект движется как бы по кругу (появляется с одной стороны, скрывается с другой);

slide – контент проходит весь путь и останавливается.
loop Определяет сколько раз будет повторяться содержимое описываемого тега. Например, -1 используется для бесконечного повторения.
direction Устанавливает направление передвижения:

down – движется с верхнего края вниз;

left – от правого края влево;

up – от нижней границы к верхней;

right – слева направо.
scrollamount Задает пиксельное расстояние между текущим положением объекта и следующим. Влияет на скорость движения. Изначально равен 6.
scrolldelay Также влияет на скорость «бега», однако за счет частоты обновления. Устанавливает задержку в миллисекундах.

Теперь пришло время опробовать полученные знания на практике. Вставьте ниже представленную программную реализацию бегущих строк в диалоговое окно для кода и запустите в браузере.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Пример</title>
  <style>
 .one {
 width:350px;
 height:80px;
 border-bottom: 8px double #000;
 text-shadow: #000 0px 1px 1px;
 color: #D9470B;
 font-size: 45px;
 font-weight: bolder;
 margin-left:30px;
padding-left:25px;
 }
</style>
 </head>
 <body>
<marquee class = "one" behavior ="alternate" direction=up scrollamount=12>Попрыгунчики</marquee>
<marquee direction="right" scrollamount=15"><img src="http://www.playcast.ru/uploads/2013/11/21/6622284.gif" /></marquee>
 </body>
</html>

На странице отобразились две анимации: бегущая (а точнее прыгающая) строка и скачущая лошадь.

Падающий снег

Падающий снег

С приближением зимних месяцев многие владельцы интернет-ресурсов украшают свои веб-сайты веточками ели, праздничными игрушками или падающим снегом. Последним пунктом мы и займемся.

Создать снежинки возможно разными способами. Некоторые рисуют свои шаблоны на прозрачном фоне, другие используют готовые материалы из интернета, а третьи взывают к средствам css. Я решил присоединиться к последней группе и поколдовал над стилями.

Как вы уже догадались, в этот раз анимация будет создаваться исключительно встроенными механизмами каскадных стилевых таблиц, хотя существуют и другие скрипты решения. Также мы не будем использовать html, а возьмем только стандартную разметку.

Для того чтобы создать падающий снег, необходимо использовать такие инструменты:

свойство animation (которое появилось в спецификации css3) и блок @keyframes.

@keyframes помогает определять состояние элементов веб-страницы в конкретный момент времени и таким образом заставляет их двигаться. Ключевое слово from устанавливает начальное расположение объектов, а слово to – конечное.

Общий вид объявления: @keyframes имя {from{…} to {…} }

Animation же разделяется на несколько параметров, 4 из которых мы будем использовать.

Свойство Предназначение
animation-name Именует анимацию
animation-duration Указывает продолжительность воспроизведения в милисекундах.
animation-timing-function Устанавливает, как будет меняться скорость в течение движения объектов.
animation-iteration-count Отвечает за количество повторов. Можно проигрывать бесконечно.

Простой пример анимации падающего снега на css

А теперь пример:

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
<!DOCTYPE html>
<html>
<head>
<style>
body {
   background: #010101;
   background-image:
      -webkit-gradient(radial, 51% 51%, 2, 51% 51%, 40, from(white), color-stop(0.2, rgba(250,250,250,.4)), to(transparent)),
      -webkit-gradient(radial, 41% 41%, 1, 41% 41%, 25, from(white), color-stop(0.5, rgba(194,248,210,.4)), to(transparent)),
      -webkit-gradient(radial, 38% 38%, 1, 38% 39%, 15, from(rgba(187,255,255,.9)), color-stop(0.2, rgba(197,255,255,.5)), to(transparent)),
      -webkit-gradient(radial, 45% 45%, 6, 45% 45%, 45, from(rgba(255,255,255,.4)), color-stop(0.4, rgba(240,230,250,.2)), to(transparent));
   background-size: 600px 500px, 340px 280px, 255px 260px, 370px 250px;
   background-position: 0 2px, 71px 63px, 3px 17px, 6px 180px;
 
   animation-name: mov;
   animation-duration: 4с;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
 
   -webkit-animation-name: mov;
   -webkit-animation-duration: 4s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
}
@keyframes mov
{
   from {
         background-position: 0 2px, 71px 63px, 3px 17px, 6px 180px;
   }
   to {
         background-position: 29px 190px, 390px 600px, 129px 350px, 90px 700px;
   }
}
}
 
</style>
</head>
<body>
</body>
</html>

Я рассказал все, что хотел. Желаю удачи в обучении! Рассказываете друзьям о моем блоге и подписывайтесь на обновления. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 5211 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:
  • Алена

    Спасибо большое !

    13.05.2019 в 10:35
    • Роман

      Алена, рад помочь!

      25.05.2019 в 14:19
  • Любовь

    Лошадь побежала а строка так и осталась на месте ...((( =( 8)

    12.02.2020 в 15:45
  • Юлия

    Как с делать анимацию, чтобы менялось фото на сайте!!?? Помогите пожалуйста уроком.

    20.04.2020 в 16:00