Exore LTD » jQuery » Эффекты загрузки страницы
Лого SiteHere.ru

Ноябрь 29, 2015 Запись была обновлена

Время чтения: 2 мин. Прочитать позже

Эффекты загрузки страницы

Эффекты загрузки страницы

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

Эффекты загрузки страницы

Все демо (их всего 13) можно посмотреть по ссылке:

Посмотреть примерСкачать

Чтобы подключить 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>

Блок <div> с классом pageload-overlay будет перекрывать видимую часть, тем самым давая подгрузиться странице, которую пользователь собирается увидеть. А значения высоты и ширины в 100% у тега <svg> говорят нам о том, что все этот слой будет размером на всю ширину и высоту экрана пользователя.

Также в 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>


Вывод

Эффекты необычные, но я думаю что их стоит применять на страницах продаж (одностраничниках). Потому что при добавлении на обычный сайт — они будут смотреться слегка не кстати. Но тут еще зависит от дизайна вашего сайта.


Успехов!

С Уважением, Юрий Немец

Источник: http://tympanus.net/codrops/2014/04/23/page-loading-effects/

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

3 комментария к записи
  • Инна

    Ой как здорово, только ставить сложновато… Хотя если загрузка страниц сайта быстрая — он и не нужен, но мне очень идея понравилась! Лайк!

     
    Ответить
  • ИЛЮШКА

    Супер! Оригинально! Мне понравилось! Качаю! Спасибо вам за такую полезную статью!

     
    Ответить
  • Станислав

    Большинство примеров очень крутые, но сложно понять: что куда вставлять…

     
    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *