JavaScript: Ramjet преобразует HTML-элементы

JavaScript: Ramjet преобразует HTML-элементы
Преобразования и анимация используются на все большем количестве веб-сайтов благодаря CSS3 и HTML5. Библиотека JavaScript Ramjet использует параметры CSS3 и позволяет преобразовать любой элемент HTML в другой.

javascript-ramjet-teaser_RU

Простой эффект с большим влиянием

По сути, эффект трансформации, используемый прямоточным воздушно-реактивным двигателем, прост. Возьмите любые два элемента HTML. Изображения, тексты и SVG-графику можно комбинировать, при этом положение и размер элементов также не имеют значения. Простой вызов JavaScript — это то, что превращает первый элемент во второй с помощью анимации.

ramjet_beispielПример анимации трансформации, известной из iOS

Здесь размер и положение первого элемента сопоставляются со вторым. При этом первый элемент исчезает, а второй появляется. С помощью быстрой анимации вы создаете впечатляющий эффект трансформации. Чем дольше длится анимация, тем очевиднее способ трансформации, что немного разбавляет «вау-эффект».

Ramjet: адресация и преобразование элементов через ID

Ramjet очень прост в использовании. Как только библиотека JavaScript будет реализована обычным способом, к обоим HTML-элементам, которые вы хотите преобразовать, можно обращаться через их идентификаторы.

ramjet.transform(elementA, elementB);

В примере элемент с идентификатором «elementA» трансформируется в элемент с идентификатором «elementB». В этом простом варианте оба выходных элемента остаются видимыми как таковые.

Если вы хотите, чтобы второй элемент появлялся во время преобразования, вызывая исчезновение первого элемента, вам нужно вложить немного больше JavaScript в эффект.

elementA.style.opacity = 0;

ramjet.transform(elementA, elementB, {
  done: function () {
    elementB.style.opacity = 1;
  }
});

В этом примере второй элемент («elementB») необходимо скрыть. Для этого вы можете установить его видимость на ноль (используя атрибут CSS «opacity»). После этого первый элемент («elementA») скрывается после начала преобразования. Далее мы запускаем трансформацию через «ramjet.transform()», передавая два идентификатора («elementA» и «elementB»). Во время анимации выходные элементы больше не видны.

ramjet_animationХод анимации от элемента А к элементу Б

Параметр «done» вызывает выполнение функции сразу после завершения преобразования. Это гарантирует, что второй элемент станет видимым в конце анимации.

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

Помимо параметра «готово», есть и другие способы определения перехода. Например, «длительность» позволяет определить продолжительность анимации. Вдобавок ко всему, есть также «замедление», дающее вам возможность выбрать метод смягчения для ускорения или замедления анимации.

ramjet.transform(elementA, elementB, {
  duration: 5000,
  easing: ramjet.easeIn
});

В то время как «ramjet.linear» является стандартным методом плавности, существуют также «ramjet.easeIn», «ramjet.easeOut» и «ramjet.easeInOut», каждый из которых дает вам различные эффекты анимации.

Вместо того, чтобы делать элементы невидимыми с помощью «style.opacity», существуют также альтернативные методы с «ramjet.hide()» и «ramjet.show()». Они также устанавливают для атрибута «opacity» значение 0 или 1 соответственно.

Ramjet: поддержка браузера

Ramjet работает во всех современных браузерах, таких как Chrome и Firefox. Библиотека также работает в Internet Explorer, начиная с версии 9. Ramjet доступен по лицензии MIT и, таким образом, может использоваться как в коммерческих, так и в частных проектах.

(дпе)