Ефект попереднього завантаження сторінки

Урок по створенню ефекту попереднього завантаження сторінки з сайту Fontface Ninja. Ми будемо використовувати CSS анімацію, 3D трансформації і SVG.

Звичайно ж ми внесли і свої перетворення в даний ефект, в тому числі створили друге демо, де застосовуємо трохи інші ефекти. Для лого і індикатора попереднього завантаження сайту ми будемо використовувати вбудовані SVG, з метою перетворення path через CSS. Створимо маленький скрипт для анімації завантаження елемента SVG, контролювати анімацію сторінки будемо класами, які додамо до основного контейнера.

Будь ласка, зверніть увагу на те, що ми будемо використовувати CSS анімацію і CSS 3D трансформації, тому вони будуть працювати належним чином тільки в тих браузерах, які їх підтримують.

Давайте помістимо заголовок і блок основного змісту в окремий контейнер. Нагадаємо, що ми хочемо контролювати все, що відбувається з початковим видом і вмістом за допомогою класів. Для цього нам знадобиться головний контейнер. Задамо йому клас і id рівний ip-container.

Спочатку відобразимо заголовок, що складається з лого і елемента попереднього завантаження: вони обидва є елементами SVG, проте код ми розділимо. Як бачите, ми виставляємо значення атрибутів ширини і висоти, viewBox і preserveAspectRatio. Значним presevreAspectRatio буде xMidYMin meet. Це означає, що ми можемо застосувати масштабування, в якому графіка відмінно поміщається в свій контейнер, в той час, як її центр знаходиться на осі Х. Щоб зробити лого доступним для людей з обмеженим можливостями, додаємо назву, опис і все необхідні атрибути ARIA, aria-labeledby.

Основному контейнеру задамо клас ip-main. а пізніше застосуємо анімацію для його дочірніх елементів, заголовків, розділів і внутрішніх боксів:

Тепер давайте стилізуємо все це справа.

Хочемо зазначити, що CSS не буде містити браузерних префіксів, але ви зможете знайти повний лістинг в исходниках.

Спочатку, ми підключаємо кілька шрифтів, які нам знадобляться для заміщає тексту і іконок в боксі. Іконки, які використовуються в демо, взяті з Feather icon set і ми створили іконочние шрифт за допомогою Icomoon App. Шрифт заміщає тексту - Blokk. дуже зручний для створення макетів.

Спочатку задамо заголовку 100% ширини і висоти, а позицію виставимо як fixed:

Скидаємо значення зовнішніх відступів заголовка h1:

Логотип і елемент завантаження будемо позиціонувати абсолютно:

Так само нам не потрібно забувати, що логотип повинен бути адаптивним. Розташуємо його по центру екрана:

SVG, якому ми присвоїли клас ip-inner. буде відображатися як блоковий елемент, центруємо його по горизонталі, використовуючи значення auto для бічних зовнішніх відступів:

SVG лого має бути активним, але його розмір не повинен бути занадто великим або маленьким. Виставимо максимальну і мінімальну ширину:

Так як наш логотип це SVG, можемо налаштувати колір елемента path:

Те ж саме стосується і завантажувача:

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

Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!