Как сделать необычную тряску объектов на странице с помощью JQuery (20 примеров). Явления дрожания и их магическое действие Чтение и передача мыслей

Не сложно и эффектно. Заставь дрожать свою аватарку.

1. Откроем нужное нам изображение и кадрируем его:

2. Теперь выделяем задний план девушки при помощи инструмента Волшебная палочка . Или же можно выделить для тех, кто умеет маской слоя. Затем Выделение > Инверсия (Select > Inverse) .

3. Теперь Ctrl+J . Должно получиться два слоя с девушкой.

4. Идем в Фильтр > Размытие > Размытие в движении (Filter > Blur > Motion Blur) .

5. Теперь осталось только настроить анимацию. Первое окно не видно слой, второе видно, третье не видно. Промежуточных я делала по 6.

Все тоже самое действенно и для текста. Только чтобы его размыть, необходимо сначала Растеризовать тип (Rasterize type) . Получится размывающийся текст:

Чтобы визуально усилить эффект, можно пойти немножко более сложным путем:

1. Пишем текст. Растеризовываем слой:

2. Делаем несколько копий, допустим две (можно больше) Ctrl+J .

3. Теперь по очереди размываем каждый слой (Фильтр > Размытие > Размытие в движении (Filter > Blur > Motion Blur) ), но с разной степенью.То есть выглядеть должно так:

Слой 1 = нет размытия

Слой 2 = размытие 5

Слой 3 = размытие 10

Здравствуйте, дорогие читатели . Сегодня я хочу рассказать Вам как с помощью JQuery заставить трястись практически все объекты на сайте, которые мы только захотим.

Вы, наверное, подумаете, что за чушь? :-) Это совсем не так. Выглядит ооочень эффектно. Тем более если это была бы и правда чушь, я не публиковал это на блоге.

Здесь мы рассмотри не мало примеров. Этот скрипт позволяет трясти объекты при наведении на них и просто всё время. А так же присутствуют дополнительные эффект, например такие как . Заманчиво звучит, не правда ли? :-)

Очень хочется сказать огромное спасибо jackrugile.com за это классный плагин.

В общем давайте смотреть как реализовать такую штуку у себя на сайте.

По традиции нам нужно прикрепить библиотеку и сам же скрипт тряски. Для этого между тегами и добавляем следующее:

Данные файлы (скрипты) есть в исходниках, которые Вы сможете скачать выше.

Напоминаю, если у Вас уже прикреплена библиотека, повторный раз её прикреплять не нужно.

jquery-1.7.2.min.js — библиотека (фреймворк). Повторюсь, если у Вас этот скрипт прикреплён, повторный раз не нужно.

jquery.jrumble.1.3.min.js — а вот этот скрипт, который, собственно, и творит чудеса с объектами на сайте. :-) его прикрепляем обязательно.

Объекты

В данном случае мы будем трясти обычные , которые создадим с помощью . Вот как этот блок будет выглядеть:

И вот сам код CSS:

Demo-box { float: left; margin: 10px 20px 20px 0; width: 130px; } .demo-box.last { margin: 10px 0 20px; } .demo-box div { background: #40b9ff; color: #fff; font-size: 30px; font-weight: bold; height: 130px; line-height: 130px; margin: 10px 0 0 0; text-align: center; text-shadow: -2px 2px 0px rgba(0,0,0,.2); } .demo-box div:hover { background: #4ec7ff; }

Это код блока, который представлен в примере.

Теперь мы будем вызывать сам скрипт тряски.

Принцип работы скрипта очень прост. Он осуществляет беспорядочные движения по осям x и y, с определённой скоростью. Данные параметры мы можем настраивать сами.

Например, в демо у нас есть самый первый блок под номером один. Он при наведении двигается по заданным осям: x: 2 и y: 2, так же задан параметр rotation с значением 1. Этот параметр определяет сильнее будет тряска или нет, другими словами, он не даёт далеко выходить блоку за его границы. Таким образом визуально получается малый или сильный эффект.

Теперь давайте посмотри как это всё будет выглядеть в коде:

По умолчанию возьмём первый блок с классом demo1

1

demo-box — это класс блока, который мы создали в начале в стилях CSS.

demo1 — класс который мы будем использовать в скрипте вызова тряски к данному блоку.

Скрипт

Теперь нужно между тегами и добавить вот это:

$(function(){ $("#demo1").jrumble({ x: 2, y: 2, rotation: 1 }); $("#demo1").hover(function(){ $(this).trigger("startRumble"); }, function(){ $(this).trigger("stopRumble"); }); });

Как видно в скрипте блок трусится по заданным параметрам x: 2, y: 2, с rotation: 1. Хочу сказать (повторить), что данные параметры можно изменить как Вам угодно. И в демо эти параметры представлены.

Здесь мы будем увеличивать и уменьшать скорость тряски. Для этого возьмём пример в демо под номером 5. В данном случае немного изменится сам скрипт вызова. Он будет выглядеть так:

$(function(){ $("#demo5").jrumble({ speed: 0 }); $("#demo5").hover(function(){ $(this).trigger("startRumble"); }, function(){ $(this).trigger("stopRumble"); }); });

По умолчанию скорость равна нулю, чем большее будет значение этот параметра, тем меньше будет трясти:-) В демо представлено несколько примеров с разными значениями.

Тут мы будем совмещать тряску и прозрачность одновременно. Хочется сказать, что выглядит очень красиво и не обычно:-)

В демо берём блок под номером 12, которого трясёт как бешеного, и опять же только не много изменится скрипт вызова:

$(function(){ $("#demo12").jrumble({ x: 6, y: 6, rotation: 6, speed: 5, opacity: true, opacityMin: .05 }); $("#demo12").hover(function(){ $(this).trigger("startRumble"); }, function(){ $(this).trigger("stopRumble"); }); });

В данном примере задано значение 6 по обеим осям. Параметр rotation равен 6, скорость 5. Прозрачность в скрипте вызывается — opacity со значением true — это обязательная строчка. А так же сила прозрачности — opacityMin: стоит 05. Чем больше будет это значение тем прозрачнее будет блок при наведении.

Здесь будут представлены примеры скриптов блоков в демо под своим номером и классом:

Блок 14 (Клик)

$(function(){ $("#demo14").jrumble(); $("#demo14").toggle(function(){ $(this).trigger("startRumble"); }, function(){ $(this).trigger("stopRumble"); }); });

Блок 15 (Клик (удерживать))

$(function(){ $("#demo15").jrumble(); $("#demo15").bind({ "mousedown": function(){ $(this).trigger("startRumble"); }, "mouseup": function(){ $(this).trigger("stopRumble"); } }); });

Блок 16 (Без остановки)

$(function(){ $("#demo16").jrumble(); $("#demo16").trigger("startRumble"); });

Блок 17 и 18 (Удалённо)

Это интересный эффект, когда при наведении на правый блок двигается левый и наоборот.

$(function(){ $("#demo17", "#demo18").jrumble(); $("#demo17").hover(function(){ $("#demo18").trigger("startRumble"); }, function(){ $("#demo18").trigger("stopRumble"); }); $("#demo18").hover(function(){ $("#demo17").trigger("startRumble"); }, function(){ $("#demo17").trigger("stopRumble"); }); });

Блок 19 (Несколько сек. (Клик))

$(function(){ $("#demo19").jrumble(); var demoTimeout; $("#demo19").click(function(){ $this = $(this); clearTimeout(demoTimeout); $this.trigger("startRumble"); demoTimeout = setTimeout(function(){$this.trigger("stopRumble");}, 1500) }); });

Блок 20 (Пульсирующий)

$(function(){ $("#demo12").jrumble(); var demoStart = function(){ $("#demo20").trigger("startRumble"); setTimeout(demoStop, 300); }; var demoStop = function(){ $("#demo20").trigger("stopRumble"); setTimeout(demoStart, 300); }; demoStart(); });

Вот и научились мы трясти объекты на веб странице. На это всё. Дорогие друзья, если у Вас возникнут какие нибудь трудности, обязательно спрашивайте в комментариях . До скорых встреч.

В этой статье я расскажу о том, как создать небольшой эффект дрожания краев слоев (текста, шейпов и любых других) в After Effects, чтобы создать стилизованное видео (элементы). Я видел достаточно много роликов, где применяли данный эффект: поверх всего видео или использовали в качестве стилизации каких-либо элементов. Cделать это можно различными способами, я расскажу про один из них. Не стоит путать это дрожание с обычным wiggle по позиции, это совсем другое.

Сделать это просто, для этого в вашей композиции, должны уже быть текстовые слои или какие-нибудь элементы, которые необходимо расшатать, далее создаем adjustment layer и кидаем на него плагин Turbulance Displace:

После этого, крутим настройки: чем меньше size у Turbulance Displace, тем более мелкие детали вы получите при дрожании. Параметр Amout влияет на силу дрожания, я оставил 15. Далее анимируем это дрожание, для этого я вписал в параметр Evolution выражение time*2500. Сделал такое адско-быстрое выражение, потому что далее мы будем использовать Posterize Time, для создания пропуска кадров.

Пропуск кадров на дрожащих слоях усиливает этот эффект. Сделать низкий fps у композиции можно разными способами, как выражениями, так и плагинами. Я буду использовать плагин Posterize Time для понижения количества кадров в секунду. Вы можете создать новый adjustment слой, а можете сделать прекомпоз, в любом случае вам стоит накинуть плагин time -> posterize time. Я выставил 15 кадров в секунду, чем меньше это значение тем большее количество кадров будет «уходить».

Для шейпов отдельно можно использовать модификатор wiggle path. Кроме того, вы можете отдельно накидывать на слои Turbulance Displace для создания рандомного дрожания.

Кроме этого лпагина вы можете использовать Roughen Edges, плюс этого варианта в том, что он этот плагин действует на края слоя, а не полностью на весь слой.