Сегодня рассмотрим небольшую библиотеку анимированных иконок на JavaScript для веб-сайта. Они очень просты в использовании, не нагружают ресурс, стильные и динамичные) У иконок есть два состояния: статичное и hover-эффект. И что немало важное, любой размер иконки не влияет на ее качество. Даже если вы сделаете ее на всю страницу или, наоборот, в один пиксель – они все равно будет отлично читабельны.
Плагин называется titanic и включает в себя 60 анимированных иконок в контурном стиле. В общих характеристиках я уже описал его, разве что для полного понимания посмотрите демонстрацию в примерах по ссылке ниже.
Подключение CDN
<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> <!--Initializing--> <script> var titanic = new Titanic({ hover: true, // auto animated on hover (default true) click: true // auto animated on click/tap (default false) }); </script>
Классы иконок
/*цвет иконок*/ .titanic path { fill: #249795; stroke: #249795; }
<div class='titanic titanic-checkbox'></div> <div class='titanic titanic-expand'></div> <div class='titanic titanic-cheap'></div> <div class='titanic titanic-expensive'></div> <div class='titanic titanic-mailbox'></div> <div class='titanic titanic-mic'></div> <div class='titanic titanic-no-mic'></div> <div class='titanic titanic-online'></div> <div class='titanic titanic-caps'></div> <div class='titanic titanic-pin'></div> <div class='titanic titanic-chat'></div> <div class='titanic titanic-idea'></div> <div class='titanic titanic-power'></div> <div class='titanic titanic-pause'></div> <div class='titanic titanic-shopping'></div> <div class='titanic titanic-smile'></div> <div class='titanic titanic-stop'></div> <div class='titanic titanic-unlock'></div> <div class='titanic titanic-zoom'></div> <!--2--> <div class='titanic titanic-broken-link'></div> <div class='titanic titanic-clear-filters'></div> <div class='titanic titanic-deposit-withdrawal'></div> <div class='titanic titanic-menu-close'></div> <div class='titanic titanic-open-closed'></div> <div class='titanic titanic-open-message'></div> <div class='titanic titanic-search-close'></div> <div class='titanic titanic-shipped'></div> <div class='titanic titanic-sorting-alphabet'></div> <div class='titanic titanic-sorting-numerical'></div> <div class='titanic titanic-switch'></div> <div class='titanic titanic-toggle'></div> <!--3--> <div class='titanic titanic-restart'></div> <div class='titanic titanic-install'></div> <div class='titanic titanic-folder'></div> <div class='titanic titanic-buy'></div> <div class='titanic titanic-rotate-phone'></div> <div class='titanic titanic-mute'></div> <div class='titanic titanic-volume-1'></div> <div class='titanic titanic-volume-2'></div> <div class='titanic titanic-trash'></div> <div class='titanic titanic-cloud'></div> <div class='titanic titanic-hourglass'></div> <div class='titanic titanic-delete'></div> <div class='titanic titanic-twitter'></div> <div class='titanic titanic-facebook'></div> <div class='titanic titanic-youtube'></div> <div class='titanic titanic-right-left'></div> <div class='titanic titanic-up-down'></div> <div class='titanic titanic-expand-arrow'></div> <div class='titanic titanic-forward-arrow'></div> <div class='titanic titanic-thumb'></div> <div class='titanic titanic-facebook-like'></div> <div class='titanic titanic-star'></div> <div class='titanic titanic-heart'></div> <div class='titanic titanic-eye'></div> <div class='titanic titanic-refresh-wait'></div> <!--4--> <div class='titanic titanic-menu-arrow'></div> <div class='titanic titanic-menu-minus'></div> <div class='titanic titanic-shield'></div> <div class='titanic titanic-speech'></div>