Многие сайты, созданные с использованием известных фреймворков, таких как Bootstrap, очень похожи друг на друга. Я не против их использования. Наоборот, я счастлив, что благодаря этим фреймворкам многие люди могут создавать свои собственные веб-сайты, даже имея очень мало знаний. Тем не менее, каждый веб-сайт должен отличаться, чтобы быть узнаваемым. Различия не означают, что вы должны создавать невероятные макеты или удивительные анимации, это также может быть добавление небольшого эффекта.
В этой статье я покажу вам, как создать эффект свертывания, используя библиотеку OriDomi. Этот эффект может быть просто прикосновением класса, который нужен вашему сайту.
Что такое ОриДоми?
OriDomi (интересное слово, объединяющее «оригами» и «DOM») — это библиотека для свертывания элементов DOM, таких как бумага
. Я нахожу эффекты, которые он выполняет, простыми, но очень эффективными, и я думаю, что это действительно хорошо подходит для сайтов ресторанов и пабов. OriDomi не имеет никакой зависимости, поэтому вам не нужно заполнять свою веб-страницу множеством других библиотек, чтобы использовать ее. Тем не менее, библиотека также может быть использована в качестве плагина jQuery. Он довольно популярен в реестре плагинов jQuery , так что вы, возможно, уже слышали об этом.
Чтобы дать вам представление о том, что он делает, вот простой пример :
Заинтригованный? Вы должны быть! И это только один из эффектов, которые вы можете создать на своих страницах. Давайте узнаем больше.
Начало работы с OriDomi
Начать работу с OriDomi очень просто. Первый шаг, который вам нужно выполнить, это загрузить библиотеку и включить ее на свою страницу. Вы можете получить OriDomi, посетив его репозиторий GitHub или через Bower , известного менеджера зависимостей для Интернета, набрав команду:
[ракушка]
беседка установить оридоми
[/ракушка]
Как только вы загрузили библиотеку, вы должны включить ее в свою страницу, используя обычный <script>
<script src="path/to/oridomi/oridomi.min.js"></script>
На данный момент вы готовы использовать его на любом элементе, который вы хотите. Элемент должен быть передан методу OriDomi()new Минимальный пример, использующий эту библиотеку, показан ниже:
new OriDomi(document.getElementById('element'));
Кроме того, вы можете передать селектор методу, как мы видели в первой демонстрации этой статьи. В этом случае эффект будет применен к первому сопоставленному элементу:
new OriDomi('.my-class');
Стоит отметить, что хотя эффект работает независимо от типа элемента, и если у него есть фон или нет, библиотека работает лучше всего, когда используется с изображениями или элементами с фоновым изображением.
В следующем примере показано влияние на элемент div
Обратите внимание, как к элементу применяется эффект, но он выглядит не так хорошо.
Теперь, когда мы познакомились с основами OriDomi, давайте обсудим, как мы можем изменить настройки по умолчанию.
Параметры
При создании новой композиции OriDomi вы можете передать литерал объекта, чтобы указать опции, которые вы хотите применить в качестве второго аргумента. OriDomi предлагает несколько вариантов настройки эффекта.
При сворачивании элемента слева или справа библиотека разделит элемент на пять панелей. Аналогичным образом, при сворачивании элемента сверху или снизу, по умолчанию OriDomi делит элемент на три панели. Мы можем изменить эти значения по умолчанию, передав разные значения для параметров vPanelshPanels
Другой параметр, который мы можем настроить, — это speed Значение по умолчанию составляет 700 миллисекунд.
Примечание: на момент написания документации утверждается, что скорость по умолчанию составляет 1200 мс. Однако, взглянув на код, вы увидите, что на самом деле это 700 мс.
Если вы хотите отключить возможность взаимодействия ваших пользователей с элементом, например, если вы хотите применять эффекты только программно, вы можете установить для свойства touchEnabledtrue Что касается взаимодействия, OriDomi предлагает несколько хуков для выполнения обратных вызовов после выполнения заданного действия. Например, вы можете запустить определенную функцию после начала или завершения взаимодействия. Параметры, которые можно использовать для запуска обратных вызовов: touchStartCallbacktouchMoveCallbacktouchEndCallback
В следующем примере показан эффект изменения значения по умолчанию vPanelsspeedtouchEndCallback
Давайте теперь посмотрим, что могут предложить другие эффекты OriDomi.
Последствия
Как я уже сказал, OriDomi предоставляет множество эффектов с помощью ряда методов. Большинство из этих методов принимают угол сгиба в качестве первого аргумента. Мы уже видели, что делает метод accordion() Другой метод — это twist() Используя его, вы можете крутить элемент DOM на себя. Следующая демонстрация отображает эффект, достигнутый с помощью twist()
Если вы хотите полностью свернуть (читать спрятать) элемент, foldUp() И наоборот, если вы хотите показать это снова, вы можете вызвать unfold() Демонстрация, которая использует оба этих метода, показана ниже:
Последняя пара методов, которые я хочу упомянуть, это curl()fracture()
Вывод
В этой статье я познакомил вас с OriDomi, библиотекой, которая позволяет создавать приятные эффекты свертывания элементов веб-страницы. Я не охватил все доступные варианты и эффекты, но этот урок должен был заинтересовать вас достаточно, чтобы узнать больше об этом. Кроме того, в библиотеке есть очень хорошая документация, которую вы можете прочитать, чтобы узнать больше о том, как вы можете ставить в очередь эффекты и другие расширенные возможности.
Что вы думаете о OriDomi? Вы когда-нибудь слышали или использовали это?