Плавное появление блока css при прокрутке. Создание анимации при прокрутке страницы при помощи jQuery
Здравствуйте, дорогие друзья! Долго готовил материал сегодняшней статьи и постарался подать его максимально подробно. Надеюсь после прочтения у вас больше не останется вопросов о том, как делается css .
Сразу хочу предупредить: мы не будем сами писать скрипты или что-то подобное (блог ведь рассчитан на новичков, и нам необходимо, чтобы легко подключалось и безотказно работало).
Для работы нам понадобится скачать несколько инструментов.
Размер: 0.48 Мб
Скачать исходник
В первую очередь – это файл animate.css – библиотека, в которой прописаны стили для анимации элементов на странице. Для того, чтобы визуально оценить и выбрать вид анимации, обычно, я использую страничку ресурса http://daneden.github.io/animate.css/
То есть процесс добавления анимации элементу начинается с того, что я захожу на данный ресурс и выбираю стиль анимации из предложенных вариантов. (Благо там есть из чего выбрать)
Далее необходимо подключить таблицу стилей. Для этого копируем файл animate.css в папку с таблицами стилей вашего сайта. У меня – эта папка так и называется «css». А в файле «index.html», между тегами head прописываем:
Теперь необходимо задать класс элементу, который хотим с анимировать, с соответствующим названием, которое выбрали на предыдущем шаге. То есть стиль bounceInRight, показанный на скриншоте выше – будет являться классом для элемента, который будем анимировать. А также класс animated, для того, чтобы анимация проигрывалась. Надеюсь понятно объяснил? Если нет, то на примере ниже — это предельно просто!
Например:
Теперь, при обновлении страницы будет проигрываться анимация. Можете попробовать нажав кнопку f5.
Правда круто? Но на этом процесс создания анимации не закончен, ведь нам необходимо сделать так, чтобы проигрывание анимации происходило при прокрутке страницы, а не сразу после ее загрузки!
Для этого нам придется воспользоваться готовым скриптом wow.js. Его необходимо поместить в папку js основного каталога вашего сайта. Я выложил только сжатый вариант, потому что он меньше весит и быстрее грузиться. Полностью ознакомиться с проектом можно .
Итак, для того, чтобы анимация элементов происходила при прокрутке страницы, необходимо в файл index.html, между тегами head добавить следующие 2 строки:
new WOW().init();
А также, классу bounceInRight, вместо animated необходимо добавить wow. Должно получиться следующее:
Как видите, первая анимация проигрывается сразу после загрузки страницы, а вторая, только при прокрутке, когда ее видит пользователь. В то время как первую – не заметит, если она расположена не на первом экране.
Можно сделать вывод, что процесс создания такой анимации сводиться к 5 минутам потраченного времени. Все что нужно сделать, это:
- Дописать 3 строчки кода между отрывающимся и закрывающимся тегом head.
- Скопировать файл animate.css и wow.min.js в соответствующие папки.
- Добавить класс wow и класс с названием анимации элементу, который хотим с анимировать
И все, ваш сайт будет смотреться гораздо живее и эффектнее. А в случае продажи – дороже.
Но есть дополнительные инструменты управления анимацией. У каждого элемента можно задать несколько специальных атрибутов для более тонкой настройки:
- data-wow-offset: Дистанция от нижнего края браузера для начала анимации;
- data-wow-duration: Изменение длительности анимации;
- data-wow-delay: Задержка перед стартом анимации;
- data-wow-iteration: Сколько раз повторять анимацию?
Например так:
А на сегодня все, до встречи на smartlanding. Оставляйте свои комментарии и задавайте вопросы! Пока!
P.s.: Если вы хотите сделать так, чтобы анимация проигрывалась при скролле в обе стороны, то рекомендую почитать вам
Я уверен, что Вам встречались такие сайты, на которых при прокрутке страницы вниз дополнительный контент, а именно блоки, подгружались с красивыми и плавными эффектами. Оказывается подобное очень просто делается с помощью простого скрипта и нескольких правил CSS. В демо будет несколько эффектов загрузки, которые Вы можете выбрать для своего сайта.
А теперь давайте посмотрим как выглядит сама структура подгружаемых блоков в HTML:
Как видите, что код очень простой.
CSSТаким образом у нас получилась страница, на которой расположено несколько блоков, которые должны при прокрутке вниз плавно подгружаться. Теперь нам нужно придумать 2 класса CSS, которые будут работать если один из блоков окажется в видимом поле браузера:
Hidden{ opacity:0; } .visible{ opacity:1; }
jQueryТеперь нам нужно добавить скрипт , который запустить весь этот не сложный двигатель. Вот именно в этом коде мы будем использовать тот класс который отвечает за один из многих типов анимации в Animate.css, например это будет fadeIn, соответственно код будет иметь такой вид:
JQuery(document).ready(function() { jQuery(".post").addClass("hidden").viewportChecker({ classToAdd: "visible animated fadeIn", offset: 100 }); });
Работает данный скрипт следующим образом: если наш блок находится в невидимом поле браузера ему присваивается класс hidden, который скрывает наш блок, после того как наш блок только доходит видимой части окна ему тут же присваивается класс visible вместе с классом от Animate.css, который добавляет красивую анимацию при появлении. Вот и весь секрет:)
Надеюсь Вам понравился данный урок. Пока:)
Сейчас на многих сайтах можно встретить такую анимацию и ниже я тоже покажу пример. Лично я применяю такую анимацию при создании посадочных страниц(лендингов). Многие вебмастера активно применяют на своих сайтах и смотрится такая анимация при прокрутке, довольно красиво.
Чтобы сделать такое у себя на сайте, нужно немного потрудится. Если хоть немного понимать, то сложного ничего нет. Разобьем все наши действия на шаги, чтобы не запутаться.
Шаг 1Как всегда, для того чтобы работала библиотека jQuery , надо в шапке перед закрывающимся head или в подвале перед закрывающимсяbody подключить библиотеку.
Шаг 2
//Сюда код
Или создайте файл, например - scriptviewport.js и подключите его.
Внутри тегов или файла добавляем следующий код:
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После подключения скрипта задержки, подключаем еще один маленький скрипт, который задает настройки:
jQuery(document).ready(function() { jQuery(".elementanm").addClass("hidden").viewportChecker({ classToAdd: "visible animated slideRight", offset: 100 }); });
В третей строке указан в скобках класс - elementanm . Этот класс нужно будет присваивать всем блокам и элементам, которым Вы захотите присвоить анимацию. В четвертой строке указан класс - slideRight . Это класс анимации. Чтобы задать нужную анимацию и нужный класс, Вам поможет прошлая статья, о которой я упомянул в самом начале. В нашем случаи это будет выезд вправо.
Если Вы захотите осуществить несколько разных видов анимации для элементов страницы, то код нужно дублировать лишь меняя класс в третей строке ну и класс анимации. Например:
jQuery(document).ready(function() { jQuery(".blockanm").addClass("hidden").viewportChecker({ classToAdd: "visible animated slideLeft", offset: 100 }); });
Шаг 4Как упомянул в предыдущем шаге, нужно элементам задать класс elementanm . В HTML разметке примерно будет так:
Если у Вас уже присвоен элементу класс, то просто добавьте через пробел, например:
Шаг 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; }
Трудный путь в пять шагов, преодолен, так что можно посмотреть на результат своего труда. Запутаться можно, но если делать все внимательно, то все получится. Код в статье из примера, так что работает все. Пробуйте применять разные виды анимации, чтобы добиться нужного результата.
На этом все, спасибо за внимание. 🙂
Интернет меняется каждый день. Одни технологии и методы возникают, другие исчезают. По этой причине веб-дизайнеры и front-end разработчики должны быть в курсе последних тенденций в веб-дизайне. Parallax-прокрутка, фиксированные заголовки, плоский дизайн, одностраничные сайты и CSS-анимация некоторые из самых горячих веб-тенденций на текущий момент.
В этом уроке мы рассмотрим создание анимации и эффектов при прокрутке страницы с помощью CSS и jQuery.
Четыре эффекта, которые мы будем создавать можно увидеть на этой странице .
Примечание: Код, используемый в этом уроке можно было бы улучшить при помощи кэширования объектов и использования CSS анимации вместо метода jQuery "animate() ", но для простоты мы сконцентрируемся в первую очередь на идее.
Что такое анимация и эффекты при прокрутке страницы?Подобная анимация и эффекты новый, набирающий популярность метод, который дает front-end разработчикам возможность создавать мультимедийные и интерактивные веб-проекты. Когда пользователь прокручивает страницу вниз, разработчики могут легко манипулировать объектами с помощью CSS и jQuery.
Для того чтобы обнаружить прокручивает ли пользователь страницу вниз, мы используем jQuery-событие scroll() .
После того, как мы узнаем, что пользователь прокручивает страницу, мы можем получить вертикальное положение полосы прокрутки с помощью метода scrollTop() и применить нужные эффекты:
if
($(this
)
.scrollTop
()
>
0
)
{
// создаем эффекты и анимацию
}
}
)
;
Если мы заинтересованы в создании адаптивных эффектов (оптимизированных под разные разрешения экрана), то мы должны определить следующие свойства:
- Свойство width - ширина окна браузера.
- Свойство height - высота окна браузера.
Без определения этих свойств мы создадим эффекты которые будут "статичными" и не будут работать правильно, если пользователь изменит размер окна горизонтально или вертикально.
Мы можем легко получить значения этих свойств с помощью методов width() и height() .
Следующий фрагмент кода показывает все необходимые проверки, которые мы должны принять во внимание, чтобы создать эффекты при прокрутке страницы.
$(window)
.scroll
(function
()
{
if
($(this
)
.width
()
<
992
)
{
if
($(this
)
.height
()
1000
)
{
// создаем эффекты
}
}
}
}
)
;
Теперь, когда мы рассмотрели основы создания подобных эффектов, давайте посмотрим их в действии, на четырех различных примерах.
Пример #1Этот эффект срабатывает, когда верхнее положение полосы прокрутки окна превышает 60px. В таком случае выполняется следующий фрагмент кода:
if
($(window)
.scrollTop
()
>
60
)
{
$(".banner h2"
)
.css
("display"
,
"none"
)
;
$(".banner .info"
)
.css
("display"
,
"block"
)
;
}
else
{
$(".banner h2"
)
.css
("display"
,
"block"
)
;
$(".banner .info"
)
.css
("display"
,
"none"
)
;
}
Код выше скрывает дочерний элемент h2 внутри элемента с классом .banner и показывает его дочерний элемент .info , который был первоначально скрыт.
Этот код также может быть записан следующим образом:
if
($(window)
.scrollTop
()
>
60
)
{
$(".banner h2"
)
.hide
()
;
$(".banner .info"
)
.show
()
;
}
else
{
$(".banner h2"
)
.show
()
;
$(".banner .info"
)
.hide
()
;
}
Следующий эффект зависит не только от верхней позиции полосы прокрутки браузера, но и от ширины окна. В частности, мы делаем следующие предположения:
Вышеупомянутые предположения реализованы в следующем фрагменте кода:
if
($(window)
.width
()
600
)
{
firstAnimation()
;
}
}
else
if
($(window)
.width
()
>
480
)
{
// анимация, которая должны быть выполнена
firstAnimation()
;
}
}
else
{
if
($(window)
.scrollTop
()
>
450
)
{
// анимация, которая должны быть выполнена
firstAnimation()
;
}
}
Код, который содержит анимацию, которая будет выполнена, следующий:
var
firstAnimation =
function
()
{
$(".clients .clients-info"
)
.each
(
function
()
{
$(this
)
.delay
(500
)
.animate
({
opacity:
1
,
height:
"180"
,
width:
"250"
}
,
2000
)
;
}
)
;
}
;
Код выше анимирует свойства непрозрачности, высоту и ширину для элемента .clients-info .
Пример #3Третий эффект зависит также от верхней позиции полосы прокрутки окна и от ширины окна. В частности, мы делаем следующие предположения:
И вот код:
if
($(window)
.width
()
1750
)
{
secondAnimation()
;
}
}
else
if
($(window)
.width
()
>
549
&
amp;&
amp;
$(window)
.width
()
1150
)
{
secondAnimation()
;
}
}
else
{
if
($(window)
.scrollTop
()
>
850
)
{
secondAnimation()
;
}
}
Код, который содержит анимацию, следующий:
var
secondAnimation =
function
()
{
$(".method:eq(0)"
)
.delay
(1000
)
.animate
({
opacity:
1
}
,
"slow"
,
function
()
{
}
)
;
$(".method:eq(1)"
)
.delay
(2000
)
.animate
({
opacity:
1
}
,
"slow"
,
function
()
{
$(this
)
.find
("h4"
)
.css
("background-color"
,
"#b5c3d5"
)
;
}
)
;
$(".method:eq(2)"
)
.delay
(3000
)
.animate
({
opacity:
1
}
,
"slow"
,
function
()
{
$(this
)
.find
("h4"
)
.css
("background-color"
,
"#b5c3d5"
)
;
}
)
;
$(".method:eq(3)"
)
.delay
(4000
)
.animate
({
opacity:
1
}
,
"slow"
,
function
()
{
$(this
)
.find
("h4"
)
.css
("background-color"
,
"#b5c3d5"
)
;
}
)
;
}
;
Код выше последовательно анимирует свойство opacity для элементов .method , а затем меняет цвет фона дочерних элементов h4 .
Пример #4Этот эффект также зависит от верхней позиции полосы прокрутки и ширины окна. Более конкретно:
Это реализовано следующим кодом:
if
($(window)
.width
()
3500
)
{
thirdAnimation()
;
}
}
else
if
($(window)
.width
()
>
549
&
amp;&
amp;
$(window)
.width
()
2200
)
{
thirdAnimation()
;
}
}
else
{
if
($(window)
.scrollTop
()
>
1600
)
{
thirdAnimation()
;
}
}
Код для анимации следующий:
.delay (2000 ) .animate ({opacity: 1 ,
right: 0
} , "slow"
) ;
$(".blogs"
)
.find
("button"
)
.delay
(2500
)
.animate
({
opacity:
1
,
bottom:
0
}
,
"slow"
)
;
}
;
Код выше последовательно анимирует свойства opacity, left, right и bottom для элементов в P, IMG, BUTTON .
ЗаключениеЯ надеюсь, что показаные здесь четыре примера помогут вам понять как можно создавать различные эффекты и анимацию при прокрутке страницы.
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим
Мы делали анимацию элементов, используя библиотеку animate.css . CSS анимация отрабатывала сразу, после загрузки страницы и останавливалась, что является большим недостатком, если страница длинная.
Демо-пример с animate.cssПокручивая длинный лендинг, пользователь просто не успевает увидеть анимацию всех секций, ведь библиотека animate.css уже быстренько отработала. Что же делать? Как заставить анимацию продолжать работать при прокрутке страницы, реагируя на новые секции с элементами.
Как гласит народная мудрость, если мало одной библиотеки, то добавь ещё одну.
Подключение плагина wow.jsСайт: https://github.com/matthieua/WOW
Нужно сделать так, чтобы анимация срабатывала только тогда, когда мы прокручиваем страницу. Для этого и существует плагин wow.js , для работы которого не нужен jQuery . Обратите внимание, что файл animate.css , тоже должен быть подключен и классы у тегов прописаны, об этом было сказано в начале статьи.
Запомните! Animate.css и wow.js работают в паре!
Независимо от способа подключения, прописываем ссылку на JS файл перед закрывающим тегом body , в теге script . Запускает плагин функция - new WOW().init()
Подключение через CDNnew WOW().init();
Подключение через скачивание архива
Скачиваете архив с github и перекладываете файл wow.min.js из скачанной архивной папки dist папку js с вашим проектом.
new WOW().init();
Чтобы анимация на сайте сработала, необходимо добавить к тегам элементов, которые собираетесь анимировать - класс wow , вместо класса animated . Замена классов касается тех, кто на сайте использовал только одну библиотеку animate.css , но решил добавить ещё плагин wow.js . Если вы сразу установили оба файла, то просто прописываете wow и название анимации.
Было так:
А стало так:
Теперь анимация запускается при прокрутке страницы , по ходу движения вниз, по мере появления новых элементов на странице.
Дополнительные опцииТеперь давайте рассмотрим дополнительные опции, которые можно использовать в наших анимациях. Для этого посмотрим, что есть в документации, из четырех опций я реально использую только две. Остальные на мой взгляд бесполезные и даже вредные.
Атрибут data-wow-duration задает продолжительность анимации в секундах, иногда необходимо замедлить анимацию, сделать её более плавной. Атрибут data-wow-offset устанавливает на каком расстояние от нижнего края браузера, следует запустить анимацию.
Допустим, вы хотите, чтобы анимация длилась 1 секунду. Добавляете к классу тега соответствующий параметр.
How it works
Демо-пример с animate.css+wow.jsГде на практике лучше всего применять комбинацию animate.css + wow.js ? Там, где вы активно продвигаете товар или услугу, такая подача информации привлечет больше клиентов. Самый главный потребитель анимаций при прокручивании страницы – это лендинг. Есть одно но, прежде чем повесить на него анимацию, надо сперва научиться профессионально создавать лендинги, хотя бы из этого видеокурса .Обратите внимание, как привлекательно анимирована сама продающая страница видео-курса.