Эффект размытия при движении средствами SVGВ этой статье мы рассмотрим каким образом можно воспроизвести данный эффект при перемещении объектов по вертикали или горизонтали. Данный эффект довольно-таки часто используется в анимационном дизайне и анимации движения объекта. Для того чтобы реализовать эффект размытия нам необходимо применить к перемещаемому объекту эффект размытости в зависимости от скорости и направления движения. В результате мы получим достаточно популярный эффект, который широко используется не только в веб-дизайне.

 

Давайте приступим, мы рассмотрим основные шаги, которые позволят создать нам такой замечательный эффект для галереи изображений.

Шаг 1. HTML

Для размытия элемента воспользуемся SVG фильтрами. В нашем случае понадобится фильтр под названием feGaussianBlur:

Затем создаем иерархию самих изображений, при этом мы создаем общий контейнер в котором будет позиционироваться вся галерея:

Теперь нам необходимо добавить точки быстрой навигации, которые будут расположены внизу страницы, с помощью их вы можете легко перемещаться по слайдам:

Для указания насыщенности применения эффекта следует использовать атрибут stdDeviation, который принимает два параметра: настройки для вертикальной и горизонтальной направленности.

Эффект размытия при движении средствами SVG

Шаг 2. JS

Для начала запишем фильтр в переменную. Поскольку jQuery не очень хорошо ладит с SVG, то извлекать элемент мы будем с помощью нативных JS функций:

Далее можем играть с настройками. К примеру выставить 12px для эффекта по горизонтали:

Для каждого элемента страницы нам придётся создать отдельный фильтр т.к. он прикрепляется к элементу. Вот как это можно реализовать автоматически:

Следующий шаг: нам нужно вычислить насколько элемент продвинулся за предыдущий кадр. Делать это нужно на каждом кадре. Для получения позиции воспользуемся jQuery функцией offset, которая возвращает координаты элемента относительно страницы, учитывая трансформацию объекта.

Хотим отметить, что применение фильтров и прочих эффектов приводят к большой затрате ресурсов устройства, так что не применяйте данный эффект для огромных объектов.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

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