/ Сайтостроение / Scripts & jquery / Изменение объекта при скроллинге

Изменение объекта при скроллинге

HIT

27.02.2017

1180

Учимся использовать jquery эффекты при скроллинге. Данные эффекты чаще всего применяются на промо-страницах и лэндингах.

ScrollMe

Скрипт Scrollme состоит из одного файла с набором скриптов, подключаем его

wp_enqueue_script( 'scrollme', get_template_directory_uri() . '/js/jquery.scrollme.min.js' , array( ), '1.0' , true );

Верстка блока для применения эффектов

<div class="scrollme">
<div
class="animateme"
data-when="enter"
data-from="0.5"
data-to="0"
data-opacity="0"
data-translatex="-200"
data-rotatez="90"
>
Yup, that's all.
</div>
</div>

Класс scrollme нужен для определения области действия изменения и animateme это объект изменения с параметрами.

Параметры ScrollMe

data-when — когда эффект начинает действовать:
enter — при вхождении в область, exit — при выходе из области, span — при контакте с самим объектом.

data-from, data-to — определение силы эффекта в начале и конце анимации.

easing (необязательный) — параметры смягчения анимации:

  • easeout — начинается внезапно и приходит к постепенной остановке (по умолчанию)
  • easein — начинает постепенно и приходит к резкой остановке
  • easeinout — запускает и приходит постепенно останавливается
  • linear — нет ослабления

crop (необязательный) — параметр ограничения эффекта границами документа true (по умолчанию), либо за его пределами false.

opacity (необязательный) — определяет прозрачность объекта. Значение: 0 — 1

scale, scalex, scaley и scalez — определяет масштаб объекта. Значение: Коэффициент масштабирования

rotatex, rotatey и rotatez — определяет угол поворота. Значение: Угол поворота в градусах

translatex, translatey и translatez — определяет смещение объекта. Значение: расстояние в пикселях

В мобильных версиях скрипт работает отлично! Только желательно .wrapper’у задавать свойство overflow: hidden;

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Блок с горизонтальной прокруткой

Блок с горизонтальной прокруткой

Делаем секцию (блок) с горизонтальной прокруткой. Внутри предполагаются изображения, но может быть все что угодно. Данный блок можно использовать в лэндинге, либо таким образом вводить галерею изображений. jQuery mousewheel plugin Читать далее »

Плавный скроллинг по якорям

Плавный скроллинг по якорям

Реализуем плавный переход по якорным ссылкам в рамках текущей страницы. Данный скрипт особенно хорош тем, что не добавляет в строке браузера приставки /#link. Script $(document).ready(function() { // Плавный скролинг по Читать далее »

Плавный скроллинг колесом

Плавный скроллинг колесом

Сайт воспринимается более профессионально, если на нем реализована плавная прокрутка колесом. Все это надо поместить в подвал: скрипт, инициализация скрипта. <script src="<?php bloginfo('stylesheet_directory'); ?>/js/plugins-scroll.js"></script> <script> // Skroll-page $(document).ready(function() { //Chrome Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Изменение объекта при скроллинге Изменение объекта при скроллинге
Атрибуты миниатюры
Рекомендации для васАтрибуты миниатюрыOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.