Скрипты

coincompare-v1-4-мониторинг-статистики-криптовалют CoinCompare - это веб-приложение PHP, которое отображает общую информацию, интерактивные исторические диаграммы для более чем 1700 криптовариантов. Он...
josh-шаблон-для-разработки-на-laravel Josh Admin - это шаблон для разработчика, основанный на Laravel 5. Создайте ваш следующий проект на Laravel. Используйте эту тему и сохраните свое...
social-network-система-социальных-сетей Социальная сеть - PHP Social Networking System - мощный PHP-скрипт, разработанный, чтобы позволить вам создать свою собственную социальную сеть! Он...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

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

Bootstrap one-page template with Parallax effect

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

Bootstrap one-page template with Parallax effect

DEMO

 

Шаг-1 HTML-код.

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

Спойлер - index.html
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="utf-8" />
  <title>Одностраничный шаблон с эффектом параллакса на Bootstrap</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>

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

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

Спойлер - Топ меню навигации.
<!-- 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>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

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

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

Спойлер - Раздел 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 — О компании.

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

Спойлер - Раздел 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 – Услуги.

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

Спойлер - Раздел 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>
        <h4>Service 1</h4>
        <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>
        <h4>Service 2</h4>
        <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>
        <h4>Service 3</h4>
        <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>
        <h4>Service 4</h4>
        <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 – Информация.

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

Спойлер - Раздел 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 – Контакты и нижний колонтитул.

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

Спойлер - Раздел 5 – Контакты и нижний колонтитул.
<!-- 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>
        <h4>The next is the address on Google maps</h4>
      </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 &copy; Your Company 2014</p>
  </div>
</footer>
<!-- /footer -->

Шаг-2 CSS.

Как вы могли заметить, что большинство элементов уже получили необходимые стили автоматически. Тем не менее нам необходимо определить стили для всех новых нестандартных элементов страницы.

Спойлер - Шаг-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:  '<div class="info"><strong>This is my company</strong><br><br>My company address is here<br> 32846 Sydney</div>'
  });  
});

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

  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

Комментарии отсутствуют

Оставьте свой комментарий

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...