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

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

HIT

27.02.2017

1326

Учимся использовать 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;

Тэги:

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

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

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

Реализуем плавный переход по якорным ссылкам в рамках текущей страницы. Данный скрипт особенно хорош тем, что не добавляет в строке браузера приставки /#link. Script Скорость перехода может регулироваться. В предложенном Читать далее »

Создаем анимацию Scroll Down

Создаем анимацию Scroll Down

Для лэндингов часто используют анимацию в виде стрелки или колесика мышки, чтобы показать что можно (нужно) листать ниже. Создадим подобную анимацию с помощью css и jquery. Анимация колесика мышки Создадим Читать далее »

/
Модальное окно на jquery

Модальное окно на jquery

Создаем модальное (всплывающее) окно основанное на технологии jquery. Про подобное решение на чистом CSS читайте здесь. Принцип модального окна Вставляем в HEADER (выше всего контента), #backfon — это фон модального Читать далее »

/

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

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

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