• Автор:

    Flesha
  • Добавлено:

    дек 26, 2014
  • Комментариев:

    0
  • Просмотров:

    808

5 бесплатных JQuery плагинов

5 бесплатных JQuery плагинов

Эластические элементы для сайта

Сегодня мы хотели бы совместно использовать некоторое вдохновение для добавления эластичности к элементам. Идея состоит в том, чтобы интегрировать элемент SVG в компонент и затем анимировать его от одного пути до другого с эластичной анимацией. Используя SVGs как это может сделать вещи как меню, кнопки или другие элементы более интересными и заставить взаимодействие выглядеть более органическим с естественным чувством к нему. Конечно, важно сохранить вещи тонкими и не преувеличить пружинистость. Хорошая вещь состоит в том, что мы можем дать более “реалистическую” обратную связь взаимодействия пользователю. Особенно сенсорная обратная связь может извлечь выгоду из использования этого вида эффекта. На основе этой идеи мы создали некоторые вдохновенные примеры контекстов, где превращающееся улучшение анимации формы могло быть целесообразным.



5 бесплатных JQuery плагинов

Классные и простые модальные окна на CSS и JQuery

В прошлом году мы отправили некоторое вдохновение для модальных эффектов окна, и сегодня мы хотели бы совместно использовать некоторые свежие идеи с Вами. Изменение стилей и тенденций и это призывают к различным эффектам, которые соответствуют к современному UI. Этот новый набор содержит некоторые тонкие анимации и также некоторый более необычный SVG превращающиеся методы для диалоговых окон.
Обратите внимание на то, что это было протестировано в последних версиях браузера только.
Также обратите внимание на то, что IE11, кажется, не поддерживает vieport модули в calc (), который мы используем в части анимации, преобразовывает.



5 бесплатных JQuery плагинов

Перспективные слайдеры для больших изображений

Некоторое время назад Франклин Та написал статью и сделал действительно полезный сценарий для преобразования элемента в 3D, чтобы поместиться в перспективный макет. В его статье он описывает, как сценарий помощника может использоваться, чтобы создать 3D матричное преобразование для встраивания iframe в изображение макета. Мы думали, что должно быть действительно интересно добавить слайд-шоу, чтобы продемонстрировать работу.

Таким образом, мы использовали сценарий Франклина, чтобы создать преобразованные элементы и добавили слайд-шоу внутри. Чтобы сделать все это быстро реагирующим (преобразование основывается на пикселях), мы масштабируем основной макет, чтобы вписаться в его родительский контейнер. Хорошая вещь использования 3D матрицы преобразовывает, то, что мы можем использовать “реальный” размер для изображений в слайд-шоу (т.е. на основе устройств мы выводим на экран). Направьтесь в статью Франклина, чтобы изучить, как его сценарий работает подробно и чтобы понять интересную Математику позади него.

Таким образом, сценарий может быть выполнен, используя консоль Ваших dev инструментов. Углы выбранного элемента могут тогда быть перетащены в позицию, и значение преобразования может быть скопировано (если Вы осмотрите свой элемент, то Вы будете видеть значение), и вставляемый в соответствующий класс экранного элемента.



5 бесплатных JQuery плагинов

Перетаскивания элементов на странице с помощью JQuery

Иногда интересно, как упаковать все те возможные действия в UI. От кнопок до выпадает к меню — есть, конечно, много возможностей. Другая идея состоит в том, чтобы использовать некоторое сопротивление и взаимодействие отбрасывания. Сегодня мы хотим совместно использовать некоторые исследования в подобных взаимодействиях с Вами. Идея состоит в том, чтобы позволить перетаскивать элемент и затем показывать некоторую сбрасываемую область, которая обозначает определенные действия. Это оставляет много свободного места UI и дает интересное динамическое взаимодействиям. Есть много применимых сценариев; думайте о категоризации и организации содержания (т.е. как платы Pinterest) или выполнение любого типа действий (как в почтовых приложениях или в системах управления контентом).

Демонстрационные примеры - просто некоторые экспериментальные идеи того, как подобные взаимодействия могут быть предположены. Мы базировали наш демонстрационный сценарий на Draggabilly Дэвидом Дезэндро и расширили часть поведения, т.е. позволяющий прокручивать и рассматривающий действия отбрасывания. Там есть также другие библиотеки, как, например, jQuery UI, но Draggabilly очень солидный и он поддерживает касание и мультикасание, которое является действительно большим. Мы также используем Шрифт, Удивительный для значков, и базировали теневой полем эффект расширения в демонстрационном примере значка на один замеченный в Palettab, удивительное расширение Chrome, которое даст Вам цветное вдохновение с каждой новой вкладкой.



5 бесплатных JQuery плагинов

Отлично реализованный поиск для сайта

Сегодня мы хотели бы совместно использовать простой превращающийся эффект с Вами. Идея состоит в том, чтобы иметь поисковый ввод в правом верхнем углу страницы и как только по вводу щелкают, целый поисковый элемент расширяется до полноэкранного наложения. У полноэкранного наложения есть больший поисковый ввод и некоторые элементы для показа связанных элементов или результатов поиска. Обратите внимание на то, что мы просто сделали макет, который фактически не ищет динамично.

Для превращающегося поискового эффекта мы используем несколько переходов, которые анимируют размерности поискового ввода, размера шрифта и некоторых других элементов. Обратите внимание на то, что это очень экспериментально и только протестированное в latests версиях современных браузеров.

Фоновое изображение, используемое в демонстрационном примере, от Невсплеска, и значки от Удивительного Шрифта.

Вернуться
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.