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

 

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

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

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

Шаг 1. HTML

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

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

Создаем интерактивную иллюстрацию для сайта RUDEBOX

Шаг 2. CSS

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

Шаг 3. JavaScript

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

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

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