Современные информационные технологии. Лабораторное занятие №4. Анимированный тулбар с Font Awesome

Вам нужно создать интерактивный тулбар с подключением Font Awesome Icons (FAI) Animated toolbar icons

Анимированный тулбар

Для этого потребуется Javascript, CSS, библиотека jQuery и HTML

I) CSS:

1) Указываете ссылку на стили в googleapis:

@import url('https://fonts.googleapis.com/css?family=Lato');

2) Фон страницы - у меня черный:

body {
background-color: #000000;
}

3) Упаковка тулбара в расположении текста и шрифте:

#wrapper {
text-align:center;
font-family: 'Lato', sans-serif;
text-transform:uppercase;
}

4) Заголовочная часть:

h1 {
padding-top:30px;
font-size:25px;
letter-spacing:15px;
color: #FFFFFF;
}

5) Сам тулбар:

#toolbar {
width:100%;
max-width:670px;
min-width:550px;
margin: 70px auto;
}

6) Основная кнопка. Прописываете в ней свой цвет:

.button {
width:90px;
height:90px;
border-radius:50%;
background-color:#ff0000;
color:#ffffff;
text-align:center;
font-size:3.5em;
position:relative;
left:50%;
margin-left:-45px;
z-index:1;
}

7) Параметры иконок:

.button,.icons{
-webkit-transition: -webkit-all 1s cubic-bezier(.87,-.41,.19,1.44);
transition: all 1s cubic-bezier(.87,-.41,.19,1.44);
}

8) Символ в кнопке:

.button:after {
content:"+";
}

9) Сценарий, что делать с активной кнопкой. Конечно, вращать:

.button.active {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
left:60px;
}

10) Фон блока тулбара под иконками (подложка):

.icons {
width:0%;
overflow:hidden;
height:38px;
list-style:none;
padding:16px 10px 10px 50px;
background-color:#ffffff;
box-shadow: 1px 1px 1px 1px #DCDCDC;
margin:-68px 0 0 45%;
border-radius: 2em;
}

11) Движение открытых иконок:

.icons.open {
width:80%;
margin:-68px 0 0 5%;
overflow:hidden;
}

12) Цвет самих иконок:

.icons li {
display: none;
width:10%;
color:#FF0000;
}

.icons.open li {
width:16%;
display: inline-block;

}

13) Сохраняете все это как .css

II) Javascript лишь описывает сценарий клика на кнопку:

$( ".button" ).click(function() {
$(this).toggleClass( "active" );
$(".icons").toggleClass( "open" );

});

III) Теперь собственно код HTML:
1) Сначала открываем параметры страницы и хэдера:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animated toolbar icons</title>

2) Затем встраиваем стандарт FAI как стиль:

<link rel='stylesheet'

href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

3) После этого вы встраиваете свой CSS:
4) Закрываете тег хэдера и открываете основное содержимое:

</head>

<body>

5) Затем классы упаковки тулбара и его название:

<div id="wrapper">
<h1>тут ваш текст</h1>

6) Класс тулбара:

<div id="toolbar">
<div class="button"></div>

7) Затем сами иконки - вводятся через класс i class. Сами иконки можно найти здесь: https://font awesome.ru/all-icons/ или здесь: https://fontawesome.com/v4.7.0/examples/#basic
В одну из иконок вам нужно встроить ссылку с произвольной адресацией:

<ul class="icons">
<li><i class="fa fa-spinner fa-pulse fa-2x fa-fw" aria-hidden="true"></i></li>
<li><i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw" aria-hidden="true"></i></li>
<li><i class="fa fa-refresh fa-spin fa-2x fa-fw" aria-hidden="true"></i></li>
<li><i class="fa fa-cog fa-spin fa-2x fa-fw" aria-hidden="true"></i></li>
<li><i class="fa fa-spinner fa-pulse fa-2x fa-fw" aria-hidden="true"></i></li>

8) Закрываете блоки иконок и параметры:

</ul>

</div>
</div>

9) Встраиваете библиотеку jQuery. Взять ее можно здесь: https://sites.google.com/site/konoplevmedia/jqueryminres.js

10) Встраиваете ваш .js
11) Закрываете страницу:

</body>
</html>

12) Ссылку на выполненное задание оставляете в комментарии к этому посту до 15:00 27 ноября.