Сайт-одностраничник идеально подойдет для продвижения нового продукта, краткосрочной рекламной кампании или сайтов-портфолио. Довольно часто для одностраничников (их еще называют посадочными страницами и лендингами) используются полноэкранные секции, с однотонной фоновой заливкой либо фоновыми картинками. Для перехода от секции к секции используется фиксированное (плавающее) меню.
К секциям добавляются стили, которые обеспечивают плавный и эффектный переход. Также, при желании, можно добавлять эффект параллакса для переходов между секциями.
В сегодняшнем практическом уроке мы рассмотрим простой пример сайта-лендинга, который вы сможете использовать для своих проектов. Для этого урока вам понадобится совсем небольшой объем знаний 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 происходит плавный переход на нужный раздел посадочной страницы. Код скрипта представлен ниже:
Вот и все! Сегодня мы на практике создали простой сайт-одностраничник (другими словами лендинг или посадочную страницу). Вы можете использовать этот урок и код в качестве старта для своих проектов, типа страницы для продвижения нового продукта, краткосрочной рекламной кампании или сайта-портфолио.
Весь код, а также демо сегодняшнего урока вы найдете ниже.
Спасибо, что читаете нас!
Выбор мастера для ремонта и перетяжки мебели — задача, которая требует вдумчивого подхода. Ведь от…
Выбор идеального хостинга под свой сайт может быть довольно запутанным делом, особенно когда существует так…
Чтобы избегать ошибок, нужно набираться опыта; чтобы набираться опыта, надо делать ошибки Лоуренс Питер
Краткое определение Черного SEO Черное СЕО (или Черная оптимизация) — это любая практика, целью которой…
Получение водительских прав категории C открывает двери к профессиональной деятельности, связанной с управлением грузовыми автомобилями.…