Одностраничный шаблон с эффектом параллакса на Bootstrap

26.10.2019
CSS

Категория: HTML5.

thumb_bootstrap_one-page_template_with_parallax_effect-7069208

Ни для кого не секрет что использование Bootstarp при создании сайтов, очень популярна вы получаете отличный результат и экономите достаточно много времени. В этой статье вы увидите как создать используя Twitter Bootstrap 3 одностраничный шаблон для корпоративного сайта с эффектом параллакса.

DEMO

Шаг-1 HTML-код.

Для начала нужно подготовить начальную разметку для макета, подключить сам фреймворк, JS библиотеки.



  
  Одностраничный шаблон с эффектом параллакса на Bootstrap

Топ меню навигации.

Это фиксированная панель навигации, состоящая из UL-LI элементов с ссылками на разные разделы сайта.
Вот разметка:

Спойлер — Топ меню навигации.


  
    
    
      
        Toggle navigation
        
        
        
      
      Your Brand Name
  • Home
  • About
  • Services
  • Information
  • Contact

Раздел 1 – Главная.

Это первый верхний раздел страницы, где размещен текст приветствия и выровненный по центру.

Спойлер — Раздел 1 – Главная.

Hello World

This is bootstrap-based layout

    Continue

Раздел 2 — О компании.

Здесь есть два столбца, в левом находиться логотип, а в правом краткое описание компании.

Спойлер — Раздел 2 — О компании.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sem cras amet.

        
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.

Раздел 3 – Услуги.

Раздел с описанием предоставляемых услуг, это синий раздел состоящий из четырёх элементов с иконками.

Спойлер — Раздел 3 – Услуги.

Our Services

Service 1

        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sem cras amet. Donec in sem cras amet.

Service 2

        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sem cras amet. Donec in sem cras amet.

Service 3

        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sem cras amet. Donec in sem cras amet.

Service 4

        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sem cras amet. Donec in sem cras amet.

Раздел 4 – Информация.

Это вторая широкая секция с полноразмерным фоном, плюс есть два блока с различной информацией.

Спойлер — Раздел 4 – Информация.

Additional information

          
          
            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.

Additional information

          
          
            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.

Раздел 5 – Контакты и нижний колонтитул.

Здесь расположено три элемента, это узкая синяя линия где вы можете заместить дополнительную информацию, блок карты Googla на которой будет указан адрес компании, и блок Copyright.

Спойлер — Раздел 5 – Контакты и нижний колонтитул.

Parallax scrolling effect is in action

The next is the address on Google maps

      
    
  









  
  
    
Copyright © Your Company 2014

Шаг-2 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;
}

Шаг-3 JavaScript.

И в завершении для того чтобы инициализировать Google карту с необходимым адресом мы должны добавить следующий код.

Спойлер — Шаг-3 JavaScript.

$(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:  'This is my company

My company address is here
 32846 Sydney'
  });  
});

В интернет магазине Armored вы можете просмотреть чехол для iPad mini 4, этот аксессуар защитит ваше устройство возможных повреждений при падении, а также он может служить подставкой при просмотре видео.

Метки: ,