Ефект завантаження сторінки - створення ефекту при завантаженні сторінки

Довго грузиться сайт? І ви не хочете щоб людина бачила як сайт завантажується по частинах, а хочете щоб він бачив тільки повністю завантажений сайт? Тоді цей урок для вас. Тобто відвідувач заходить на сайт і бачить індикатор завантаження, після закінчення якого з`являється сайт з красивим переходом. Може для блогів або порталів використання такого ефекту буде тільки заважати відвідувачам, то на що продають сторінках він буде вельми до речі.

Завантажити (необхідно буде почекати 10 секунд) і подивитися приклад ви можете за посиланнями нижче:

дивитися прімерСкачать

Раніше я писав про індикатори завантаження, тому рекомендую подивитися ще їх:

• Власний індикатор завантаження сторінки

Ну і ось ще кілька статей про те, що можна зробити за допомогою jQuery:

• Гарний випадає для сайту
• Повністю анімоване меню на javascript
• Інтерактивний фон для сайту + відео
• Плавне переміщення по сторінці jQuery

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

У чому, власне, суть: коли користувач попадає на сайт, він бачить перед собою сірий фон, на якому зображений логотип сайту. Також він бачить індикатора завантаження, що поступово заповнюється. Для індикатора завантаження використовуємо SVG. Після заповнення за допомогою красивого ефекту з`являється вже завантажена сторінка сайту, а область з логотипом плавно зникає.

Ось сторінка після зникнення індикатора завантаження:

розмітка HTML

У нас є блок, з сірим фоном, логотипом сайту і індикатором завантаження. Тобто те, що користувач бачить як зайшов на сайт.

Далі йде блок з класом ip-main, де знаходиться основний контент сторінки.

А зараз сам код:

1234567891011121314

lt;div id="Ip-container" class="Ip-container"gt;
class="Ip-header"gt;lt;div class="Ip-loader"gt;="Ip-inner" width="60px" height="60px" viewBox="0 0 80 80"gt;class="Ip-loader-circlebg" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/gt;

id="Ip-loader-circle" class="Ip-loader-circle" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/gt;lt;/svggt;lt;/divgt;lt;/headergt;lt;div class="Ip-main"gt;lt;/divgt;lt;/divgt;

А зараз давайте це все красиво оформимо!

стилі CSS

В HTML розмітці нічого складного немає. Переходимо до візуального оформлення. Залежно від того, яке демо вам сподобалося більше, вам необхідно підключити між тегами відповідний файл стилів (який знаходиться в папці css).

Ну а підключається все це справа як зазвичай (якщо вам подобається перший ефект):

1

lt;link rel="Stylesheet" type="Text / css" href="Css / effect1.css" /gt;

Або так (якщо більше сподобався другий):

1

lt;link rel="Stylesheet" type="Text / css" href="Css / effect2.css" /gt;

На початку кожного з цих файлів Тобто от такі властивості:

1234567891011121314151617181920

@ Font-face {font-weight: normal-font-style: normal-font-family: `Blokk`-src: url("../fonts/blokk/BLOKKRegular.eot `)-src: url(`../fonts/blokk/BLOKKRegular.eot?#iefix`) format(`Embedded-opentype`),url(`../fonts/blokk/BLOKKRegular.woff`) format(`Woff`),url(`../fonts/blokk/BLOKKRegular.svg#BLOKKRegular`) format(`Svg`)-}@ Font-face {font-weight: normal-font-style: normal-font-family: "Feather `-src:url(`../fonts/feather/feather.eot?-9jv4cc`)-src:url(`../fonts/feather/feather.eot?#iefix-9jv4cc`) format(`Embedded-opentype`),url(`../fonts/feather/feather.woff?-9jv4cc`) format(`Woff`),url(`../fonts/feather/feather.ttf?-9jv4cc`) format(`Truetype`),url(`../fonts/feather/feather.svg?-9jv4cc#feather`) format(`Svg`)-}

Тут вам необхідно вказати шлях до папки fonts, щоб в подальшому працював індикатор завантаження.

Наступним властивістю ми зафіксуємо блок, в якому знаходиться індикатор завантаження:

123456789

.ip-header {position: fixed- / * Фіксоване позиціонування * /top: 0- / * Вказуючи 0 (нуль), ми »притискаємо" до верху цей блок * /z-index: 100- / * Позиціонування по осі Z * /min-height: 480px- / * Мінімальна висота блоку * /width: 100%- / * Ширина блоку на всю ширину екрану * /height: 100%- / * Висота блоку на всю висоту екрану * /background: # f1f1f1- / * Фоновий колір * /}

Властивостей дійсно багато, не буду їх все описувати. Вам лише потрібно підключити файл стилів відповідного ефекту. Ось що виходить в результаті:

Функціональна частина jQuery

Щоб все це запрацювало і закрутилося потрібна якась «магія» # 128578; . Але до неї ми сьогодні вдаватися не будемо, а будемо використовувати лише кількома скриптами (classie.js, pathLoader.js і main.js), Які можна знайти в папці js.

Скрипти підключаємо перед закриває тегом:

123

lt;script src="Js / classie.js"gt; lt;/scriptgt;lt;script src="Js / pathLoader.js"gt; lt;/scriptgt;lt;script src="Js / main.js"gt; lt;/scriptgt;

висновок

Зараз у нас все гарно працює і сторінка з`являється після закінчення таймера в індикаторі завантаження. Ви побачили 2 ефекту завантаження сторінки і можете вибирати будь-який свій смак. На що продає сторінці, де багато зображень, відео, і я не кажу про кількість скриптів, даний спосіб показати відвідувачеві заздалегідь Підвантажений сайт - дуже підійде.

Успіхів!

джерело: оригінал

З повагою, Юрій Німець