Анимация на HTML страницу

Статья № 5

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

Начинающему вебмастеру

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

Новогодняя гирлянда

Используя этот скрипт, вы погрузите свой сайт в атмосферу зимнего праздника.
Мигающая разноцветная гирлянда обязательно преобразит ваш сайт!

Установка:

Добавьте этот код между тегами </head> и <body>

Пример:

Как это выглядит на сайте

ПОСМОТРЕТЬ

Падающий снег для сайта

Удивите своих пользователей — устройте настоящую снежную бурю прямо на страницах Вашего ресурса! Данный скрипт особо популярен в преддверии Нового года. Устанавливать его, я бы советовал за 10-15 дней до наступления праздников, а после его можно и отключить.

Данный эффект сделан на CSS, что в отличии от JavaScript не создаёт нагрузок на браузер посетителя сайта.
Реализовать можно на любом сайте независимо от его CMS (движка).

Код CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url('img/snow.png'), url('img/snow3.png'), url('img/snow2.png');
    -webkit-animation: snow 20s linear infinite;
    -moz-animation: snow 20s linear infinite;
    -ms-animation: snow 20s linear infinite;
    animation: snow 20s linear infinite;
}

@keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    50% {background-color:#b4cfe0;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px; background-color:#6b92b9;}
}

@-ms-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

Добавьте данный код в основной css файл вашего сайта.

В коде правильно должен быть указан код к пути изображениям в свойстве background-image у класса body.

Как это выглядит на сайте

ПОСМОТРЕТЬ

2. Загрузите файл скрипта на свой сайт распакуйте его и вставьте код в нужной вам части страницы, правильно указав путь к скрипту.

Из этой статьи Вы узнали про анимацию на сайте.

Читайте также:

Создано: 05.05.2021.|Обновлено: 24.12.2022.