Доброго времени суток всем читателям моего блога! Текущая публикация поможет вам разобраться с вопросом: «А как же задается в Bootstrap анимация?»
Я расскажу вам, каким образом можно создать анимационные эффекты при прокрутке страницы, при наведении и нажатии на кнопки, во время ожидания загрузки какого-либо объекта или его появлении. Все это поможет вам оживить ваши веб-странички и сделать их более привлекательными для пользователей. Ну что ж, давайте приступать к обучению!
Интересное решение отображения меню
Благодаря инструментам Bootstrap 3 можно оживить меню сайта. Для этого необходимо воспользоваться несколькими механизмами: Affix Plugin, Navigation Bar и конечно же Grid System. В чем же заключается задумка?
А в том, что благодаря выбранному плагину во время скроллирования страницы меню будет прокручиваться только до определенного момента, а после закрепится в шапке. Скопируйте код примера и запустите его в любом визуальном редакторе, можно даже в одном из выложенных в онлайн.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <!DOCTYPE html>
<html>
<head>
<title>Cool Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--обязательно добавьте стилевые правила, чтобы сайт был отформатированным и выглядел уникально-->
<style>
.navbar, .container-fluid {min-width:490px;}
.container-fluid {
text-align:center;
background-color:#FF8C00;
text-shadow: 1px 1px 2px #111, 3px 3px 2px #000, 0 0 7px #222;
color:#fef;
height:179px;
}
.footer {height: 65px; margin-top: 15px; background-color:#FF8C00;}
.affix {
top: 0;
border-color: #010;
width: 100%;
background-color: #FFD700;
transition: all .6s ease-in;
-webkit-transition: all .6s ease-in;
}
.affix a {
padding: 15px !important;
font-weight: 900 !important;
-webkit-transition: all .6s ease-in;
transition: all .6s ease-in;
}
img{ max-height: 650px; }
.affix a:hover {text-shadow: 0 0 5px black;}
.affix-top a {padding: 29px !important;}
#page1{padding:65px; margin-top: -21px; height: 900px; background-color: rgba(254, 254,0, .5);}
#page2{padding:65px; margin-top: 15px; height: 900px;background-color: rgba(254, 254,0, .5);}
#page3{padding:65px; margin-top: 15px; height: 900px;background-color: rgba(254, 254,0, .5);}
</style>
</head>
<body>
<div class="container-fluid" >
<h1>Туристическое агенство "GoTravel"</h1>
<h3>Для каждого клиента подберем уникальный и выгодный маршрут</h3>
<h3>Звонить по телефону: ХХХ-ХХХ-ХХ-ХХ</h3>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="178">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Navb">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="Navb">
<ul class="nav navbar-nav">
<li class="active"><a href="#">О нас</a></li>
<li><a href="#page1">Один</a></li>
<li><a href="#page2">Два</a></li>
<li><a href="#page3">Три</a></li>
</ul>
</div>
</nav>
<div id="page1" class="container-fluid">
<h1>Отдохни на Мальдивах</h1>
<img src="http://ht.kz/fls/upload/maldiv-2.jpg" alt="Maldivy">
<h3>Бронзовый загар, незабываемые впечатления и шикарный отдых обеспечит поездка на Мальдивы.</h3>
</div>
<div id="page2" class="container-fluid">
<h1>Вена, Австрия</h1>
<img src="http://politeka.net/wp-content/uploads/2016/09/291424.jpg" alt="Vena">
<h3>Старинная архитектура, богатая история и удивительные пейзажи запомнятся на всю жизнь с отпуском в Вене.</h3>
</div>
<div id="page3" class="container-fluid">
<h1>Венеция, Италия</h1>
<img src="http://www.fotoshtora.ru/pictures/tovar/original/sun_venezia_2.jpg" alt="Venecia">
<h3>Дивный город на воде, чарующий язык и атмосфера романтики сделают незабываемым любой медовый месяц.</h3></div>
<footer class="container-fluid footer">
<h3>Все права защищены</h3>
</footer>
</body>
</html> |
Похожие эффекты можно применять к разным видам навигации: выпадающему меню, боковым панелям, а также и к другим элементам.
Реализация необычных кнопок
А теперь запрограммируем несколько необычных кнопок с анимационными эффектами при наведении и нажатии на них. Также я хочу научить вас создавать группы кнопок.
Для начала начнем с оформления одиночных кнопок. Все вы знаете, что в Bootstrap встроены специальные классы, которые задают внешний вид описываемых элементов, в том числе цвет и его смену при наведении курсора. Однако в некоторых случаях на сайт требуются уникальные кнопки. Поэтому я покажу вам как создать такую.
Внутри тега <body> вставьте код:
<button type="button" class="btn">Оформить заказ</button>
А теперь пропишите для него стили:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <style>
.btn {
position: relative;
display: inline-block;
text-decoration: none;
Width: 250px;
margin-top: 23px;
font-weight: 900;
text-shadow: -1px 0 3px rgba(0,0,0,.8);
padding: 50px 25px;
outline: none;
border-radius: 5px;
background: linear-gradient(rgb(139, 119, 101), rgb(210, 180, 140)) rgb(111,113,120);
transition: .3s ease-in-out;
box-shadow: 1px 1px 2px #8B795E, 3px 3px 2px #8B795E, 5px 5px 4px #8B795E;
}
.btn:hover:not(:active) {
background: linear-gradient(rgb(210, 180, 140), rgb(139, 119, 101)) rgb(110,112,120);
color: #A52A2A;
box-shadow: 1px 1px 2px #8B795E, 3px 3px 2px #8B795E, 5px 5px 4px #8B795E, 5px 5px 5px #A52A2A;
transition: .3s ease-in-out;
}
.btn:active {
top: 1px;
box-shadow:
1px 1px 1px rgba(0,0,0,.5), 2px 2px 6px #fff;
}
</style> |
Применим полученный стиль к группе кнопок. Для этого нужно использовать класс .btn-group.
1 2 3 4 5 6 7 8 9 10 11 | <div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div> |
Описание стилей в парном теге <style> не изменится.
Замечу, что кнопки вы можете дополнить специальными иконками, которые называются glyphicons.
Строка загрузки
Фреймворк предоставляет еще один полезный механизм работы под названием Progress Bar. Он представляет собой строку загрузки, которую можно вставить во время ожидания скачивания файлов или загрузки веб-сайта.
Код реализации выглядит следующим образом.
1 2 3 4 5 6 7 8 | <div class="container">
<h2>АНимированная строка загрузки</h2>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width:45%">
45%
</div>
</div>
</div> |
При этом в описанном выше инструменте Бутстрапа уже реализована анимация.
На этом статья подошла к концу. Если вам понравился учебный материал, то подписывайтесь на обновления моего блога и не забывайте рассказывать о нем друзьям. Пока-пока!
С уважением, Роман Чуешов
