Анимированные иконки/кнопки для сайта
Хе Хей. Всем привет. Сразу извиняюсь за такое длинное исчезновение. Но это не означает, что я забросил блог. Блог живет и развивается. В контакте становится все больше подписчиков. Так что мне нужно подсобраться и выкладывать почаще всяких разных вкусностей. Давненько я не выкладывал таких вещей, как анимированные иконки для сайта. Эти иконки при нажатии очень круто отыгрывают какую-то анимацию. В сборке 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. На этом все. Надеюсь, до скорых постов. Пока
Комментарии ()