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

 

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

Шаг 1. JS

Так как разметки и стилей у нас практически не будет, а то что есть, используется для демонстрации мы перейдем сразу к скрипту.

В коде мы описали, что выполняет каждый блок:

// Создание шейдера

Вот такой замечательный эффект у нас получился, думаю для мелких изображений на сайте обязательно стоит попробовать. А вы что думаете?

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