Здравствуйте, любители верстки и веб-языков! Сегодняшней темой публикации по праву стала: «Анимация для сайта 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 | Отвечает за количество повторов. Можно проигрывать бесконечно. |
А теперь пример:
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> |
Я рассказал все, что хотел. Желаю удачи в обучении! Рассказываете друзьям о моем блоге и подписывайтесь на обновления. Пока-пока!
С уважением, Роман Чуешов
Спасибо большое !
Алена, рад помочь!
Лошадь побежала а строка так и осталась на месте ...(((
Как с делать анимацию, чтобы менялось фото на сайте!!?? Помогите пожалуйста уроком.