Приклад односторінкового сайту з повноекранними секціями

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

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

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

<script>
jQuery(document).ready(function($) {
 $(".scroll").click(function(event){
  event.preventDefault();
  $("html,body").animate({scrollTop:$(this.hash).offset().top}, 1500);
 });
});
</script>

 

 

 

От і все! Сьогодні ми на практиці створили простий односторінковий сайт (іншими словами лендінг, цільову сторінку або посадкову сторінку). Ви можете використовувати цей урок і код в якості старту для своїх проектів, типу сторінки для просування нового продукту, короткострокової рекламної кампанії або сайту-портфоліо.

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

 

 

Дякуємо, що читаєте нас!