Пример сайта-одностраничника с полноэкранными секциями

Сайт-одностраничник идеально подойдет для продвижения нового продукта, краткосрочной рекламной кампании или сайтов-портфолио. Довольно часто для одностраничников (их еще называют посадочными страницами и лендингами) используются полноэкранные секции, с однотонной фоновой заливкой либо фоновыми картинками. Для перехода от секции к секции используется фиксированное (плавающее) меню.

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

В сегодняшнем практическом уроке мы рассмотрим простой пример сайта-лендинга, который вы сможете использовать для своих проектов. Для этого урока вам понадобится совсем небольшой объем знаний HTML, CSS и jQuery.

 

 

Шаг №1: Создаем HTML разметку страницы

Мы будем использовать самую простую HTML структуру посадочной страницы. При желании и при наличии достаточных знаний вы сможете расширить ее под свои нужды.

В самом верху разместим стартовый раздел с заголовком. А ниже будут расположены секции с данными. Каждая секция (или раздел) будет иметь свой фон. Вы также можете использовать вместо цветовой заливки фоновую картинку.

Каждая секция имеет свой уникальный идентификатор (id). Этот идентификатор будет использоваться для пунктов меню.

Ниже представлен HTML-код этих разделов, а также хедера и футера.

<header>
 <h1>Сайт-одностраничник с полноэкранными секциями</h1>
</header>
<section class="fixed-background img-1" id="section_01">
 <div class="main-content">
  <h3>Раздел №1</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare cursus orci id rhoncus. Quisque rutrum ac massa posuere blandit. Fusce hendrerit ipsum nisl, vel ullamcorper lectus sodales vel. In auctor nec augue at lacinia. Nullam ullamcorper mauris ac pulvinar elementum.</p>
 </div>
</section>
<section class="fixed-background img-2" id="section_02">
 <div class="main-content">
  <h3>Раздел №2</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare cursus orci id rhoncus. Quisque rutrum ac massa posuere blandit. Fusce hendrerit ipsum nisl, vel ullamcorper lectus sodales vel. In auctor nec augue at lacinia. Nullam ullamcorper mauris ac pulvinar elementum.</p>
 </div>
</section>
<section class="fixed-background img-3" id="section_03">
 <div class="main-content dark">
  <h3>Раздел №3</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare cursus orci id rhoncus. Quisque rutrum ac massa posuere blandit. Fusce hendrerit ipsum nisl, vel ullamcorper lectus sodales vel. In auctor nec augue at lacinia. Nullam ullamcorper mauris ac pulvinar elementum.</p>
 </div>
</section>
<section class="fixed-background img-4" id="section_04">
 <div class="main-content">
  <h3>Раздел №4</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare cursus orci id rhoncus. Quisque rutrum ac massa posuere blandit. Fusce hendrerit ipsum nisl, vel ullamcorper lectus sodales vel. In auctor nec augue at lacinia. Nullam ullamcorper mauris ac pulvinar elementum.</p>
 </div>
</section>
<footer>
 <p>&copy; 2020 – SebWeo.com – Все права защищены</p>
</footer>

 

 

Шаг №2: Создаем меню с ссылками на секции лендинга

Для навигации и перемещения по посадочной странице мы создадим неупорядоченный список с классом navigation. Каждый пункт меню (li) будет содержать ссылку с идентификатором номера раздела (секции) и классом scroll, который будет использоваться позже в jQuery коде. Разместим меню в коде выше разметки, которая рассмотрена на Шаге №1.

<ul class="navigation">
 <li>
  <a href="#section_01" title="Секция №1" class="scroll">1</a>
 </li>
 <li>
  <a href="#section_02" title="Секция №2" class="scroll">2</a>
 </li>
 <li>
  <a href="#section_03" title="Секция №3" class="scroll">3</a>
 </li>
 <li>
  <a href="#section_04" title="Секция №4" class="scroll">4</a>
 </li>
</ul>

 

 

Шаг №3: Добавляем стилевое оформление с помощью CSS

Здесь все довольно просто.

<style>
html, body {height: 100%;}
header {
 background-color: #4a6279;
 z-index: 999;
 position: relative;
 height: 100%;
}
header h1 {
 font-size: 40px;
 color: #fff;
 font-weight: 300;
 border: 1px solid #fff;
 padding: 20px 25px;
 position: absolute;
 bottom: auto;
 right: auto;
 left: 5%;
top: 35%;
}
.navigation {
 list-style: none;
 position: fixed;
 right: 25px;
 z-index: 99999;
 top: 250px;
}
.navigation li {
 background: #fff;
 width: 25px;
 height: 25px;
 border-radius: 50%;
 text-align: center;
 line-height: 25px;
 margin: 0 0 15px 0;
}
.navigation li:hover {background: #ccc;}
.navigation li a {text-decoration: none; color: #4267b2}
.main-content {width: 65%;}
.fixed-background {position: relative; padding: 45px 20px 0; height:100%; padding:0}
.fixed-background h3 {
 font-size: 45px;
 color: #fff;
 margin-bottom: 16px;
 border: 1px solid #fff;
 width: 100%;
 padding: 10px 15px;
 text-align: center;
}
.fixed-background p {font-size: 18px;}
.fixed-background.img-1 {background-color: #2fd474;}
.fixed-background.img-2 {background-color: #f94736;}
.fixed-background.img-3 {background-color: #e8630a;}
.fixed-background.img-4 {background-color: #904bab;}
footer{background: #172029; padding: 15px 0;}
footer p{text-align: center; color: #fff;}
/* стили для мобильных устройств и планшетов */
@media only screen and (min-width: 768px) {
 .main-content {
  position: absolute;
  left: 7%;
  bottom: auto;
  top: 10%;
 }
 .main-content h3 {font-size:45px;}
 .main-content p {
  font-size: 18px;
  line-height: 1.8;
  color: #fff
 }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .fixed-background h3 {font-size: 40px;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
 .main-content {
  left: auto;
  margin: 0 auto;
  padding: 25px 20px 20px;
  text-align: center;
 }
 .fixed-background h3 {font-size: 28px; width: initial;}
 .fixed-background p {
  line-height: 1.6;
  color:#fff;
  font-size: 16px;
 }
 .fixed-background {padding: 0;}
}
@media only screen and (max-width: 767px) {
 header h1 {font-size: 25px;}
 .main-content {
  left: auto;
  margin: 0 auto;
  padding: 25px 20px 20px;
  text-align: center;
}
 .fixed-background h3 {font-size: 28px; width: initial;}
 .fixed-background p {
  line-height: 1.6;
  color: #fff;
  font-size: 16px;
 }
 .fixed-background {padding: 0;}
}
</style>

 

 

Шаг №4: Добавляем немного JQuery для перехода между секциями

Здесь мы используем событие click для пунктов меню. При нажатии на пункт меню с помощью функции scrollTop происходит плавный переход на нужный раздел посадочной страницы. Код скрипта представлен ниже:

Вот и все! Сегодня мы на практике создали простой сайт-одностраничник (другими словами лендинг или посадочную страницу). Вы можете использовать этот урок и код в качестве старта для своих проектов, типа страницы для продвижения нового продукта, краткосрочной рекламной кампании или сайта-портфолио.

Весь код, а также демо сегодняшнего урока вы найдете ниже.

Спасибо, что читаете нас!