Как-то я работал с одним лендингом. На сайте было задействовано довольно много различных эффектов — по мере скроллинга страницы что-то выдвигается, что-то проявляется, затем задвигается, опять исчезает… И обслуживали всю эту анимацию совершенно разные скрипты.
И вот что меня поразило: для того, чтобы сдвигались и раздвигались несколько строк на данном лендинге, использовался файл стилей, вес которого был аж 900 кбайт. Как по мне, так это очень большая роскошь. Суммарный объем загружаемых файлов на этом сайте был около 2,5 Мбайт. А сам сайт сделан с помощью довольно популярной сегодня программы для создания сайтов Adobe Muse.
Вообще, сайты, созданные с помощью данной программы, получаются довольно тяжеловесными. Но суть не в том. Однажды все эти 900 кбайт оказались безжизненным набором знаков. Дело в том, что для того, чтобы эти стили задействовались, и строки приходили в движение, к сайту подключался сторонний джава скрипт. Не знаю, что произошло, только скрипт исчез вместе с сайтом, на котором он располагался.
Может, это даже и к лучшему. Потому что недолгие поиски в интернете привели к тому, что я нашел несколько готовых решений для анимации на сайте. Причем, эти решения «весили» как минимум в 10 раз меньше, чем тот файл, что использовался на лендинге ранее.
Из этих нескольких найденных решений удалось выбрать самый легкий, простой в понимании и использовании вариант. О нем я и расскажу в данной заметке.
Сразу дам ссылку на сайт, где можно увидеть анимационные эффекты, которые позволяет осуществить на сайте данный плагин или скрипт — как вам угодно.
http://www.justinaguilar.com/animations/index.html
Там все на английском. Однако в принципе все понятно — на данной странице увидите эффекты, а в верхнем меню есть ссылка Download, по которой попадаете вниз данной страницы, где расположена большая зеленая кнопка. Чтобы сохранить файл стилей, кликните по кнопке правой кропкой мыши и выберите Сохранить объект как… Таким образом сразу загрузить файл стилей на свой комп. Если же кликнуть левой клавишей, то откроется страница с кодом, который содержится в данном файле стилей.
Итак, эффекты посмотрели, файл стилей скачали. Теперь нужно его подключить к странице вашего сайта и настроить нужные эффекты анимации.
Как вы понимаете, файл содержит некий набор стилей, которые производят с выбранным объектом понравившуюся вам анимацию. Для каждого анимационного эффекта в стилях прописан свой класс. Так, класс SlideLeft, присвоенный объекту, заставляет данный объект двигаться влево — от правого края экрана к заданной точке. Класс SlideRight делает все наоборот. И так далее.
Однако, если просто назначить выбранным объектам необходимый класс, то вся анимация будет происходить во время загрузки страницы. То есть анимационные эффекты в нижней части страницы, которая не видна посетителю в момент загрузки страницы, останутся незамеченными. И весь смысл анимации потеряется.
Нам же нужно, чтобы эффекты проявлялись именно тогда, когда ваш посетитель прокручивал страницу до определенного блока. Или же в момент, когда на объект наводится указатель мышки, или же в момент клика по кнопке.
Это все нам позволяют осуществить джава скрипты. В зависимости от того, по какому событию должна происходить анимация, мы и прописываем в скрипте это событие для определенного объекта. Чтобы было понятно, привожу практический пример.
Есть некий блок с идентификатором object (взял пример с указанного сайта). И вы хотите, чтобы данный блок выезжал с левого края экрана. То есть двигался вправо. Выбираете соответственно класс SlideRight. Если мы просто пропишем данный класс для выбранного блока, то он выедет в момент загрузки страницы, и вы рискуете, что посетитель не успеет и заметить этот эффект.
Значит, нужно, чтобы выбранный класс присвоился этому объекту в тот момент, когда он покажется на экране посетителя. И вдобавок не сразу, а где-то ближе к центру экрана.
Сделать это очень просто. Достаточно вставить на странице небольшой скрипт, пример которого и приводится на странице автора. Я же позволю себе продублировать эти скрипты с некоторыми комментариями.
Итак, чтобы анимация проявлялась при скрллинге, нам понадобится скрипт, который будет отслеживать координаты заданного объекта на экране посетителя. И как только объект достигнет заданной координаты, скрипт присвоит ему необходимый класс, и посетитель увидит движение данного объекта.
Вот практический пример такого скрипта
<script>
$(window).scroll(function() {
$('#object').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+400) {
$(this).addClass("SlideRight");
}
});
});
</script>
Как видите, здесь участвует уже знакомый нам блок с идентификатором object. К нему применено событие, происходящее при скроллинге. Далее можно заметить, что событие должно произойти в момент, когда верхняя точка данного объекта окажется на расстоянии 400 пикселов от верхнего края экрана. И в конце можно заметить, какое конкретно должно произойти событие согласно класса, который присваивается объекту в данный момент. Так как класс присваивается в данном примере SlideRight, то блок с идентификатором object выедет с левого края экрана.
Как видите, все очень просто: назначаете объектам определенные идентификаторы, прописываете эти идентификаторы в скрипте, прописываете в скрипте нужный класс и при необходимости изменяете координату срабатывания скрипта.
Практически, если на вашем сайте несколько строк поочередно должны выезжать с правой и с левой сторон, то строкам с одинаковым эффектом назначаете одинаковый идентификатор. Вместо идентификатора можно использовать класс. Соответственно в скрипте нужно будет вместо решетки поставить точку.
Для блоков, выезжающих слева, вполне подходит выше приведенный пример. Для блоков, которые будут выезжать справа, добавляете точно такой же скрипт, где соответственно прописываете класс или идентификатор выбранных блоков и изменяете класс, который должен им присваиваться для реализации желаемого эффекта анимации.
Для разных эффектов добавляете аналогичный скрипт с соответствующими корректировками.
Только это еще не все.
Для того, чтобы объекты не были видны до момента срабатывания скрипта, им нужно назначить соответствующее свойство:
#object{visibility: hidden;}
Здесь просто через запятую перечисляете классы или идентификаторы блоков, к которым вы применяете анимационные эффекты.
Как я говорил выше, анимацию можно осуществлять не только при скролле странице, но и при наведении указателя мышки. Для этого пишем немножко другой скрипт:
<script>
$('#object').click(function() {
$(this).addClass("slideUp");
});
</script>
Здесь еще проще и в дополнительных комментариях смысла не вижу. Просто поэкспериментируйте на практике. Очень увлекательное занятие.
Решил дополнить по применению этого маленького скриптика.
В том варианте, в каком он приведен выше, скрипт включает анимацию объекта, по которому осуществляется клик. На практике частенько приходится встречаться с немного иными задачами. В частности, когда кликаете по одному объекту, а анимация применяется к другому.
Таким примером может служить вызов всплывающего (модального) окна. Когда нужно сделать так, чтобы по клику на кнопке модальное окно появлялось плавно, выдвигаясь сверху (сбоку, снизу).
Для того, чтобы осуществить эту задачу, в выше приведенном скрипте достаточно внести одно изменение.
<script>
$('#object').click(function() {
$('.modal').addClass("slideUp");
});
</script>
Вместо this мы прописываем класс или идентификатор того объекта, который должен быть анимирован. Если расшифровать этот скрипт, это будет выглядеть прмерно так: назначаем объект, кликнув по которому, мы присвоим другому объекту заданный класс.
В качестве первого объекта у нас выступает кнопка (если речь идет об анимации всплывающего окна), в качестве второго — собственно само модальное окно.
Напоследок хочу заметить, что весь набор стилей весит всего лишь 20 кбайт. Согласитесь, это мизер. Однако при желании можно его сделать и еще меньше, выбрав для конкретного сайта только необходимые (те, что будут задействованы) стили. Вы наверняка не будете использовать на одном сайте все анимационные эффекты, которые заложены в данном наборе.
И для тех, кто не в курсе. Чтобы подключить данный файл стилей к вашему сайту, нужно в хедере между открывающими закрывающим вставить данную строку
<link rel="stylesheet" href="css/animations.css">
Здесь подразумевается, что файл animations.css лежит у вас в папке css. Если же вы расположите его в папке с иным названием, внесите соответствующие изменения в данном коде.
И, конечно же, чтобы скрипты работали, должна быть подключена библиотека jquery. Например, это может быть сделано так
<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
Не стоит вставлять данный код в хедер. Главное, чтобы подключение библиотеки происходило до момента срабатывания скриптов. Это значит, что данную строку, подключающую библиотеку jquery, можно вставить в код вашей страницы непосредственно перед джава скриптами.