Анимированные иконки/кнопки для сайта

Анимированные иконки/кнопки для сайта

Хе Хей. Всем привет. Сразу извиняюсь за такое длинное исчезновение. Но это не означает, что я забросил блог. Блог живет и развивается. В контакте становится все больше подписчиков. Так что мне нужно подсобраться и выкладывать почаще всяких разных вкусностей. Давненько я не выкладывал таких вещей, как анимированные иконки для сайта. Эти иконки при нажатии очень круто отыгрывают какую-то анимацию. В сборке 17 видов кнопок с разной анимацией.

Иконки взяты font-awesome. Также в демо подключен шрифт Patrick Hand SC. Скорее всего, он вам не понадобится, поэтому вы можете его не подключать. И вообще я сейчас пошагово объясню как подключить эти супер иконки к себе на сайт.

Инструкция по подключению анимированных иконок

Шаг 1. Подключаем css

В <head> вставляем следующий код. Пути к css можете поменять, если папка со стилями лежит у вас в какой-то другой папке.

        <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.5.0/css/font-awesome.min.css" />
        <link rel="stylesheet" type="text/css" href="css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/icons.css" />
        <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]→

В demo.css, Вам нужно будет убрать некоторые строчки. Например, цифры, которые присутствую в демо можно убираются удалением вот этого атрибута:

.grid__item::before {
    content: counter(gridcounter);
    font-size: 5.5em;
    font-weight: bold;
    line-height: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    counter-increment: gridcounter;
    text-align: center;
    color: #2b2929;
    font-family: 'Patrick Hand SC', cursive;
    -webkit-transform: translate3d(0.2em,50%,0);
    transform: translate3d(0.2em,50%,0);
}

И вам нужно будет изменить атрибут

.grid__item {
    position: relative;
    text-align: center;
    background: #f0f0f0;
    margin: 0 0 5em;
    width: 100%;
    min-height: 36em;
    display: -ms-flexbox;
    -ms-flex-pack: center;
    -ms-flex-align: center;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-align-content: center;
    align-content: center;
}

Изменив длину, ширину и позиционирование иконки

Также вам скорее всего помешает

body {
    font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    counter-reset: gridcounter;
    color: #000;
    background: #f9f9f9;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

так как изменит цвет фона и подключен не нужный шрифт. Вообщем, тут надо будет поработать над css. Правда не так много.

Шаг 2. Подключаем скрипты

Вниз сайта до </body> вставляем

        <script src="js/mo.min.js"></script>
        <script src="js/demo.js"></script>

Шаг 3. Распаковываем архив и закачиваем файлы

Из архива Вам нужно закачать в корень вашего сайта 4 папки: css, js, img и fonts

Шаг 4.  Вставляем иконку на сайт

Для того, чтобы вставить любую из иконок, нужно выбрать ее код с помощью инспектора или просто методом тыка в исходниках. Но каждую иконку нужно обернуть в

<ol class="grid">
                <li class="grid__item">

Иконка

                </li>
</ol>

То есть одна иконка будет выглядеть так:

<ol class="grid">
                <li class="grid__item">

<button class="icobutton icobutton--microphone"><span class="fa fa-microphone"></span></button>

                </li>
</ol>

А две иконки вот так:

<ol class="grid">
                <li class="grid__item">
                        <button class="icobutton icobutton--microphone"><span class="fa fa-microphone"></span></button>
                </li>
                <li class="grid__item">
                        <button class="icobutton icobutton--map-marker"><span class="fa fa-map-marker"></span></button>
                </li>
</ol>

Ну вот и все, иконки подключены. Найти применение этим иконкам довольно легко: это может быть кнопка лайка или подтверждения какого-то действия. Эти анимированные иконки для сайта взяты с Codrops и работают на скрипте mo.js. На этом все. Надеюсь, до скорых постов. Пока

Похожие статьи