Как сделать фон анимированные для сайта

Как сделать фон анимированные для сайта

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 58024b59ec977341 • Your IP : 5.45.65.94 • Performance & security by Cloudflare

Анимация снова в моде, как и много лет назад, когда для этой цели применялся GIF. Только сейчас всё делается с помощью стилей, что удобнее и современнее. Так что добавим немного хаоса и движения в этот мир и сделаем фон на веб-странице анимированным?

Почему именно фон? У него куча плюсов. Главное, фон лежит себе на заднем плане и не мешает выводить поверх него остальные элементы. К тому же у background есть множество параметров, включая функции для градиентов, всё это позволяет разнообразить создание фона.

Для начала сделаем пока просто вывод фона для всей страницы без анимации. Стиль получится такой:

Фоновая картинка city.png имеет ширину 1000 пикселей и повторяется без стыков по горизонтали. На рис. 1 она показана в уменьшенном виде. Для красоты добавим на заднем плане градиент, он будет создавать эффект тёмного неба.

Рис. 1. Картинка для фона

Высота не совпадает с высотой окна браузера, а равна высоте контента. Поэтому просто так фон поместить в самый низ окна не получится. Для этого применяют всякие хитрости, вроде установки высоты 100% для селекторов html и body . Мы пойдём другим путём и добавим параметр fixed к каждому фону. Он фиксирует фон на одном месте и не прокручивает его, как обычно, вместе с содержимым. Заодно привязывает фон к окну браузера. Вот как выглядит страница с фоном (рис. 2).

Читайте также:  Java корень n степени

Теперь добавляем бесконечную анимацию. Пусть город плавно движется слева направо. Поскольку фон у нас повторяется без стыков, получится зацикленное движение без рывков. В свойстве animation пишем имя нашей анимации city, добавляем линейное движение через linear и ставим infinite для бесконечного повтора. Время анимации определяется методом Подборского, в общем, ставим что больше нравится. У меня 30 секунд.

Теперь переходим к ключевым кадрам. Нам надо только менять позицию фона. Мы знаем, что ширина фона равна 1000px, на это значение и сдвигаем фон.

Можно менять от -1000 до 0 или 0 до 1000, это не имеет значения. Градиент под картинкой не трогаем. Хотя теоретически его движение по горизонтали не должно быть заметно, Хром под Windows добавляет небольшой шум к фону. Без анимации градиент выглядит лучше, к тому же она нам совсем ни к чему, двигаться должна только картинка города.

Добавляем префикс -webkit где это требуется и анимированный фон готов. Для наглядности поверх выводится полупрозрачный блок (пример 1).

Пример 1. Анимированный фон

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

В итоге у нас получилось аж четыре фона и для background-position их надо все указывать. Чем фоновая картинка хороша, её можно легко позиционировать за пределами окна, задавая отрицательное значение координат. При этом никаких полос прокрутки не появится, это же фон, а не обычный элемент. Так что размещаем облака справа, а двигаться они будут далеко влево. Отдельно задать скорость движения каждого рисунка нельзя, потому что background у нас один, так что регулируем скорость, увеличивая или уменьшая дистанцию движения через background-position (пример 2).

Пример 2. Анимация нескольких фоновых картинок

Пару дней назад мне задали вопрос по поводу того, как сделать анимированный фон на странице. При этом человек знал и про background, и про CSS. Он у меня попросил скрипт на JavaScript, позволяющий делать анимацию фона. Я ему сказал, что здесь JavaScript совсем не нужен. И показал ему, как можно сделать анимированный фон только с применением CSS. Вот об этом способе я и напишу в данной статье.

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

Читайте также:  86 Или 64 разрядная система как узнать

html <
background: url(images/bg.gif) no-repeat; /* Задаём фон GIF-картинкой */
height: 100%; /* 100% высота страницы */
>

Ключевым моментом здесь является GIF-изображение. Думаю, что Вам известно, что в GIF можно делать достаточно сложную анимацию (в рамках целесообразности, конечно). Поэтому никаких скриптов не нужно, чтобы сделать любой фон, а не только страницы, анимированным.

Таким образом, достаточно создать анимированный GIF, вставить его на страницу самым простым CSS-кодом, и у Вас получится анимированный фон на странице.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 19 ):

    Совсем просто интересно зачем задавали такой вопрос

    Не нашел где спросить, спрошу тут) У меня есть сайт свой, могу показать если попросите, так вот, когда я его открываю через телефон (iphone), то он открывает его не весь, а часть где-то 80%, когда все остальные сайты открываются на 100% такая же фигня и в яндекс баре (закладки) там окошки с сайтами, так же на окошке этом сайт виден на 80% а все остальные вмещает на 100%. Сравнивал CSS коды, разницы существенной не заметил, Помогите пожалуйста) Как то туфтово все описал, думаю Вы поймете)

    Дело в вёрстке, точнее в её низком качестве. Ничего сказать невозможно, кроме как посоветовать научиться хорошо верстать и всё сделать заново. Вот курс по вёрстке: http://srs.myrusakov.ru/makeup

    Михаил! Помогите! У меня на сайте есть шапка и на шапке кнопки! Если смотреть на сайте при масштабе 100% то всё нормально, но если смотреть на 50% или 200% и т.п. Шапка и кнопки сдвигаются! А на вашем сайте только масштаб уменьшается, а кнопки остаются на местах! Как вы это сделалил напишите пожалуйста.

    Читайте также:  Как скрыть рабочий стол в windows 7

    Используйте относительные размеры (то есть проценты), тогда они будут изменяться в зависимости от масштаба.

    Я пробовал! Но если я ставлю width = 100%; То у меня появляются отступы слева и справо! Тоже самое и с высотой! Что делать?

    Отступы слева и справа — это margin (или padding). Вряд ли они у изображения, возможно, они у body. Поэтому поставьте у body

    У меня шапка залита в . Поставить это в head. Или перенести шапку в body?

    В вообще не должно быть контента. Весь контент в .

    перенесу шапку в body и сделаю как вы писали! Спасибо

    Шапку сделал как вы сказали! Всё нормально! А вот у меня прямо на шапке есть кнопки навигации! Как с ними быть? Потому что если я меняю масштаб то шапка остаётся как было, а кнопки сдвигаются кто куда! Попробовал расставить кнопки на шапке с помощью % , а не px! Но это не помогло!

    Значит проблема в Вашей верстке. Что именно происходит с кнопками?

    У меня сделаны анимированные кнопки по вашему уроку http://myrusakov.ru/css-hover-image.html Ну вот когда я меняю масштаб в браузере то кнопки(которые сделаны на картинке-шапке) Начинают "Прыгать"! Сбивается их положение! Если они были до этого на шапке то они выходят за её пределы и т.п.

    Они так и должны прыгать. Иначе придется ставить фиксированное position. Задавать left, top и так далее.

    Нужно position: absolute; и свойства left, top, right и bottom. И ещё margin-top, а не margin top.

    Всё равно что-то не получается!:( вот код: .but < top: 220px; position: absolute; right:100px; bottom:290px; left: 500px; >И тем не менее они всё равно смещаются

    Всё! Вроде разобрался! Заместо position: absolute ПОСТАВИЛ: position: static (что в прочем и так по умолчанию стоит!) И всё стало норм!:)

    У меня почему-то не получилось задать фон таким способом.

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Ссылка на основную публикацию
    Как сделать ксерокопию на принтере epson
    Вы можете использовать сканер с принтером, подсоединенные к компьютеру, в качестве копировальной машины. Вы можете увеличивать или уменьшать изображение, восстанавливать...
    Как самостоятельно оцифровать видеокассету
    На сегодняшний день эра видеокассет безоговорочно подошла к концу, а на ее место пришли цифровые носители. Что делать в том...
    Как сбросить биос джампером
    Настройки базового оборудования и времени вашего компьютера хранятся в БИОС и, если по какой-то причине у вас возникли проблемы после...
    Как сделать левый ноль в частном доме
    Популярные материалы Today's: Как сделать левое электричество в частном доме. Подключение левой розетки внутри дома Здесь применяется тот же самый...
    Adblock detector