OriDomi

Много веб-сайтов используют фрейворки такие как Bootstrap, jQuery — все они очень похожи друг на друга. Благодаря этим фрейворкам многие способны создать свой собственный сайт, не имея много знаний. Тем не менее, каждый сайт должен быть разным, хотя бы для того чтобы быть узнаваемым. Разный — это не означает что вам придется создавать невероятные макеты или удивительную анимацию, просто, можно добавить небольшой эффект.

Оглавление:
  1. Эффект развернуть бумагу
  2. Что делает OriDomi?
  3. Приступая к работе с OriDomi
  4. Варианты эффекта
  5. Эффекты OriDomi
  6. Заключение

Эффект развернуть бумагу

В этой статье Я покажу вам как можно создать эффект развернуть и свернуть бумагу, используя библиотеку под названием OriDomi. Этот эффект как раз может подойти для вашего сайта.

Эффект OriDomi развернуть и свернуть элементы DOM
Эффект OriDomi развернуть и свернуть бумагу
к меню ↑

Что делает OriDomi?

OriDomi — это библиотека JavaScript с помощью которой можно свернуть и развернуть элементы DOM как бумагу. OriDomi не зависит от каких-либо других скриптов типа jQuery, поэтому для использования OriDomi не нужно подключать какие то другие библиотеки. Но, библиотека может также использоваться как плагин jQuery. Этот эффект уже добавлен к популярной библиотеке jQuery.

Посмотрите демонстрацию о том, что может делать OriDomi, вот простой пример:

OriDomi

var oriDomi = new OriDomi('.demo1', {
  vPanels: 5,
  ripple: true
});
oriDomi.reveal(40);

Заинтересовались? Это только один из эффектов, который Вы можете создать на вашей странице. Давайте узнаем больше.

к меню ↑

Приступая к работе с OriDomi

Для того что бы работал эффект, нужно скачать и подключить к веб-странице библиотеку OriDomi. Вы можете получить OriDomi через Bower, известных зависимостей manager for web, введя команду:

bower install oridomi

Если Вы скачали библиотеку OriDomi, подключите её к странице используя обычный тег <script>, как показано ниже:

<script src="путь/oridomi.min.js"></script>

После этого можно использовать любой элемент. Элемент должен передаваться методом OriDomi(), он работает как конструктор (с помощью нового ключевого слова).

Самый маленький пример, который использует эту библиотеку:

new OriDomi(document.getElementById('element'));

Кроме того, можно передать метод, например как в демонстрации. В этом случае эффект применяется к первому элементу:

new OriDomi('.my-class');

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

В следующем примере показан элемент без фона:

Демо

new OriDomi('.demo');

Обратите внимание, как выглядит эффект без фона, не очень хорошо, да..?

Теперь, когда мы знаем на что способен OriDomi, давайте посмотрим как мы можем изменить параметры по умолчанию.

к меню ↑

Варианты эффекта

При создании нового сценария OriDomi, можно передать литерал объекта, чтобы указать параметры, которые вы хотите применить в качестве второго аргумента. OriDomi предлагает несколько опций для настройки эффекта.

В библиотеке по умолчанию элемент можно разложить слева или справа и сложить только в четыре сгиба. Если расположить сверху или снизу, по умолчанию OriDomi сложит элемент всего в два сгиба. Мы можем изменить эти значения по умолчанию, передавая различные значения для vPanels и hPanels.

Еще можно настроить speed (скорость) выполнения анимации. Значение по умолчанию: 700 миллисекунд.

на момент написания статьи документация OriDomi утверждает, speed по умолчанию составляет 1200 мс. Но, если внимательно посмотреть на код, на самом деле скорость 700 мс.

В случае, если нужно отключить возможность пользователям работать с элементом, например, если Вы хотите применять эффект только для программы, Вы можете указать для touchEnabled значение true. В отношении взаимодействия, OriDomi предлагает несколько крючков для выполнения функции обратного вызова после заданного действия. Например, вы можете запустить определенную функцию после взаимодействия начать или завершить. Параметры, которые Вы можете использовать для запуска это обратные вызовы touchStartCallback, touchMoveCallback и touchEndCallback.

Следующий пример показывает результат изменений значений по умолчанию vPanels, speed, когда пользователь свернул элемент путем обратного вызова touchEndCallback.

Свернуть после нажатия на кнопку Скрыть:

Демо

var oriDomi = new OriDomi('.demo', {
  vPanels: 10,
  speed: 2000,
  touchEndCallback: function() {
    console.log('touch ended');
  }
});

document.getElementById('button').addEventListener('click', function() {
  oriDomi.collapse(40);
});

В случае, если вы хотите roll up (скрыть/показать) элемент. Для скрытия используется метод foldUp(). Чтобы показать элемент, нужно вызвать метод unfold().

Демонстрация ниже, использует оба этих метода:

Демо

var oriDomi = new OriDomi('.demo');
var unfolded = true;
function effect() {
  unfolded ? oriDomi.foldUp() : oriDomi.unfold();
  unfolded = !unfolded;
}
effect();
document.getElementById('button').addEventListener('click', effect);

Теперь посмотрим, какие другие эффекты может предложить OriDomi.

к меню ↑

Эффекты OriDomi

OriDomi предоставляет множество эффектов, посредством ряда методов. Большинство этих методов принимают угол складывания в качестве первого аргумента. Мы уже видели метод accordion(). Есть еще метод twist(), используя этот метод можно крутить элементы DOM.

Эффект OriDomi с помощью метода twist():

Демо

var oriDomi = new OriDomi('.demo');
oriDomi.twist(90);

Методов OriDomi на много больше, следите за новостями на нашем сайте!

к меню ↑

Заключение

В этой записи Я познакомил Вас с библиотекой OriDomi, которая позволяет легко сложить элементы веб-страницы. Я не рассматривал все доступные эффекты OriDomi. Библиотека OriDomi имеет очень хорошую документацию.

А Вы когда-нибудь использовали библиотеку OriDomi?