Как сделать появление элементов при прокрутке страницы?

Категория: Интернет

Шаг 1

Как всегда, для того чтобы работала библиотека jQuery, надо в шапке перед закрывающимся headили в подвале перед закрывающимсяbody подключить библиотеку.

1
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

 

Шаг 2

Далее нужно подключить скрипт, который будет совершать задержку анимации. Сделать это можно двумя способами. Сразу после библиотеки, в тегах javascript:

1
2
3
<script type="text/javascript">
//Сюда код
</script>

Или создайте файл, например - scriptviewport.js и подключите его.

1
<script type="text/javascript" src="/scriptviewport.js"></script>

Внутри тегов или файла добавляем следующий код:

1
!function(a){a.fn.viewportChecker=function(b){var c={classToAdd:"visible",classToRemove:"invisible",offset:100,repeat:!1,invertBottomOffset:!0,callbackFunction:function(a,b){},scrollHorizontal:!1};a.extend(c,b);var d=this,e={height:a(window).height(),width:a(window).width()},f=-1!=navigator.userAgent.toLowerCase().indexOf("webkit")?"body":"html";return this.checkElements=function(){var b,g;c.scrollHorizontal?(b=a(f).scrollLeft(),g=b+e.width):(b=a(f).scrollTop(),g=b+e.height),d.each(function(){var d=a(this),f={},h={};if(d.data("vp-add-class")&&(h.classToAdd=d.data("vp-add-class")),d.data("vp-remove-class")&&(h.classToRemove=d.data("vp-remove-class")),d.data("vp-offset")&&(h.offset=d.data("vp-offset")),d.data("vp-repeat")&&(h.repeat=d.data("vp-repeat")),d.data("vp-scrollHorizontal")&&(h.scrollHorizontal=d.data("vp-scrollHorizontal")),d.data("vp-invertBottomOffset")&&(h.scrollHorizontal=d.data("vp-invertBottomOffset")),a.extend(f,c),a.extend(f,h),!d.hasClass(f.classToAdd)||f.repeat){String(f.offset).indexOf("%")>0&&(f.offset=parseInt(f.offset)/100*e.height);var i=f.scrollHorizontal?Math.round(d.offset().left)+f.offset:Math.round(d.offset().top)+f.offset,j=f.scrollHorizontal?i+d.width():i+d.height();f.invertBottomOffset&&(j-=2*f.offset),g>i&&j>b?(d.removeClass(f.classToRemove),d.addClass(f.classToAdd),f.callbackFunction(d,"add")):d.hasClass(f.classToAdd)&&f.repeat&&(d.removeClass(f.classToAdd),f.callbackFunction(d,"remove"))}})},a(document).bind("touchmove MSPointerMove pointermove",this.checkElements),a(window).bind("load scroll touchmove",this.checkElements),a(window).resize(function(b){e={height:a(window).height(),width:a(window).width()},d.checkElements()}),this.checkElements(),this}}(jQuery);

Код сжат в одну строку, для быстрой загрузки браузером и имеет большую длину, так что будьте внимательны при копировании и убедитесь в том, что скопировали его полностью.

Шаг 3

После подключения скрипта задержки, подключаем еще один маленький скрипт, который задает настройки:

1
2
3
4
5
6
7
8
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.elementanm').addClass("hidden").viewportChecker({
classToAdd: 'visible animated slideRight',
offset: 100
});
});
</script>

В третей строке указан в скобках класс - elementanm. Этот класс нужно будет присваивать всем блокам и элементам, которым Вы захотите присвоить анимацию. В четвертой строке указан класс -slideRight. Это класс анимации. Чтобы задать нужную анимацию и нужный класс, Вам поможет прошлая статья, о которой я упомянул в самом начале. В нашем случаи это будет выезд вправо.

Если Вы захотите осуществить несколько разных видов анимации для элементов страницы, то код нужно дублировать лишь меняя класс в третей строке ну и класс анимации. Например:

1
2
3
4
5
6
7
8
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.blockanm').addClass("hidden").viewportChecker({
classToAdd: 'visible animated slideLeft',
offset: 100
});
});
</script>

Шаг 4

Как упомянул в предыдущем шаге, нужно элементам задать класс elementanm. В HTML разметке примерно будет так:

1
2
3
<div class="elementanm"> <!-- Контент размещается тут --> </div>
<div class="elementanm"> <!-- Контент размещается тут --> </div>
<div class="elementanm"> <!-- Контент размещается тут --> </div>

Если у Вас уже присвоен элементу класс, то просто добавьте через пробел, например:

1
<div class="class elementanm"> <!-- Контент размещается тут --> </div>

Шаг 5

И последним, что нужно сделать - задать 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
/*Анимация вправо*/
.slideRight{
    animation-name: slideRight;
    -webkit-animation-name: slideRight;
 
    animation-duration: 4s;
    -webkit-animation-duration: 4s;
 
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;    
 
    visibility: visible !important;
}
 
@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }
    100% {
        transform: translateX(0%);
    }  
}
 
@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-150%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}

Как видите, стили анимации имеют класс slideRight, поэтому, этот класс и прописан в скрипте в шаге №3. Также есть значение 4s - это время анимации и равно 4 секундам. Теперь добавим стили для того, чтобы элемент, сначала был невиден.

1
2
3
4
5
6
.hidden{
opacity:0;
}
.visible{
opacity:1;
}