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

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

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

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

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

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

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

Tags: CSS3HTML5

Recent Posts

Правильний вибір якісних гральних карт

Відомо, що перші гральні карти були винайдені династією Тан в Китаї ще в 9 столітті.… Read More

15/11/2020

Як знайти нову роботу – кращі тактики

Давно минули ті часи, коли люди отримували роботу одразу ж після закінчення навчання, і залишалися… Read More

13/11/2020

Ліцензування Zoom в Україні – тарифи і ціни

Самоізоляція 2020 року поставила людей в досить суворі умови – незважаючи на вимушені карантинні заходи,… Read More

10/11/2020

Десятка найбільш хокейних міст України

Чи є в Україні хокей? Багато шанувальників цього виду спорту асоціюють гру з шайбою на… Read More

09/11/2020

Переваги б/в ноутбуків та критерії вибору техніки

Сучасний ринок комп'ютерної техніки постійно оновлюється, щорічно пропонуючи користувачам нові і більш потужні моделі ПК… Read More

03/11/2020

Найкращі водоспади світу (частина 1)

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

31/10/2020