Сьогодні ми познайомимося зі scroll і створимо сторінку презентацію. Сторінка може бути на будь-яку тему. Такий дизайн гарно підходить для титульної сторінки, а також для односторінкових сайтів.
Наприкінці цього уроку, наша сторінка може виглядати приблизно так :
Отож не гаймо часу і до справи !
Прикольний приклад сайту зі Scroll
На сайті Боржомі є досить нетиповий приклад scroll властивості. Цю воду видобувають на великих глибинах, тому вона така цілюща і якісна. Користувачу пропонують проскролити сайт і побачити наскільки глибоко треба зануритися, щоб дістати воду. У кого є багато часу енергії, можете спробувати доскролити до кінця!
Практика
1: Створіть новий проєкт. Додайте блок для логотипа і перший текстовий блок. Замініть текст на той, що підходить до вашої теми:
<div class="cd-logo">
</div>
<div class="textSection">
<h3>❤️Гречка - замість 1000-чі слів❤️</h3>
<p>Гречка не містить глютен і багата поживними речовинами – білком, клітковиною, вітамінами і мінералами: її вживання дає певні плюси для здоров’я.</p>
<p>Покращує функції серця. Гречка містить корисні для серця поживні речовини: конкретно – магній, мідь, клітковину. Магній відіграє важливу роль у регулюванні скорочення м’язів. Зокрема, він допомагає клітинам серцевого м’яза розслабитися, протидіючи кальцію, який стимулює скорочення.
</p>
<p>Гречка низькокалорійна, до того ж багата клітковиною і білком. Ця потужна комбінація допомагає приборкати апетит, довше зберігаючи ситість. Крім того, подібна комбінація ефективно допомагає регулювати рівень цукру в крові. Його коливання провокують сильний голод і невгамовний апетит.</p>
</div>2: Додайте перші стилі :
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: White;
}
.cd-logo {
position: relative;
background-position: center;
background-repeat: no-repeat;
background-color: #642580;
background-size: cover;
min-height: 100%;
}
.cd-logo {
background-image: url("https://icf.listex.info/300x200/7d2917da-e9a2-4f53-bbb5-09c952586c81.png");
min-height: 100%;
background-size: auto;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: white;
text-align:center
}
.textSection {
background-color:#642580;
padding:50px 80px;
}Змініть кольори на ті, що подобаються вам.
3: Додайте блок div для картинки, яка буде на всю ширину екрана:
<div class="picSection1">
</div>А також стилі для неї. Додайте код, з зеленим фоном.
.picSection1 {
background-image: url("https://klopotenko.com/wp-content/uploads/2022/01/boyl-z-grechkou_sitewebukr.jpg?v=1657617880");
}
.cd-logo, .picSection1 {
position: relative;
background-position: center;
background-repeat: no-repeat;
background-color: #642580;
background-size: cover;
min-height: 100%;
}4: Додайте ще один текстовий блок і блок-картинку. Для текстового блоку можна використати той самий клас. Для картинки ж варто створити новий.
Не забудьте додати новий клас у поле .cd-logo, .picSection1 (через кому). Тоді для цього класу також застосується цей блок стилів.
Parallax scroll
Parallax scrolling — це коли фоновий вміст на вебсторінці рухається з іншою швидкістю, ніж вміст переднього плану.
5: Давайте додамо цей ефект. Додайте рядок у вже існуючий блок :
.cd-logo, .picSection1 {
position: relative;
background-position: center;
background-repeat: no-repeat;
background-color: #642580;
background-size: cover;
min-height: 100%;
background-attachment: fixed;
}Спробуйте новий ефект!
6: (Кілька порад) Якщо ви хочете налаштувати розмір проміжку між текстовими частинами, змініть властивість min-height. Експериментуйте з різними розмірами та виберіть значення від 0% до 100%.
Якщо ваш останній розділ на вашій вебсторінці закороткий, тому частина зображення відображається, коли ви прокручуєте сторінку до кінця, додайте новий набір правил, щоб встановити min-height на 100%.
Додаємо підпис
Поверх картинки з лого варто додати назву нашої сторінки. Щоб відразу було зрозуміло про що читаємо. Додайте виділений код у вже існуючий блок:
<div class="cd-logo">
<div class="caption">
<span class="border">Г р е ч к а</span>
</div>
</div>І цей блок варто додати до стилів:
.caption {
position: absolute;
top: 40%;
width: 100%;
text-align: center;
}
.border {
background-color: #41BAC1;
color: White;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
Домашня робота
1: Додайте на сторінку, яку створили ще текстові блоки і блоки-картинки. Має бути мінімум 3 текстових блоки і 4 блоки-картинки(включаючи заголовок). Змініть колірну гаму на сторінці: замініть колір фону з фіолетового на інший (або хоча б інший відтінок).
2: Зробіть елементи div для блоків-картинок трохи прозорими, додайте властивість opacity до набору правил CSS. Спробуйте значення від 0.1 до 1.
3: Знайдіть клас, який відповідає за фон заголовка. Додайте йому прозорість opacity. Значення підберіть самостійно, але воно має додавати прозорість лише трохи, текст має нормально читатися. Якщо текст важко читається, змініть кольори тексту чи його фону.
4: Багато людей переглядають вебсайти на своїх телефонах або планшетах, а не лише на своїх комп’ютерах. Тому важливо переконатися, що ваші вебсторінки мають чудовий вигляд на екранах усіх типів пристроїв. Правило CSS @media допомагає створювати дизайни вебсторінок, які реагують на тип пристрою, на якому сторінка переглядається.
Деякі мобільні пристрої мають проблему з ефектом паралакса, створеним правилом CSS background-attachment: fixed. Додайте наступний код у кінець файлу CSS, щоб вимкнути ефект паралакса для мобільних пристроїв.
Важливо: Трохи змініть код і додайте всі ваші класи з картинками!
@media only screen and (max-device-width: 1024px) {
.cd-logo, .picSection1 {
background-attachment: scroll;
}
}
Level UP
1: Додайте карусель на вашу сторінку. Приклад каруселі нижче. Можете пошукати в інтернеті або взяти інструкцію тут.
Не забудьте відредагувати підписи до слайдів, якщо вони передбачені кодом!
Підказка: можна додати блок-картинку і в середині нього розміщати карусель (або додати текстовий блок, але тоді карусель не розтягнеться на весь екран)
Урок взято з сайту: projects.raspberrypi.org
