Односторінковий сайт ідеально підійде для просування нового продукту, короткострокової рекламної кампанії або сайтів-портфоліо. Досить часто для односторінкових сайтів (їх ще називають посадковими сторінками, цільовими сторінками і лендінгами) використовуються повноекранні секції, з однотонною фоновою заливкою або фоновими картинками. Для переходу від секції до секції використовується фіксоване (плаваюче) меню.
До секціях додаються стилі, які забезпечують плавний і ефектний перехід. Також, при бажанні, можна додавати ефект паралаксу для переходів між секціями.
В сьогоднішньому практичному уроці ми розглянемо простий приклад сайту-лендінга, який ви зможете використовувати в своїх проектах. Для цього уроку вам знадобиться зовсім невеликий обсяг знань 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>
От і все! Сьогодні ми на практиці створили простий односторінковий сайт (іншими словами лендінг, цільову сторінку або посадкову сторінку). Ви можете використовувати цей урок і код в якості старту для своїх проектів, типу сторінки для просування нового продукту, короткострокової рекламної кампанії або сайту-портфоліо.
Весь код, а також демо сьогоднішнього уроку ви знайдете нижче.
Дякуємо, що читаєте нас!
Після завершення стартового курсу по програмуванню ви, як програміст-початківець, маєте кілька шляхів для подальшого розвитку…
Основна мета створення веб-сайту — це поділитися своїм контентом з усім світом. Ви хочете, щоб…
Фітолампа для вирощування зелені на балконі: Оптимальні умови для вашого врожаю Фітолампа для вирощування зелені…
Співбесіда – це цінне вміння, яке може допомогти дізнатися більше про людину, якусь тему чи…
У світі, де індивідуальність має значення, можливість надрукувати книгу у Львові навіть у єдиному екземплярі…
Сьогодні дедалі більше учнів та батьків шукають альтернативу традиційній школі, обираючи більш гнучкі, індивідуальні та…