Сейчас на многих сайтах можно встретить такую анимацию и ниже я тоже покажу пример. Лично я применяю такую анимацию при создании посадочных страниц(лендингов). Многие вебмастера активно применяют на своих сайтах и смотрится такая анимация при прокрутке, довольно красиво.
Чтобы сделать такое у себя на сайте, нужно немного потрудится. Если хоть немного понимать, то сложного ничего нет. Разобьем все наши действия на шаги, чтобы не запутаться.
Шаг 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",classToAddForFullView:"full-visible",removeClassAfterAnimation:!1,offset:100,repeat:!1,invertBottomOffset:!0,callbackFunction:function(a,b){},scrollHorizontal:!1,scrollBox:window};a.extend(c,b);var d=this,e={height:a(c.scrollBox).height(),width:a(c.scrollBox).width()};return this.checkElements=function(){var b,f;c.scrollHorizontal?(b=Math.max(a("html").scrollLeft(),a("body").scrollLeft(),a(window).scrollLeft()),f=b+e.width):(b=Math.max(a("html").scrollTop(),a("body").scrollTop(),a(window).scrollTop()),f=b+e.height),d.each(function(){var d=a(this),g={},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-add-class-full-view")&&(h.classToAddForFullView=d.data("vp-add-class-full-view")),d.data("vp-keep-add-class")&&(h.removeClassAfterAnimation=d.data("vp-remove-after-animation")),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(g,c),a.extend(g,h),!d.data("vp-animated")||g.repeat){String(g.offset).indexOf("%")>0&&(g.offset=parseInt(g.offset)/100*e.height);var i=g.scrollHorizontal?d.offset().left:d.offset().top,j=g.scrollHorizontal?i+d.width():i+d.height(),k=Math.round(i)+g.offset,l=g.scrollHorizontal?k+d.width():k+d.height();g.invertBottomOffset&&(l-=2*g.offset),k<f&&l>b?(d.removeClass(g.classToRemove),d.addClass(g.classToAdd),g.callbackFunction(d,"add"),j<=f&&i>=b?d.addClass(g.classToAddForFullView):d.removeClass(g.classToAddForFullView),d.data("vp-animated",!0),g.removeClassAfterAnimation&&d.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",function(){d.removeClass(g.classToAdd)})):d.hasClass(g.classToAdd)&&g.repeat&&(d.removeClass(g.classToAdd+" "+g.classToAddForFullView),g.callbackFunction(d,"remove"),d.data("vp-animated",!1))}})},("ontouchstart"in window||"onmsgesturechange"in window)&&a(document).bind("touchmove MSPointerMove pointermove",this.checkElements),a(c.scrollBox).bind("load scroll",this.checkElements),a(window).resize(function(b){e={height:a(c.scrollBox).height(),width:a(c.scrollBox).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;
}
Трудный путь в пять шагов, преодолен, так что можно посмотреть на результат своего труда. Запутаться можно, но если делать все внимательно, то все получится. Код в статье из примера, так что работает все. Пробуйте применять разные виды анимации, чтобы добиться нужного результата.
На этом все, спасибо за внимание. 🙂
