1 608 Рассмотрим, какие эффекты можно применить во время загрузки страницы. Такие эффекты довольно нетривиальны. Для создания анимированной части, используем библиотеку Snap.svg. Эта библиотека позволяет создавать любые формы, пригодные к использованию в качестве анимации загрузки. Основной целью является создание слоя, отображающегося во время загрузки, чтобы пользователь видел готовую страницу, а не процесс ее загрузки.
Эффекты загрузки страницы, смотреть и скачать:
Для этого сначала подключим SVG:
|
1 2 3 4 5 |
<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"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none"> <path d="M 0,70 80,60 80,80 0,80 0,70"/> </svg> </div> |
Благодаря атрибуту class с именем pageload-overlay блочный элемент <div> будет отображаться на всей странице. В это время будет происходить загрузка запрашиваемой пользователем страницы. Присвоив элементам width и height тега <svg> значение 100%, мы зададим отображение нашего слоя на весь экран.
Используя CSS, присвоим нашему слою состояние по умолчанию. В этом состоянии он должен быть скрыт.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.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 отображает наш блок поверх содержимого страницы, что, собственно, и требовалось для того, чтобы закрепить слой поверх содержимого запрашиваемой страницы.
Осталось подключить пару скриптов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<script src="js/snap.svg-min.js"></script> <script src="js/classie.js"></script> <script src="js/svgLoader.js"></script> <script> (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(); })(); </script> |
Данные эффекты загрузки страницы можно применять на целевых страницах (лендингах). Добавлять такие эффекты на другие типы сайтов обычно не рекомендуют. Однако, как показывает практика, такие эффекты допустимы, в зависимости от дизайна сайта.
