Односторінковий сайт ідеально підійде для просування нового продукту, короткострокової рекламної кампанії або сайтів-портфоліо. Досить часто для односторінкових сайтів (їх ще називають посадковими сторінками, цільовими сторінками і лендінгами) використовуються повноекранні секції, з однотонною фоновою заливкою або фоновими картинками. Для переходу від секції до секції використовується фіксоване (плаваюче) меню.
До секціях додаються стилі, які забезпечують плавний і ефектний перехід. Також, при бажанні, можна додавати ефект паралаксу для переходів між секціями.
В сьогоднішньому практичному уроці ми розглянемо простий приклад сайту-лендінга, який ви зможете використовувати в своїх проектах. Для цього уроку вам знадобиться зовсім невеликий обсяг знань HTML, CSS та jQuery.
Ми будемо використовувати досить просту 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>© 2020 – SebWeo.com – Всі права захищено</p> </footer>
Для навігації та переміщення по посадковій сторінці ми створимо маркований список з класом 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>
Тут все досить просто.
<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>
Тут ми використовуємо подію click для пунктів меню. При натисканні на пункт меню за допомогою функції scrollTop відбувається плавний перехід на потрібний Розділ посадкової сторінки. Код скрипта представлений нижче:
<script>
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$("html,body").animate({scrollTop:$(this.hash).offset().top}, 1500);
});
});
</script>
От і все! Сьогодні ми на практиці створили простий односторінковий сайт (іншими словами лендінг, цільову сторінку або посадкову сторінку). Ви можете використовувати цей урок і код в якості старту для своїх проектів, типу сторінки для просування нового продукту, короткострокової рекламної кампанії або сайту-портфоліо.
Весь код, а також демо сьогоднішнього уроку ви знайдете нижче.
Дякуємо, що читаєте нас!
Найбільша з чеснот оратора — не лише сказати те, що потрібно, але і не сказати…
Ваша стратегія SEO просування повинна бути сильною та охоплювати практично всі грані цієї комплексної роботи,…
Я знаю світ: У ньому злодій дружить з шахраєм, І довбень завжди виграє у мудреця,…
Масиви не лише в JavaScript є фундаментальною структурою даних, але й практично у всіх мовах…
Системний блок – це центральна частина персонального комп'ютера, що включає основні апаратні компоненти: процесор, відеокарту,…
Чи думали ви коли небудь про кар’єру веб-розробника / програміста? Щоб самостійно створювати свої веб-сайти,…