Как да направите необичайно разклащане на обекти на страницата с помощта на jQuery (20 примера)
Здравейте скъпи читатели на блога. Днес искам да ви кажа как да използвате JQuery, за да разклатите почти всички обекти на сайта, които само искаме.
Вероятно си мислите какви глупости? :-) Изобщо не е така. Изглежда много впечатляващо. Особено ако наистина беше глупост, не съм я публикувал в блога.
Тук разглеждаме доста примери. Този скрипт ви позволява да разклащате обекти, когато задържате курсора на мишката над тях и просто през цялото време. Има и допълнителни ефекти, като прозрачност. Звучи примамливо, нали? :-)
Наистина искам да кажа огромно благодаря на jackrugile.com за този страхотен плъгин.
Като цяло, нека видим как да внедрите такова нещо на вашия сайт.
Пример ι Изтегляне на източници
jQuery рамка и скрипт за разклащане
По традиция трябва да прикачим библиотеката JQuery и самия скрипт за разклащане. За да направите това, между таговете и добавете следното:
Тези файлове (скриптове) са в източниците, които можете да изтеглите по-горе.
Напомням ви, че ако вече имате прикачена библиотека, не е необходимо да я прикачвате отново.
jquery-1.7.2.min.js - библиотека (рамка). Повтарям, ако имате прикачен този скрипт, не е необходимо да го повтаряте.
jquery.jrumble.1.3.min.js - и ето този скрипт, който всъщност прави чудеса с обектите в сайта. :-) прикачваме го със сигурност.
Обекти
В този случай ще разклащаме нормалните блокове, които ще създадем с помощта на CSS. Ето как ще изглежда блокът:
А ето и самия CSS код:
Това е блоковият код, който е представен в примера.
Сега ще извикаме самия скрипт за разклащане.
Принципът на скрипта е много прост. Извършва произволни движения по осите x и y, сопределена скорост. Ние можем сами да зададем тези параметри.
Например, в демото имаме първия блок под номер едно. Когато се задържа, той се движи по зададените оси: x: 2 и y: 2, параметърът за въртене също е зададен на 1. Този параметър определя дали треперенето ще бъде по-силно или не, с други думи, не позволява на блока да излезе далеч отвъд границите си. Така визуално се получава малък или силен ефект.
Сега да видим как ще изглежда в кода:
Диапазони
По подразбиране ще вземем първия блок с клас demo1
HTML:
demo-box е класът box, който създадохме в началото в CSS стилове.
demo1 е класът, който ще използваме в скрипта за разтърсващо повикване за този блок.
Скрипт
Сега трябва да добавите това между таговете:
Както можете да видите в скрипта, блокът се движи според зададените параметри x: 2, y: 2, с ротация: 1. Искам да кажа (повтарям), че тези параметри могат да се променят както искате. И в демонстрацията тези параметри са представени.
Тук ще увеличим и намалим скоростта на разклащане. За да направите това, нека вземем пример в демонстрация номер 5. В този случай самият скрипт за повикване ще се промени малко. Ще изглежда така:
По подразбиране скоростта е нула, колкото по-голяма е стойността на този параметър, толкова по-малко ще се тресе :-) Демото съдържа няколко примера с различни стойности.
Прозрачност
Тук ще комбинираме треперене и прозрачност едновременно. Бих искал да кажа, че изглежда много красиво и необичайно :-)
В демонстрацията вземаме блок номер 12, който се тресе като луд и отново скриптът за повикване няма да се промени много:
В този пример стойността е зададена на 6 и по двете оси. Параметърът на въртене е 6, скоростта е 5. Прозрачността вскриптът се нарича - opacity със стойност true - това е задължителен ред. Както и силата на прозрачност - opacityMin: е 05. Колкото по-голяма е тази стойност, толкова по-прозрачен ще бъде блокът при задържане.
Други примери
Тук ще бъдат представени примери за блокови скриптове в демото под техния номер и клас:
Блок 14 (Щракнете)
Блок 15 (Щракнете (задръжте))
Блок 16 (Нон-стоп)
Блок 17 и 18 (Дистанционно)
Това е интересен ефект, когато задържането на мишката над десния блок премества левия и обратно.
Блок 19 (Няколко секунди (щракване))
Блок 20 (Импулс)