Анимация объектов при прокрутке страницы (CSS3 + jQuery)

Сегодня мы покажем вам один из многочисленных способов оригинально украсить сайт, используя CSS3 и jQuery. Подобную плавную анимацию элементов при прокрутке страницы можно встретить в некоторых мобильных приложениях, в лентах новостей и даже на сайтах-визитках. 

Если включить фантазию, можно найти множество полезных вариантов применения такого эффекта – для фотографий, списка товаров и т. д.

Обратите внимание

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

jQuery

Начнем с подключения необходимых библиотек – основного файла и плагина jQuery.appear, с помощью которого мы реализуем появление элемента при его попадании в видимую область браузера. Файл jquery.appear.js находится в папке с уроком.

<script type=»text/javascript» src=»http://code.jquery.com/jquery-latest.min.js»> </script> <script type=»text/javascript» src=»js/jquery.appear.js»> </script>

После этого можно приступать к написанию кода. Для того чтобы при появлении на экране объекта (назовем его feed) срабатывала CSS-анимация, нужно динамически добавлять к нему имя класса (назовем его appeared), когда он попадает в зону видимости:

<script type=’text/javascript’> $(function() { $(document.body).on(‘appear’, ‘.feed’, function(e, $affected) { $(this).addClass(«appeared»); }); $(‘.feed’).appear({force_process: true}); }); </script>

CSS

В файле style.css мы укажем внешний вид и первоначальное состояние объекта, задав ему определенные настройки transform и спрятав его свойством opacity с нулевым значением:

.feed { background: url(../images/1.png) center center; width: 350px; height: 405px; box-shadow: 0 1px 2px rgba(0,0,0,0.5); border-radius: 4px 4px; margin: 0 auto 13px; -webkit-transition: all 350ms ease; -moz-transition: all 350ms ease; -o-transition: all 350ms ease; transition: all 350ms ease; -webkit-transform: translate3d(0px, 60px, 0) rotateX(-40deg) scale(1.3, 1.3); -moz-transform: translate3d(0px, 60px, 0) rotateX(-40deg) scale(1.3, 1.3); transform: translate3d(0px, 60px, 0) rotateX(-40deg) scale(1.3, 1.3); opacity: 0; }

И при попадании объекта в зону видимости (appeared) он будет плавно появляться, принимая следующие значения transform и opacity:

.feed.appeared { -webkit-transform: translate3d(0px, 0px, 0px) rotateX(0) scale(1, 1); -moz-transform: translate3d(0px, 0px, 0px) rotateX(0) scale(1, 1); transform: translate3d(0px, 0px, 0px) rotateX(0) scale(1, 1); opacity: 1; }

Вы можете разнообразить и украсить ваш сайт похожей плавной анимацией при прокрутке страницы с помощью CSS3 и jQuery. Мы надеемся, что этот простой урок пригодится вам в работе. Желаем творческих успехов!