Анимационные эффекты при прокрутке страницы

Установка:

Подключаем библиотеку jQuery и плагин ScrollMe:

Скачать: jquery.scrollme.js
Скачать: jquery.scrollme.min.js

Или измененный плагин, в котором анимируемые элементы расставляются сразу по заданным настройкам, а не в видимой области экрана. Это может пригодиться для добавления плавности, например:

.animateme {
	transition: transform 0.5s;
}

.animateme {

transition: transform 0.5s;

}

Скачать: jquery.scrollme-a.js
Скачать: jquery.scrollme-a.min.js

HTML код выглядет следующим образом:

<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"
    >
        Информационный блок
    </div>
</div>

<div

class="animateme"

data-when="enter"

data-from="0.5"

data-to="0"

data-opacity="0"

data-translatex="-200"

data-rotatez="90"

Информационный блок

</div>

Класс scrollme определяет контейнер для анимированных элементов. Прогресс анимации основан на прокрутке этого элемента.

Класс animateme определяет анимированный элемент.

Если это необходимо, оба эти класса могут быть применены к одному и тому же элементу.

Настройки:

Параметры добавляются как атрибуты элементов scrollme

data-when

Определяет границы прокрутки, когда начинаются и заканчиваются анимация.

enter - начиная с момента, когда верхняя часть контейнера входит в окно просмотра и до момента, когда он выходит.

exit - начиная с момента, когда нижняя часть контейнера входит в окно просмотра и до момента, когда оно выйдет.

span - начиная с момента, когда верхняя часть контейнера входит в окно просмотра и до момента, когда выйдет его нижняя часть.
data-from и data-to

Задает позицию внутри границ прокрутки, с которых начинается и заканчивается анимация.

Анимированным свойствам присваивается значение по умолчанию до позиции data-from, а затем переход к значению, определенному в параметрах, по мере продвижения прокрутки к позиции data-to.

Значения: 0 - 1
data-easing

Устанавливает функцию плавности, применяемую к анимации.

easeout - начинается быстро, к концу замедляется (используется по умолчанию)

easein - медленно начинается, к концу ускоряется

easeinout - начинается и заканчивается медленно

linear - одинаковая скорость от начала и до конца.
data-opacity

Устанавливает прозрачность анимированного элемента, когда прокрутка приближается к позиции data-to.

Значения: 0 - 1
data-scale, data-scalex, data-scaley и data-scalez

Определяет масштаб анимированного элемента (необязательно вдоль оси X, Y и Z), когда прокрутка приближается к позиции data-to.

Значения: коэффициент масштабирования
data-rotatex, data-rotatey и data-rotatez

Определяет угол поворота анимированного элемента вдоль оси X, Y и Z, когда прокрутка приближается к позиции data-to.

Значения: угол поворота в градусах
data-translatex, data-translatey и data-translatez

Определяет расстояние для перевода анимированного элемента вдоль оси X, Y и Z, когда прокрутка приближается к позиции data-to.

Значения: расстояние в пикселях

Примеры:

<div
	class="animateme"
	data-when="enter"
	data-from="1"
	data-to="0"
	data-rotatey="90"
>
</div>

<div

class="animateme"

data-when="enter"

data-from="1"

data-to="0"

data-rotatey="90"

</div>

<div
        class="animateme"
        data-when="enter"
        data-from="1"
        data-to="0"
		data-rotatex="90"
>
</div>

<div

class="animateme"

data-when="enter"

data-from="1"

data-to="0"

data-rotatex="90"

</div>

<div
        class="animateme"
        data-when="enter"
        data-from="0.4"
        data-to="0"
        data-opacity="0"
        data-translatex="-1000"
>
</div>

<div

class="animateme"

data-when="enter"

data-from="0.4"

data-to="0"

data-opacity="0"

data-translatex="-1000"

</div>

<div
        class="animateme"
        data-when="enter"
        data-from="0.4"
        data-to="0"
        data-opacity="0"
        data-translatex="1000"
>
</div>

<div

class="animateme"

data-when="enter"

data-from="0.4"

data-to="0"

data-opacity="0"

data-translatex="1000"

</div>

<div
        class="animateme"
        data-when="enter"
        data-from="0.4"
        data-to="0"
        data-opacity="0"
		data-rotatez="180"
        data-translatey="600"
>
</div>

<div

class="animateme"

data-when="enter"

data-from="0.4"

data-to="0"

data-opacity="0"

data-rotatez="180"

data-translatey="600"

</div>

<div
        class="animateme"
        data-when="enter"
        data-from="0.4"
        data-to="0"
        data-opacity="0"
		data-rotatez="-180"
        data-translatey="600"
>
</div>

<div

class="animateme"

data-when="enter"

data-from="0.4"

data-to="0"

data-opacity="0"

data-rotatez="-180"

data-translatey="600"

</div>

<div
        class="animateme"
        data-when="enter"
        data-from="1"
        data-to="0"
        data-opacity="0"
		data-scale="1.5"
>
</div>

<div

class="animateme"

data-when="enter"

data-from="1"

data-to="0"

data-opacity="0"

data-scale="1.5"

</div>

<div
        class="animateme"
        data-when="enter"
        data-from="0"
        data-to="1"
        data-opacity="0"
		data-scale="1.5"
>
</div>

<div

class="animateme"

data-when="enter"

data-from="0"

data-to="1"

data-opacity="0"

data-scale="1.5"

</div>

Более подробную информацию о данном плагине и примеры можно найти на сайте разработчика: http://scrollme.nckprsn.com

WOW.js - Альтернативный вариант для добавления анимационных эффектов при прокрутке страницы

Назон: 16.04.2019 в 07:08

Здравствуйте. Установила. можно ли как то регулировать скорость анимации?

Ответить
- Alexander: 16.04.2019 в 08:39
  
  Поэкспериментируйте с настройками, например с data-from и data-to.
  Вся анимация привязана к прокрутке и у нее нет как таковой скорости - прокрутка стоит - анимация стоит
  
  Ответить
Назон: 10.04.2019 в 09:40

Здравсвуйте
Можно как то использовать это в Вордпрессе

Ответить
- Alexander: 11.04.2019 в 07:52
  
  Можно, почему нет. CMS тут никак не влияет.
  Подключаете скрипт в теме и далее на нужные блоки вешаются эффекты.
  
  Ответить

Установка:

Настройки:

data-when

data-from и data-to

data-easing

data-opacity

data-scale, data-scalex, data-scaley и data-scalez

data-rotatex, data-rotatey и data-rotatez

data-translatex, data-translatey и data-translatez

Примеры:

WOW.js - Альтернативный вариант для добавления анимационных эффектов при прокрутке страницы

Смотрите также:

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

Комментарии: