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

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

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

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

 

 

 

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

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

 

 

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

 

Recent Posts

Мати Тереза

Якщо молитва – це твоє звернення до Бога, то інтуїція – це розмова Бога з… Read More

17/02/2021

Особливості маркування косметики

Косметична продукція – товари, що належать до особливої ​​категорії. Упаковка повинна відповідати ряду вимог. Важливо,… Read More

16/02/2021

Основні компоненти системи розсувних дверей (купе)

Розсувні двері купе – це стильний і сучасний спосіб додати індивідуальності вашому будинку. Вони не… Read More

12/02/2021

Дивовижні місця України для відпочинку душею і тілом

Україну можна сміливо назвати не тільки однією з найстаріших країн в Європі, але і однією… Read More

05/02/2021

Покращуємо показники Core Web Vitals – основний тренд SEO в 2021 році

Раніше ми писали про те, що таке Основні веб-показники (по-англійськи Core Web Vitals) в інструменті… Read More

30/01/2021

Відповіді на найпоширеніші питання про жорсткі диски для ноутбуків

Не всі жорсткі диски однакові, і коли ви купуєте новий ноутбук, на вибір у вас… Read More

29/01/2021