Главная
Web-дизайн
Анимация элементов страницы при прокрутке

Анимация элементов страницы при прокрутке

анимация при прокрутке

Доброго времени суток. 🙂

Задумался о теме для сегодняшней статьи и решил написать дополнение для одной из своих старых статей. Я когда-то уже писал статью - CSS анимация элементов. Там я показал как заставить элементы сайта двигаться и перемещаться на странице. Одни эффекты были разовыми, некоторые циклические и постоянно повторяются, но все они осуществлялись сразу после загрузки страницы. В этой статье хочу показать, как сделать анимацию при прокрутке. Элементы будут совершать анимацию по мере появления на странице во время прокрутки.Прошлая статья Вам пригодится тоже, с нее будете брать сами эффекты, а вот задержка сделается уже с помощью jQuery.

Сейчас на многих сайтах можно встретить такую анимацию и ниже я тоже покажу пример. Лично я применяю такую анимацию при создании посадочных страниц(лендингов). Многие вебмастера активно применяют на своих сайтах и смотрится такая анимация при прокрутке, довольно красиво.



Пример

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

Шаг 1

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

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

Шаг 2

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

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

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

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

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

!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

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

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

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

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

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

Шаг 4

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

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

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

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

Шаг 5

И последним, что нужно сделать - задать CSS стили. Сначала пропишем стили анимации. Берем их с предыдущей статьи о которой уже упоминал в этой статье. Я беру анимацию - выезд вправо.

/*Анимация вправо*/
.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 секундам. Теперь добавим стили для того, чтобы элемент, сначала был невиден.

.hidden{
opacity:0;
}
.visible{
opacity:1;
}

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

На этом все, спасибо за внимание. 🙂




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


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(7 голосов, в среднем: 5 из 5)

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

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

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий