Эффект следования за мышью, как следует из названия, заключается в том, что элемент будет следовать за движением мыши и совершать соответствующее движение. Возможно, это выглядит примерно так.
Вообще говоря, CSS отвечает за представление, а JavaScript — за поведение. Эффект следования за мышью — это поведение, и JavaScript обычно необходим для его достижения.
Разумеется, в этой статье речь идет о том, как использовать CSS для имитации некоторых анимационных эффектов поведения мыши без JavaScript.
Принцип
Если взять в качестве примера вышеприведенную демонстрацию, то для того, чтобы использовать CSS для реализации следования за мышью, самым важным моментом является следующее:
Как отслеживать, где находится текущая мышь в реальном времени?
На самом деле, многие эффекты CSS неотделимы от слова «повязка». Чтобы отслеживать, где в данный момент находится мышь, нам просто нужно заполнить страницу элементами:
Мы используем 100 элементов, чтобы покрыть всю страницу. При наведении курсора отображается цвет. Основной код SCSS выглядит следующим образом:
<div class="g-container">
<div class="position"></div>
<div class="position"></div>
<div class="position"></div>
<div class="position"></div>
... // 100 divs
</div>
.g-container {
position: relative;
width: 100vw;
height: 100vh;
}
.position {
position: absolute;
width: 10vw;
height: 10vh;
}
@for $i from 0 through 100 {
$x: $i % 10;
$y: ($i - $x) / 10;
.position:nth-child(#{$i + 1}) {
top: #{$y * 10}vh;
left: #{$x * 10}vw;
}
.position:nth-child(#{$i + 1}):hover {
background: rgba(255, 155, 10, .5)
}
}
Мы можем получить такой эффект:
Хорошо, если эффект hover каждого элемента убран, то работа страницы в это время не имеет никакого эффекта. Но в то же время, через псевдо :hover мы можем узнать, какой интервал на странице.
Продолжим, добавим на страницу элемент (круглый шар), и расположим его абсолютно посередине страницы:
<div class="g-ball"></div>
.ball {
position: absolute;
top: 50%;
left: 50%;
width: 10vmax;
height: 10vmax;
border-radius: 50%;
transform: translate(-50%, -50%);
}
Наконец, с помощью селектора сиблингов элементов ~ мы управляем положением элемента blob при наведении на страницу (фактически наведении на сотню скрытых div) по тому div, над которым мы сейчас наведены.
@for $i from 0 through 100{
$x: $i % 10;
$y: ($i - $x) / 10;
.position:nth-child(#{$i + 1}):hover ~ .ball {
top: #{$y * 10}vh;
left: #{$x * 10}vw;
}
}
На данный момент достигнута простая чистая CSS-реализация эффекта следования за мышью, для вашего удобства посмотрите на следующее изображение для понимания.
Если вы хотите просмотреть полную демонстрацию, вы можете нажать здесь:CodePen Demo — CSS для достижения эффекта следования за мышью
Существующие проблемы
Что касается приведенной выше демонстрации, то в ней все еще есть много недостатков, таких как
низкая точность
Вы можете контролировать только перемещение элемента в пространство, где находится div, а не точное положение мыши. Для этого мы можем оптимизировать, увеличив количество скрытых div’ов. Например, увеличить 100 tiled divs до 1000 tiled divs.
Движение недостаточно плавное
Эффект не выглядит достаточно плавным, и это может потребовать оптимизации с помощью разумной функции смягчения и соответствующей задержки анимации.
Больше попыток
Хм. Принцип освоен, так что давайте посмотрим, какие еще интересные эффекты мы можем создать, используя эту технику.
CSS-эффект следования мыши за кнопкой
Сначала я увидел этот эффект на CodePen, используя SVG + CSS + JS, и подумал, что, используя только CSS, я могу скопировать.
CodePen Demo — Следование за мышью
Что ж, идеал очень богат, но реальность очень трудна. Используя только CSS, все еще существует множество ограничений.
- Но мы все еще можем использовать методы, описанные выше, чтобы добиться следования за мышью
- Использование фильтра CSS
filter: blur() contrast()для имитации смешивания элементов, см. эту статью: Советы и детали CSS-фильтра, о которых вы не знали
Итак, посмотрите на версию имитации банкротства с использованием только CSS.
Это немного слишком странно, поэтому вы можете немного подтянуть эффект, регулируя цвета, силу фильтра (просто пробуя все…), чтобы получить немного лучший и похожий эффект: !
CodePen Demo — CSS эффект следования мыши за кнопкой
Полноэкранная анимация следования мыши
Ладно, давайте, вот что-то более яркое. Ну, это как раз то, что нужно. 😅
Если мы управляем не одним элементом, а несколькими. Тогда эффекты анимации между элементами будут настроены на разные переходы-задержки, последовательные движения-задержки. Ух ты, интересно подумать. Вот, например.
Демонстрация CodePen — анимация следования мыши PURE CSS MAGIC MIX
Если бы мы могли проявить немного больше фантазии, то могли бы столкнуться с чем-то еще.
Этот эффект — работа японского автора CodePen, который мне очень нравится, Юсуке Накая, исходный код: Demo — Только CSS: Водная поверхность
Индикация следования мыши
Конечно, необязательно указывать движение элемента. Техника использования div для разворачивания страницы с целью захвата текущей позиции элемента может быть использована и для других эффектов, например, для индикации движения мыши: !
- при наведении на div фона элемента измените
transition-duration: 0sу div, на который в данный момент наведено указание, и задать цвет фона при наведении, так что div, на который в данный момент наведено указание, будет отображаться немедленно - Когда мышь покинет div,
transition-durationdiv изменится на состояние по умолчанию, то естьtransition-duration: 0.5s, и цвет фона исчезнет, так что цвет фона оставленного div будет медленно переходить в прозрачный, вызывая эффект виньетки.
Демонстрация CodePen — переход раковины
Наконец-то
Больше замечательных технических статей по CSS собрано на моем Github — iCSS.
И, возможно, вам понравится мой CodePen, в котором собрано большое количество удивительных CSS-эффектов.
Ну, вот и все для этой статьи, надеюсь, она вам поможет :).