Exore LTD » CSS3 » Прокрутка страницы: красивый эффект
Лого SiteHere.ru

Апрель 21, 2017 Запись была обновлена

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

Прокрутка страницы: красивый эффект

Прокрутка страницы: красивый эффект

В этом уроке мы рассмотрим такой эффект при прокрутке страницы, который можно применить как у себя на сайте, так и на своих продающих страницах или страницах захвата. Суть эффекта заключается в том, что при прокручивании страницы вверх или вниз блоки с информацией и изображениями плавно появляются то слева, то справа. Этот эффект реализован с помощью CSS3 и Javascript. Посмотрите демо, чтобы увидеть понять что это за эффект и как он работает.

Пример можно увидеть здесь:

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

Прокрутка страницы



Как использовать?

HTML

Каждый отдельный появляющийся блок находится в теге <section>, в котором изображение размещается в теге <figure>, а текст в теге <article>:

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

<div id="cbp-so-scroller" class="cbp-so-scroller">
    <section class="cbp-so-section">
        <article class="cbp-so-side cbp-so-side-left">
            <h2>Lemon drops</h2>
            <h2>Название</h2>
            <p>Описание</p>
        </article>
        <figure class="cbp-so-side cbp-so-side-right">
            <img src="images/1.png" alt="img01">
        </figure>
    </section>
 
    <section class="cbp-so-section">
        <figure class="cbp-so-side cbp-so-side-left">
            <img src="images/2.png" alt="img01">
        </figure>
        <article class="cbp-so-side cbp-so-side-right">
            <h2>Название</h2>
            <p>Описание</p>
        </article>
    </section>
 
    <section>
        <!-- ... -->
    </section>
    <!-- ... -->
</div>


CSS

Что касается стилей, то их здесь немного.

Для начала задаем стили для общего блока.

1
2
3
4

.cbp-so-scroller {
    margin-top: 3em;
    overflow: hidden;
}

Затем стили для каждого появляющегося блока:

1
2
3
4
5
6
7
8
9
10
11
12
13

.cbp-so-section {
    margin-bottom: 15em;
}
 
.cbp-so-section:before,
.cbp-so-section:after {
    content: " ";
    display: table;
}
 
.cbp-so-section:after {
    clear: both;
}

Дальше задаем стили для заголовков:

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

.cbp-so-section h2 {
    font-size: 5em;
    font-weight: 300;
    line-height: 1;
}
 
.cbp-so-section p {
    font-size: 2em;
    font-weight: 300;
}
 
.cbp-so-side {
    width: 50%;
    float: left;
    margin: 0;
    padding: 3em 4%;
    overflow: hidden;
    min-height: 12em;
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    -moz-transition: -moz-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
}
 
.cbp-so-side:before,
.cbp-so-side:after {
    content: " ";
    display: table;
}
 
.cbp-so-side:after {
    clear: both;
}
 
.cbp-so-side-right {
    text-align: left;
}
 
.cbp-so-side-left {
    text-align: right;
}
 
.cbp-so-side-right img {
    float: left;
}
 
.cbp-so-side-left img {
    float: right;
}
 
.cbp-so-init .cbp-so-side {
    opacity: 0;
}
 
.cbp-so-init .cbp-so-side-left {
    -webkit-transform: translateX(-80px);
    -moz-transform: translateX(-80px);
    transform: translateX(-80px);
}
 
.cbp-so-init .cbp-so-side-right {
    -webkit-transform: translateX(80px);
    -moz-transform: translateX(80px);
    transform: translateX(80px);
}
 
.cbp-so-section.cbp-so-animate .cbp-so-side-left,
.cbp-so-section.cbp-so-animate .cbp-so-side-right {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
}


Javascript

cbpScroller.js — это плагин, с помощью которого прокрутку страницы можно сделать более красивой. Этот маленький плагин подходит и для нашего случая. Его можно скачать — здесь.

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

;( function( window ) {
    'use strict';
    var docElem = window.document.documentElement;
 
    function getViewportH() {
        var client = docElem['clientHeight'],
            inner = window['innerHeight'];
 
        if( client < inner )
            return inner;
        else
            return client;
    }
 
    function scrollY() {
        return window.pageYOffset || docElem.scrollTop;
    }
 
    function getOffset( el ) {
        var offsetTop = 0, offsetLeft = 0;
        do {
            if ( !isNaN( el.offsetTop ) ) {
                offsetTop += el.offsetTop;
            }
            if ( !isNaN( el.offsetLeft ) ) {
                offsetLeft += el.offsetLeft;
            }
        } while( el = el.offsetParent )
 
        return {
            top : offsetTop,
            left : offsetLeft
        }
    }
 
    function inViewport( el, h ) {
        var elH = el.offsetHeight,
            scrolled = scrollY(),
            viewed = scrolled + getViewportH(),
            elTop = getOffset(el).top,
            elBottom = elTop + elH,
            h = h || 0;
 
        return (elTop + elH * h) <= viewed && (elBottom) >= scrolled;
    }
 
    function extend( a, b ) {
        for( var key in b ) {
            if( b.hasOwnProperty( key ) ) {
                a[key] = b[key];
            }
        }
        return a;
    }
 
    function cbpScroller( el, options ) {  
        this.el = el;
        this.options = extend( this.defaults, options );
        this._init();
    }
 
    cbpScroller.prototype = {
        defaults : {
            viewportFactor : 0.2
        },
        _init : function() {
            if( Modernizr.touch ) return;
            this.sections = Array.prototype.slice.call( this.el.querySelectorAll( '.cbp-so-section' ) );
            this.didScroll = false;
 
            var self = this;
            // the sections already shown...
            this.sections.forEach( function( el, i ) {
                if( !inViewport( el ) ) {
                    classie.add( el, 'cbp-so-init' );
                }
            } );
 
            var scrollHandler = function() {
                    if( !self.didScroll ) {
                        self.didScroll = true;
                        setTimeout( function() { self._scrollPage(); }, 60 );
                    }
                },
                resizeHandler = function() {
                    function delayed() {
                        self._scrollPage();
                        self.resizeTimeout = null;
                    }
                    if ( self.resizeTimeout ) {
                        clearTimeout( self.resizeTimeout );
                    }
                    self.resizeTimeout = setTimeout( delayed, 200 );
                };
 
            window.addEventListener( 'scroll', scrollHandler, false );
            window.addEventListener( 'resize', resizeHandler, false );
        },
        _scrollPage : function() {
            var self = this;
 
            this.sections.forEach( function( el, i ) {
                if( inViewport( el, self.options.viewportFactor ) ) {
                    classie.add( el, 'cbp-so-animate' );
                }
                else {
                    classie.add( el, 'cbp-so-init' );
                    classie.remove( el, 'cbp-so-animate' );
                }
            });
            this.didScroll = false;
        }
    }
    window.cbpScroller = cbpScroller;
} )( window );


Вывод

Интересный эффект, который можно использовать на продающих страницах и страницах захвата, чтобы как-то их разнообразить. Но, возможно, вы найдете и другое применение этому эффекту.


Успехов!

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

Источник: http://tympanus.net/codrops/category/blueprints/

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

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

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

6 комментариев к записи
  • anton

    а как пример посмотреть можно?

     
    Ответить
    • Юрий

      Я извиняюсь. Совсем забыл разместить демо. Сейчас исправил!

       
      Ответить
  • Дмитрий

    Как понимаю прокрутка которая на этом сайте?

     
    Ответить
    • Юрий

      Дмитрий, нет. У меня на сайте нет такого эффекта.

       
      Ответить
  • Дмитрий

    Юрий а тогда можно узнать на систему ucoz этот код подойдет?

     
    Ответить
    • Юрий

      Дмитрий, этот код подойдет для любой CMS. Только вот нужно придумать где вы будете его использовать. И нужен полный доступ к коду шаблона(чтобы можно было загружать и подключать js файлы).

       
      Ответить

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

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