Перемещение элемента CSS background-position с помощью позиции мыши

Перемещение элемента CSS background-position с помощью позиции мыши

От автора: предположим, вы хотите переместить CSS background position элемента, когда на него наводится указатель мыши, чтобы сделать дизайн более интересным.

У вас есть такой элемент:

И вы задаете для него фон:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вы можете настроить положение фона в JavaScript следующим образом:

Или вы можете вместо этого изменить пользовательские свойства CSS в JavaScript:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вот пример, в котором фон перемещается непосредственно через JavaScript, но с примененным переходом, поэтому он плавно перемещается в новую позицию, а не дергается:

Или вместо этого вы можете перенести фактический элемент (вместо фона). Вы сделали бы это, если в перемещающемся элементе был бы какой-то контент или интерактивные взаимодействия. Вот пример, который снова задает пользовательские свойства CSS, но затем перемещает сам элемент через translate() и calc(), чтобы замедлить скорость.

Я уверен, что есть множество других способов сделать это — перемещение SVG viewBox, скрипты, управляющие холстом, webGL … кто знает! Если у вас есть какие-то более увлекательные способы сделать это, напишите в комментариях.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree