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

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

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

В сегодняшнем практическом уроке мы рассмотрим простой пример сайта-лендинга, который вы сможете использовать для своих проектов. Для этого урока вам понадобится совсем небольшой объем знаний 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 происходит плавный переход на нужный раздел посадочной страницы. Код скрипта представлен ниже:


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

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


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

 

Share

Последние посты

202ЗСУ

SebWeo поздравляет всех с Новым годом! Желаем личных побед, а главное, самой желанной – скорой… Читать далее

31/12/2022

Какой подарок можно вручить отцу ко Дню защитника Украины?

У каждой украинской семьи есть свои традиции и любимые праздники, особенно все мы любим поздравлять… Читать далее

19/08/2022

Демокрит

Мы не столько нуждаемся в помощи друзей, сколько в уверенности, что мы ее получим Демокрит… Читать далее

21/02/2022

Майк Тайсон

Когда мне тяжело, я всегда напоминаю себе о том, что если я сдамся — лучше… Читать далее

12/02/2022

25 полезных советов и решений jQuery, которые вы должны знать

jQuery — это быстрая и довольно таки небольшая библиотека JavaScript. Она упрощает создание интерактивных и… Читать далее

09/02/2022

Иоганн Вольфганг фон Гете

Каждый слышит только то, что он понимает Иоганн Вольфганг фон Гете   Читать далее

03/02/2022