Анимация элементов с помощью Transform при появлении в области видимости и скролле страницы. Простой эффект анимации с дефолтными параметрами.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
anima.js
anima.min.js

README.md

Demo

https://gloagent.ru/category/blog/web/anima.html — так странно и неправильно, что стильно и прекрасно.

Anima

Transform элементов при их появлении в области видимости.

Пример

var elem = new Anima("#id", px); // px — высота, которую необходимо проскролить для начала анимации
jQuery(window).scroll(function() {
    elem.signal();
});

setTransform(css)

Для добавления нескольких свойств при анимации, используйте setTransform.

    elem.setTransform('translate(0px, -50px) scale(1.1)'); // поднять и увеличить элемент

CSS

Время и типы анимации задаются правилами CSS (или с помощью .setCss(time, type) ). Пример css правил:

#id{
    transition-timing-function: cubic-bezier(.21,.08,.24,.91);
    transition-duration: 0.7s;
    -webkit-transition-duration: 0.7s;
    -webkit-transition-timing-function: cubic-bezier(.21,.08,.24,.91);
}

Для более плавной анимации с прозрачностью можно присвоить "opacity" в css

#id{
   opacity: 0;
}

Дополнительные параметры

elem.setType('type'); // type — функция для свойства transform ( по умолчанию "translate" )
elem.noOpacity(); // отключение плавного добавления непрозрачности
elem.setCss(); // установка дефолтных значений css (cubic-bezier(.21,.08,.24,.91) продолжительностью 0.7 сек)
elem.setCss('0.3','ease-in'); // установка собственных css правил для анимации
elem.setVal('px'); // px — параметр для выбранной функции (по умолчанию "0, -50px")
elem.setX(x); //смещение по иксу для функции anima
elem.setY(y); //смещение по игрику для функции anima

Реальный пример

var a = new Anima("#one", 100); // анимация начнется если будут видны 100px от #one
var b = new Anima("#two", 150);
var c = new Anima("#three", 0);
var d = new Anima("#four", 0); 
var z = new Anima("#six", 400); // рекомендуется настроить transition
	
a.setVal('0, -100px'); // transform: translate(0, -100px)
b.setType('scale');
b.setVal('1.2'); // scale: (1.2)
c.setTransform('translate(0px, -50px) scale(1.1)');
z.setXY(500, -100); //параметры смещения

d.setCss();
d.noOpacity();
d.setBack(10); //скорость смещения пикселей фона (по умолчантю 15). Обратите внимание на швы фона.

b.go(); // запуск анимации сразу после загрузки страницы	
jQuery(window).scroll(function() {
    a.signal(); // запуск, согласно ранее установленным правилам
    c.go(); // как только страница начнет скроллиться
    d.signal_back('x'); //смещать background по оси икс
    z.anima(100); // При скролле 100 пикселей сместить элемент вправо на 500пх и вверх на 100пх
});