Пробуем и тестируем

Рецепты на все случаи жизни

Scrollreveal - анимация элементов при прокрутке страницы

Scrollreveal - анимация элементов при прокрутке страницы

Есть такой замечательный плагин js - Scrollreveal. Он позволяет реализовать на странице в верстке анимированное появление элементов при прокрутке страницы.

Гибкость и простота заставляют обратить на него пристальное внимание, но при попытке использовать версию плагина с официальной страницы GitHub https://github.com/jlmakes/scrollreveal можно потратить пол дня, но таки не запустить ео так, как хотелось бы. Что не есть хорошо.

Прикрепленная версия библиотеки работает и именно по этому я ее выкладываю. Собственно говоря - для себя. Дабы потом не искать где я видел его и какие ключи использовать. 

Привязка и инициализация плагина:

<script src="/<?php print JURI::base().'/templates/'.$this->template; ?>/js/scrollReveal.js"></script>
<script type="text/j-avascript">window.scrollReveal = new scrollReveal({mobile: true});</script>

Добавляем это в самом низу страницы. Путь прописан для тепмлейта joomla в папку js

Следует обратить внимание на строку инициализации:

<script type="text/j-avascript">window.scrollReveal = new scrollReveal({mobile: true});</script>

Если вы хотите, что бы анимация не работала на мобильных устройствах - удалите:

{mobile: true}

Далее будем пользовать ключи для создания анимации. Переводить не буду. Глупо это да и понятно все.


Enter
The enter keyword controls the vector origin (direction) of your animation.

<!-- Reveal with a downward motion -->
<div data-sr='enter top'> Foo </div>

<!-- The other accepted values... -->
<div data-sr='enter left'> Bar </div>
<div data-sr='enter right'> Bun </div>
<div data-sr='enter bottom'> Baz </div>

Move
The move keyword controls the distance (in pixels) traveled during animation.

<div data-sr='move 24px'> Foo </div>

Over
The over keyword sets the duration (in seconds) of your animation.

<div data-sr='over 0.6s'> Foo </div>
<div data-sr='over 1.3s'> Bar </div>

Flip
The flip keyword is a rotation keyword, controlling rotation along the X axis (pitch).

<div data-sr='flip 45deg'> Foo </div>
<div data-sr='flip -90deg'> Bar </div>

Spin
The spin keyword is a rotation keyword, controlling rotation along the Y axis (yaw).

<div data-sr='spin 180deg'> Foo </div>
<div data-sr='spin -30deg'> Bar </div>


Roll
The roll keyword is a rotation keyword, controlling rotation along the Z axis (roll).

<div data-sr='roll 15deg'> Foo </div>
<div data-sr='roll -45deg'> Bar </div>


Scale
The scale keyword allows you to change your elements size during reveal animations.

<!-- Scales 80% to 100% -->
<div data-sr='scale up 20%'> Foo </div>

<!-- Scales 120% to 100% -->
<div data-sr='scale down 20%'> Bar </div>
Note: Using up and down modifiers will change the scale direction, but are not required. If the modifier is omitted, scale will still work, but the default scale direction (up) will be used for animation.
<!-- Scales 80% to 100% -->
<div data-sr='scale 20%'> Baz </div>


Wait
The wait keyword delays the start of reveal animations.

<div data-sr='wait 0.5s'> Foo </div>
Note: Delay affects animation once by default. You can configure different behavior, such as always delay or only on page load. (See Configuration.)


Reset
The reset keyword controls whether or not reveal animations replay.

<!-- Reveals each time it becomes visible -->
<div data-sr='reset'> Foo </div>

<!-- Reveals only once -->
<div data-sr='no reset'> Bar </div>


View Factor
The vFactor (with supported shorthand vF) keyword controls how much of this element must be within the viewport, before being animated.

<!-- Reveals almost immediately -->
<div data-sr='vFactor 0.1'> Foo </div>

<!-- Reveal late -->
<div data-sr='vFactor 0.8'> Bar </div>


Opacity
The opacity keyword controls the elements starting opacity.

<!-- Element starts half visible -->
<div data-sr='opacity 0.5'> Foo </div>

Easing
Both move and scale keywords can be replaced with Easing Keywords for added control.

You can use…

  1. ease
  2. ease-in
  3. ease-in-out
  4. ease-out


hustle

<!-- Using easing with move -->
<div data-sr='move 50px'> Foo </div>
<div data-sr='ease-in 50px'> Bar </div>

<!-- Using easing with scale -->
<div data-sr='scale 30%'> Bun </div>
<div data-sr='hustle 30%'> Baz </div>
<div data-sr='ease down 20%'> Boo </div>


Chaining Keywords
You can combine any keywords together to create (and easily manage) dynamic reveal animation effects.

<!-- Can you imagine what this looks like? -->
<div data-sr='wait 0.2s, scale up 30%'> Foo </div>
<div data-sr='wait 0.4s, scale up 25%'> Bar </div>
<div data-sr='wait 0.6s, scale up 20%'> Bun </div>
<div data-sr='wait 0.8s, scale up 15%'> Baz </div>

Комментарии (1)

  • Stacie

    Stacie

    20 июня 2018 at 15:00 |
    You can try your hand in a couple of, or them all,
    and you may most perform them regarding entertainment or as a way to attachment having pals.

    Отзыв

Оставить комментарий

Вы комментируете как Гость.

Статус материала

  • 2017-05-06
  • 1461
  • Раздел: Песочница
  • Скачать
  • Размер: 5.25 KB
  • Обновлён: 2017-05-19
  • Скачали: 48
  • jomla
  • jbzoo
  • css3
  • html5
  • Java script
  • jquery
  • bootstrap
Мы находимся в Минске
работаем по всей РБ
  • mts+375 29 779-72-95viber
  • vel+375 44 779-72-95
  • email: Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
  • skype: tirby_kat
Индивидуальный предприниматель
Кулак Сергей Николаевич
УНП: 590816946
зарегистрирован Зельвенским районным исполнительным комитетом
от 01.06.2010
Свяжитесь со мной