Мобильная
версия

Анимированный логотип

Дата: Категория: JavaScript

Я постоянно продолжаю совершенствовать свой интернет магазин (чего не скажешь о блоге, но ему это и не нужно), и сегодня я расскажу вам как я делал анимированный логотип - Крутящиеся шестеренки позади буквы R.

Пример вы можете посмотреть на моем сайте - https://robom.ru или на следующей гифке.

А теперь подробнее о том, как я это делал.

Так как постоянно крутящаяся штука на сайте очень напрягает (да что там на сайте - я пока статью пишу она мне уже надоела), то я решил сделать движение только по наведению курсора. В таком случае вариант с гифкой отпал сразу, и я решил сделать все это дело с помощью спрайтов. Но об это позже.

Логотип я сделал не особо заморачиваясь - нашел в интернете шестеренки, поиграл с цветами и нарисовал на их фоне огромную букву R.

Так как я не силен в создании анимации я решил сделать все это средствами браузера и после просто заснять и раскадрировать.

Получается что нам нужно 4 элемента - 3 шестерни и буква R

Исходник шестеренок вы можете увидеть здесь

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

Дальше просто дело техники.

Вписываем нашу шестеренку в квадрат.

 

Откадрируем ее в этот квадрат, скопируем и повернем на 180 градусов. После всех действий у нас получилась вот такая штука

 Как видите - уже очертания шестеренки вырисовываются очень даже хорошо. И остается только обрезать лишнее, чтобы получить . . .

 Теперь дело за малым - осталось все расположить в браузере и заставить вращаться.

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

После того как нам удалось все это заставить вращаться в браузере записываем эту часть экрана с помощью программы

simplescreenrecorder

И обрабатываем до нужной длины/разбиваем на кадры с помощью программы

openshot 

 Обе программы находятся в стандартных репозиториях ubuntu, и достаточно просты. Так что разъяснять их работу не буду.

После того как у нас получилась нарезка кадров переведем все это дело в спрайт с помощью любого онлайн генератора. Я пользовался вот этим.

После перевода у меня получился достаточно большой спрайт - около 600 Кб против прежних 15. Меня это категорически не устраивало. Ну правда, что за дела? На главной странице картинка больше полу мегабайта. Так дела не делаются и я стал искать решение.

Решение нашлось достаточно быстро - так как на изображении только 2 цвета, да и формы не слишком сложные я решил использовать SVG. Перегнать изображение в SVG онлайн можно здесь - там правда на одну регистрацию дается всего 2 перевода изображения, но не беда - на помощь как обычно приходит 10minute-mail. Название говорит само за себя.

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

После перевода у меня получился размер изображения в 180 Кб, что было, конечно, лучше, но не так хорошо как прежние 15.

Беглый поиск показал что SVG можно перевести в формат SVGZ - сжатый SVG

Для того чтобы ваш apache нормально отдавал SVGZ, в .htaccess нужно добавить следующие строки

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

 И после сжатия мы получаем следующую картину - Теперь SVGZ файл со спрайтами весит всего 67 Кб!

Ну вот и все - подготовительная работа завершена, и теперь приступим к анимации логотипа.

Я использовал данный плагин. Он достаточно богатый функционально и в тоже время простой и маленький (подробнее читайте по ссылке).

Вот и все - теперьп росто повесим запуск на событие onMouseOver и остановку на событие onMouseOut.

Посмотреть живой пример можно в моем магазине - https://robom.ru.

Как видите, все это достаточно просто реализуется и выглядит очень интересно.

Теги: #JavaScript, #jQuery, #robom.ru, #sprite

Ваша оценка:

Рейтинг: 10.0 (Оценок: 3)

Комментарии (1):

Сыч
2017-04-27 17:15
Крутой логотип получился, заценил на сайте!

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

Copyright © DOC_tr 2015-2017 г. Все права защищены
Яндекс.Метрика
Перейти к мобильной версии