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

Karina | 13.11.2014

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

Демо Загрузить архив RAR (82 kB)

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

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

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. Мы надеемся, что этот простой урок пригодится вам в работе. Желаем творческих успехов!