60 анимированных иконок на JavaScript

Сегодня рассмотрим небольшую библиотеку анимированных иконок на JavaScript для веб-сайта. Они очень просты в использовании, не нагружают ресурс, стильные и динамичные) У иконок есть два состояния: статичное и hover-эффект. И что немало важное, любой размер иконки не влияет на ее качество. Даже если вы сделаете ее на всю страницу или, наоборот, в один пиксель – они все равно будет отлично читабельны.

60 анимированных иконок на JavaScript

Демо Скачать

Плагин называется 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>
Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *