Как сделать чтобы фон двигался за мышкой html
Свойство background-attachment задает каким образом прокручивать фоновую картинку элемента: вместе с текстом или текст будет скользить по картинке.
Синтаксис
Значения
| Значение | Описание |
|---|---|
| fixed | Картинка фона будет неподвижной, а текст будет скользить по ней. |
| scroll | Картинка фона будет прокручиваться вместе с текстом. |
| local | Фон фиксируется с учетом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остается на месте. |
Значение по умолчанию: scroll .
Пример . Значение scroll
Сейчас свойство background-attachment установлено в значение scroll . Прокрутите элемент по вертикали - вы увидите, как текст прокручивается вместе с фоном:
Анимация снова в моде, как и много лет назад, когда для этой цели применялся GIF. Только сейчас всё делается с помощью стилей, что удобнее и современнее. Так что добавим немного хаоса и движения в этот мир и сделаем фон на веб-странице анимированным?
Почему именно фон? У него куча плюсов. Главное, фон лежит себе на заднем плане и не мешает выводить поверх него остальные элементы. К тому же у background есть множество параметров, включая функции для градиентов, всё это позволяет разнообразить создание фона.
Для начала сделаем пока просто вывод фона для всей страницы без анимации. Стиль получится такой:
Фоновая картинка city.jpg имеет ширину 1000 пикселей и повторяется без стыков по горизонтали. На рис. 1 она показана в уменьшенном виде. Для красоты добавим на заднем плане градиент, он будет создавать эффект тёмного неба.
Рис. 1. Картинка для фона
Высота не совпадает с высотой окна браузера, а равна высоте контента. Поэтому просто так фон поместить в самый низ окна не получится. Для этого применяют всякие хитрости, вроде установки высоты 100% для селекторов html и body . Мы пойдём другим путём и добавим параметр fixed к каждому фону. Он фиксирует фон на одном месте и не прокручивает его, как обычно, вместе с содержимым. Заодно привязывает фон к окну браузера. Вот как выглядит страница с фоном (рис. 2).
Теперь добавляем бесконечную анимацию. Пусть город плавно движется слева направо. Поскольку фон у нас повторяется без стыков, получится зацикленное движение без рывков. В свойстве animation пишем имя нашей анимации city, добавляем линейное движение через linear и ставим infinite для бесконечного повтора. Время анимации определяется методом Подборского, в общем, ставим что больше нравится. У меня 30 секунд.
Теперь переходим к ключевым кадрам. Нам надо только менять позицию фона. Мы знаем, что ширина фона равна 1000px, на это значение и сдвигаем фон.
Можно менять от -1000 до 0 или 0 до 1000, это не имеет значения. Градиент под картинкой не трогаем. Хотя теоретически его движение по горизонтали не должно быть заметно, Хром под Windows добавляет небольшой шум к фону. Без анимации градиент выглядит лучше, к тому же она нам совсем ни к чему, двигаться должна только картинка города.
Добавляем префикс -webkit где это требуется и анимированный фон готов. Для наглядности поверх выводится полупрозрачный блок (пример 1).
Пример 1. Анимированный фон
Добавим больше хаоса на страницу и вставим ещё два облака. Ссылаются они на один файл, но двигаться будут по разному.
В итоге у нас получилось аж четыре фона и для background-position их надо все указывать. Чем фоновая картинка хороша, её можно легко позиционировать за пределами окна, задавая отрицательное значение координат. При этом никаких полос прокрутки не появится, это же фон, а не обычный элемент. Так что размещаем облака справа, а двигаться они будут далеко влево. Отдельно задать скорость движения каждого рисунка нельзя, потому что background у нас один, так что регулируем скорость, увеличивая или уменьшая дистанцию движения через background-position (пример 2).
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Анимации — это круто, правда? Они добавляют изюминку на сайт и позволяют ему выделиться на фоне конкурентов. Но бывает, что вы решили создать сайт исключительно на HTML и CSS, и это несколько ограничивает полет вашей фантазии. И совершенно зря! Даже если у вас в наборе только эти два инструмента, вы все равно можете достигнуть потрясающих визуальных эффектов. В этой статье вы найдете несколько идей, от которых сможете отталкиваться в дальнейшем.
Диагональный градиент
Написать такой код легко, а эффект получается очень интересный.
Скольжение диагоналей
Предыдущий эффект был очень ненавязчивым, а этот гарантированно привлекает внимание.
Анимированный фон
Обратите внимание, насколько прост сам бэкграунд и насколько меняется его восприятие благодаря анимации.
Бесконечный паттерн
Отдельное спасибо @keyframes за бесконечную прокрутку!
Прекрасный анимированный бэкграунд
Просто задержитесь на мгновение и насладитесь тем, насколько привлекательна эта анимация. Такое приятное смешение цветов, а между тем оно совершенно не отвлекает внимание от названия на переднем плане.
Плавающие квадраты
See the Pen Pure Css Animated Background by Mohammad Abdul Mohaiman (@mohaiman) on CodePen.
Снова диагональные линии
Плывущие облака
Да, в названии заявлено, что все на чистом СSS, но когда я увидел этот фон, не смог не добавить его в коллекцию, несмотря на то, что здесь использован CSS(Less).
Надеюсь, эти идеи вдохновят вас на создание собственных интересных эффектов. Поиграйтесь с приведенными CodePen-ми: возможно, таким образом и у вас родится замечательная идея.
Альберт Вескер
Irbis
ну вообще этот параллакс двигает не только фон, но и все подряд что находится в элементе. Сейчас я тебе свой параллакс на движение фона напишу
Irbis
Распиши принцип, как его прикручивать к нужному элементу?
Будет ли работать в виджете (вроде бы должно?)
Вот держи:
Код: Как использовать:
Сейчас скрипт будет крутить фон всей страницы. Чтоб он работал на портале всунь его в шаблон portal_body или в любой виджет.
Чтобы скрипт крутил фон не всей страницы, а только определенного элемента нужнов скрипте найти (4 строка):
Код: element = jQuery('body'), И заменить body на идентификатор нужного элемента.
Например, если имеем на странице
Код:
Irbis
Логика следующая - при движении курсора, добавляем сопровождающему элементу inline-стили позиционирования left и top в зависимости от положения курсора. При этом если курсор наведён на ссылку, то элементу добавляем активный класс, иначе удаляем
Код с комментариями
Данным способом можно делать различные декоративные элементы для курсора, менять их поведение и внешний вид от других возможных событий, добавлять им анимации и так далее
Читайте также: