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

Відео: Створюємо Loading Bar в After Effects

У цій статті вам на вибір пропонується набір ефектів, які можна використовувати при завантаженні сторінки. Всі ефекти дуже креативні і незвичайні. Як анімації використовується SVG анімація Snap.svg. Бо за допомогою Snap.svg можна створювати довільні форми для анімації завантаження. А взагалі, основна ідея полягає в тому, щоб накласти додатковий шар, поки завантажується необхідний контент (і користувач не бачив цієї поступової завантаження сторінки, а лише кінцевий результат).

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

Всі демо (їх всього 13) можна переглянути за посиланням:

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

Щоб підключити SVG анімацію:

lt;div id="Loader" class="Pageload-overlay" data-opening="M 0,0 80, -10 80,60 0,70 0,0" data-closing="M 0, -10 80, -20 80, -10 0,0 0, -10"gt;"Http://w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="None"gt;="M 0,70 80,60 80,80 0,80 0,70"/gt;lt;/svggt;lt;/divgt;

Блок з класом pageload-overlay буде перекривати видиму частину, цим даючи довантажити сторінці, яку користувач збирається побачити. А значення висоти і ширини в 100% у тега говорять нам про те, що все це шар буде розміром на всю ширину і висоту екрану Користувача.

Також в CSS нам потрібно задати властивість, яке буде спочатку ховати перекриває шар:

123456789101112131415161718192021222324252627282930313233343536373839404142434445

.pageload-overlay {position: fixed-width: 100%-height: 100%-top: 0-left: 0-visibility: hidden-}.pageload-overlay.show {visibility: visible-}.pageload-overlay svg {position: absolute-top: 0-left: 0-}.pageload-overlay svg path {fill: #fff-}.pageload-overlay {position: fixed-width: 100%-height: 100%-top: 0-left: 0-visibility: hidden-}.pageload-overlay.show {visibility: visible-}.pageload-overlay svg {position: absolute-top: 0-left: 0-}.pageload-overlay svg path {fill: #fff-}

властивість position: absolute робить блок з цим класом поверх всіх інших елементів на сторінці (це нам і треба, для того щоб шар з анімацією був над усіма іншими).

Відео: Уроки Sony Vegas Pro "ЕФЕКТИ"

І в кінці сторінки підключаємо кілька скриптів:

123456789101112131415161718192021222324252627282930

lt;script src="Js / snap.svg-min.js"gt; lt;/scriptgt;lt;script src="Js / classie.js"gt; lt;/scriptgt;lt;script src="Js / svgLoader.js"gt; lt;/scriptgt;lt;scriptgt; (function () {var pageWrap = document.getElementById ( `pagewrap`), pages = [] .slice.call (pageWrap.querySelectorAll ( `div.container`)), currentPage = 0, triggerLoading = [] .slice .call (pageWrap.querySelectorAll ( `a.pageload-link`)), loader = new SVGLoader (document.getElementById ( `loader`), {speedIn: 300, easingIn: mina.easeinout}) -function init () {triggerLoading .forEach (function (trigger) {trigger.addEventListener ( `click`, function (ev) {ev.preventDefault () - loader.show () - setTimeout (function () {loader.hide () - classie.removeClass (pages [currentPage], `show`) -currentPage = currentPage? 0: 1-classie.addClass (pages [currentPage], `show`) -} 2000) -}) -}) -} init () -}) ( ) -lt;/scriptgt;

висновок

Ефекти незвичайні, але я думаю що їх варто застосовувати на сторінках продажів (одностранічнік). Тому що при додаванні на звичайний сайт - вони будуть виглядати злегка не до речі. Але тут ще залежить від дизайну вашого сайту.