Анимированные SVG иконки на JavaScript
 | |
| Вашему вниманию большая и также оригинальная подборка анимированных иконок на JavaScript, которые отлично подойдут на современный дизайн сайта. По своей конструкций они не сложны в использование, плюс в том, что совершенно не будут грузить сайт при установке на его. Но и нужно обратить на дизайн, который по своему динамичен и смотрится стильно. По умолчанию иконки содержат несколько состояний, а точнее два, это статичное и hover-эффект. Библиотека со значком SVG и встроенным кодом, соответствующим набору анимации Titanic. Где предполагаемая SVG иконка, которая изначально анимирует, а реализацию производит JavaScript. Представляемая библиотека JavaScript с набором иконок SVG и встроенным кодом, где идет соответствие анимации с различными элементами, которые часто используемыми для веб страниц и приложений для смартфонов. И вы можете заметить, что при увеличение по размеру, то они совершенно не теряют своей привлекательности, что качество остается изначально высоким. Если вы задумали установить на страницу и сделать их под один пиксель, то здесь все равно они отлично читабельны, как при самом небольшим вариантом, так и на огромном, если нужно поставить большой знак. Идет плагин, под названием titanic, где по умолчанию включает в себя 60 анимированных иконок, которые соответствуют контурному стилю. В общем по ним все кратко описано, здесь нужно самостоятельно посмотреть на demo странице, где все знаки представлены. Рабочий процесс:  Как использовать иконку SVG Шаг 1: Внешний файл Напишите этот скрипт как внешний файл. Код <head> ... <script src="https://cdn.rawgit.com/icons8/titanic/master/dist/js/titanic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.5.9/bodymovin.min.js"></script> </head> Вы можете загрузить файл на свой сервер и использовать его. Код <head> ... <script src="titanic.min.js"></script> <script src="bodymovin.min.js"></script> </head> Шаг 2: JavaScript Инициализируйте скрипт, написав следующее в /body. Код <body> ... содержание ... <script> var titanic = new Titanic(); </script> </body> Если вы загрузили его на свой сервер, загрузите и укажите папку значков. Код <body> ... содержание ... <script> var titanic = new Titanic('https://Мой домен/icons/'); </script> </body> Шаг 3: HTML Иконки можно использовать, просто назначая классы элементам div и т. Д. Код <div class='titanic titanic_chat'></div> Настроить цветность: Поскольку иконка SVG, вы можете изменить размер и цвет с помощью CSS. Код /*цвет иконок*/ .titanic { width: 85px; height: 85px; } .titanic path { fill: #187372; stroke: #156765; } Классы иконок: HTML Так выглядит: Иконки являются элементами div - которые изначально могут быть легко реализованы веб разработчиком. Где идут по умолчанию, также при наведении курсора, вы можете анимировать или изменить. Здесь представлены современные иконки с анимацией, которая происходит при наведении на одну из кнопок. Также много разных вариантов, которые можно подобрать под разные применение, от дизайна до функциональности. Также представлено на GitHub 1. 60 анимированных иконок 2. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |