Bootstrap одностраничный шаблон с эффектом
параллакса Учебник Bootstrap / учебник прокрутки параллакса Не секрет, что загрузчик используется сейчас на многих сайтах. Это позволяет сэкономить время и создать отличные результаты за короткий промежуток времени. В частности это касается разметки и стилей. В прошлый раз, когда мы писали о загрузчике, мы получили много положительных комментариев, поэтому я решил подготовить еще один урок по использованию этой платформы сегодня. Чтобы сделать его более интересным, мы создадим демонстрацию с одним из интересных эффектов — параллаксом. Мы увидим использование различных фонов при прокрутке страницы. Чтобы понять, что мы собираемся сделать — пожалуйста, посмотрите демо.
Live Demo
Шаг 1. HTML
Для начала — подготовьте разметку скелета:
index.html
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <meta name="author" content="Script Tutorials" /> <title>Bootstrap one-page template with Parallax effect | Script Tutorials</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- attach CSS styles --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet" /> </head> <body> <!-- BODY PAGE CONTENT --> <!-- attach JavaScripts --> <script src="js/jquery-1.10.2.js"></script> <script src="js/bootstrap.min.js"></script> <script src="//maps.google.com/maps/api/js?sensor=true"></script> <script src="js/main.js"></script> </body> </html>
Это минимальная разметка, которая позволяет нам использовать адаптивную природу Bootstrap. Теперь мы можем начать с добавления новых элементов на страницу.
Верхнее меню навигации
Это фиксированная панель навигации. Вот разметка:
<!-- navigation panel --> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Your Brand Name</a> </div> <div class="collapse navbar-collapse" id="navbar-collapse-main"> <ul class="nav navbar-nav navbar-right"> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#information">Information</a></li> <li><a href="#google_map">Contact</a></li> <li><a href="http://www.script-tutorials.com/bootstrap-one-page-template-with-parallax-effect/">Back to tutorial</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
По сути, это меню на основе UL-LI (как обычно). Есть ссылки на разные разделы страницы
Раздел 1 — Главная
Первый раздел — это полноразмерная страница приветствия:
<!-- first section - Home --> <div id="home" class="home"> <div class="text-vcenter"> <h1>Hello World</h1> <h3>This is bootstrap-based layout</h3> <a href="#about" class="btn btn-default btn-lg">Continue</a> </div> </div> <!-- /first section -->
Текст приветствия выравнивается по центру по вертикали.
Раздел 2 — О
Есть два столбца, изображение в первом столбце и центрированный текст в правом столбце:
<!-- second section - About --> <div id="about" class="pad-section"> <div class="container"> <div class="row"> <div class="col-sm-6"> <img src="images/logo.png" alt="" /> </div> <div class="col-sm-6 text-center"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sem cras amet.</h2> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum metus et ligula venenatis, at rhoncus nisi molestie. Pellentesque porttitor elit suscipit massa laoreet metus.</p> </div> </div> </div> </div> <!-- /second section -->
Раздел 3 — Услуги
Этот синий раздел состоит из четырех элементов со значками глифов, предоставленных загрузчиком:
<!-- third section - Services --> <div id="services" class="pad-section"> <div class="container"> <h2 class="text-center">Our Services</h2> <hr /> <div class="row text-center"> <div class="col-sm-3 col-xs-6"> <i class="glyphicon glyphicon-cloud"> </i> <h3>Service 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sem cras amet. Donec in sem cras amet.</p> </div> <div class="col-sm-3 col-xs-6"> <i class="glyphicon glyphicon-leaf"> </i> <h3>Service 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sem cras amet. Donec in sem cras amet.</p> </div> <div class="col-sm-3 col-xs-6"> <i class="glyphicon glyphicon-phone-alt"> </i> <h3>Service 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sem cras amet. Donec in sem cras amet.</p> </div> <div class="col-sm-3 col-xs-6"> <i class="glyphicon glyphicon-bullhorn"> </i> <h3>Service 4</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sem cras amet. Donec in sem cras amet.</p> </div> </div> </div> </div> <!-- /third section -->
Раздел 4 — Информация
Это второй широкий раздел с полноразмерным фоном, плюс есть два дополнительных блока (панели):
<!-- fourth section - Information --> <div id="information" class="pad-section"> <div class="container"> <div class="row"> <div class="col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"> <h2 class="panel-title">Additional information</h2> </div> <div class="panel-body lead"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa. Duis euismod, augue et tempus consequat, lorem mauris porttitor quam, consequat ultricies mauris mi a metus. Phasellus congue, leo sed ultricies tristique, nunc libero tempor ligula, at varius mi nibh in nisi. Aliquam erat volutpat. Maecenas rhoncus, neque facilisis rhoncus tempus, elit ligula varius dui, quis amet. </div> </div> </div> <div class="col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"> <h2 class="panel-title">Additional information</h2> </div> <div class="panel-body lead"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa. Duis euismod, augue et tempus consequat, lorem mauris porttitor quam, consequat ultricies mauris mi a metus. Phasellus congue, leo sed ultricies tristique, nunc libero tempor ligula, at varius mi nibh in nisi. Aliquam erat volutpat. Maecenas rhoncus, neque facilisis rhoncus tempus, elit ligula varius dui, quis amet. </div> </div> </div> </div> </div> </div> <!-- /fourth section -->
Раздел 5 — Контакты и нижний колонтитул
In fact, there are three elements – the narrow blue service line (to put some extra information), the google map, where you can put your company address (as a pin on the map):
<!-- fifth section --> <div id="services" class="pad-section"> <div class="container"> <div class="row"> <div class="col-sm-12 text-center"> <h3>Parallax scrolling effect is in action</h3> <h3>The next is the address on Google maps</h3> </div> </div> </div> </div> <!-- /fifth section --> <!-- google map --> <div id="google_map"></div> <!-- /google map --> <!-- footer --> <footer> <hr /> <div class="container"> <p class="text-right">Copyright © Your Company 2014</p> </div> </footer> <!-- /footer -->
Step 2. CSS
You may have noticed that most elements already received all necessary styles at once. However, we still have to define styles for all new non-standard elements:
css/style.css
/* general styles */
html, body {
height: 100%;
width: 100%;
}
/* padded section */
.pad-section {
padding: 50px 0;
}
.pad-section img {
width: 100%;
}
/* vertical-centered text */
.text-vcenter {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text-vcenter h1 {
font-size: 4.5em;
font-weight: 700;
margin: 0;
padding: 0;
}
/* additional sections */
#home {
background: url(../images/home.jpg) no-repeat center center fixed;
display: table;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#about {
}
#services {
background-color: #306d9f;
color: #ffffff;
}
#services .glyphicon {
border: 2px solid #FFFFFF;
border-radius: 50%;
display: inline-block;
font-size: 60px;
height: 140px;
line-height: 140px;
text-align: center;
vertical-align: middle;
width: 140px;
}
#information {
background: url(../images/estate.jpg) no-repeat center center fixed;
display: table;
height: 800px;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#information .panel {
opacity: 0.85;
}
#google_map {
height: 500px;
}
footer {
padding: 20px 0;
}
footer .glyphicon {
color: #333333;
font-size: 60px;
}
footer .glyphicon:hover {
color: #306d9f;
}
Step 3. JavaScript
In the end, there is the google map, in order to initialize it (with a predefined address) we have to add the following code:
js/main.js
$(document).ready(function (){
// create a LatLng object containing the coordinate for the center of the map
var latlng = new google.maps.LatLng(-33.86455, 151.209);
// prepare the map properties
var options = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
mapTypeControl: false,
scrollwheel: false,
disableDoubleClickZoom: true
};
// initialize the map object
var map = new google.maps.Map(document.getElementById('google_map'), options);
// add Marker
var marker1 = new google.maps.Marker({
position: latlng, map: map
});
// add listener for a click on the pin
google.maps.event.addListener(marker1, 'click', function() {
infowindow.open(map, marker1);
});
// add information window
var infowindow = new google.maps.InfoWindow({
content: '<div class="info"><strong>This is my company</strong><br><br>My company address is here<br> 32846 Sydney</div>'
});
});
Conclusion
That is all for now, we just finished the layout of our page. I hope that you like the result. Another advantage is the fact that this template is responsive by default, and it means that it looks good at all possible devices (including mobile phones).