Анимация

Инициализация

<script type="text/javascript" src="files/js/sticky.min.js"></script>

<script>
var sticky = new Sticky('.sticky'); 
 ar sticky = new Sticky('.sticky')

</script>

 

sticky"
data-margin-top="50"
sticky"
data-sticky-for="400"
data-margin-top="100"
data-sticky-class="is-sticky"
scrollme animateme"
data-when="enter"
data-from="0.5"
data-to="0"
data-crop="false"
data-scale="0"
scrollme animateme"
data-when="enter"
data-from="0.5"
data-to="0"
data-opacity="0"
data-scale="1.5"
scrollme animateme"
data-when="enter"
data-from="0.5"
data-to="0"
data-opacity="0"
data-crop="false"
data-scale="0"
data-easing="easeout"
animateme scrollme"
data-when="span"
data-from="0.5"
data-to="0"
data-opacity="0"
animateme scrollme"
data-when="enter"
data-from="0.5"
data-to="0"
data-opacity="0"
animateme scrollme"
data-when="exit"
data-from="0.5"
data-to="0"
data-opacity="0"
animateme scrollme"
data-when="view"
data-from="0.3"
data-to="0"
data-opacity="0"
animateme scrollme"
data-when="exit"
data-from="0.6"
data-to="0"
data-opacity="0"
animateme scrollme"
data-when="enter"
data-from="1"
data-to="0"
data-opacity="0"
animateme scrollme"
data-when="enter"
data-from="0.6"
data-to="0"
data-opacity="0"
data-rotatey="90"
data-rotatez="-90"
data-rotatex="-90"
animateme scrollme"
data-when="enter"
data-from="1"
data-to="0"
data-rotatey="90"
animateme scrollme"
data-when="enter"
data-from="0.9"
data-to="0"
data-rotatex="90"
animateme scrollme"
data-when="enter"
data-from="0.3"
data-to="0"
data-opacity="0"
data-translatey="500"
animateme scrollme"
data-when="enter"
data-from="0.6"
data-to="0"
data-opacity="0"
data-rotatez="-180"
data-translatey="600"
animateme scrollme"
data-when="enter"
data-from="0.4"
data-to="0"
data-opacity="0"
data-translatex="1000"
animateme scrollme"
data-when="view"
data-from="1"
data-to="0"
data-rotatex="90"
animateme scrollme"
data-when="span"
data-from="0.2"
data-to="0"
data-opacity="0"
data-rotatez="-180"
data-translatey="600"
data-translatex="600"
animateme scrollme"
data-when="view"
data-from="0.65"
data-to="0.15"
data-translatex="400"
data-translatey="400"

Инициализация

<script type="text/javascript" src="files/js/jquery.scrollme.min.js"></script>

data-when

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

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

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

data-easing

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

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

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

data-rotatex, data-rotatey и data-rotatez

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

Плавный скролл

Инициализация

<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js" integrity="sha256-huW7yWl7tNfP7lGk46XE+Sp0nCotjzYodhVKlwaNeco=" crossorigin="anonymous"></script> 

 

<script>
SmoothScroll({
// Время скролла 400 = 0.4 секунды
animationTime : 700,
// Размер шага в пикселях
stepSize : 90, // window.innerHeight- пролистывать один экран.
// Ускорение
accelerationDelta : 50,
// Максимальное ускорение
accelerationMax : 2,
// Поддержка клавиатуры
keyboardSupport : true,
// Шаг скролла стрелками на клавиатуре в пикселях
arrowScroll : 50,
// плавная остановка
pulseAlgorithm : true,
pulseScale : 4,
pulseNormalize : 1,
// Поддержка тачпада
touchpadSupport : true,
})
</script>