Поворот картинки - JS
Я використав його на одному своєму жіночому сайті, який завзято не хочуть брати до Яндекс.Каталогу.
Я вважаю, що вміння повертати зображення – це дуже корисний та потрібний ефект, який у деяких випадках буде доречним на вашому сайті.
Можливість повертати зображення у нас є завдяки існуванню jQuery та додатковому плагінуjqueryrotate.
Можу сказати з певною впевненістю, що цей плагін коректно працює у більшості браузерів. У сучасних версіях працює 100% і лише у Opera під Linux є незначні лаги. У більш старих версіях, починаючи від IE 6 і Firefox 2.0, плагін також відмінно працює. І це величезний плюс на його користь.
Що нам потрібне для повороту зображень?
Для цього нам потрібно підключити до свого сайту бібліотеку jQuery та плагін jqueryrotate:
Перед цим необхідно помістити плагін jqueryrotate у директорію/js вашого сайту.
Безпосередньо сам поворот
Плагін jqueryrotate дозволяє:
- повернути картинку на певний кут;
- красиво, з анімацією повертати картинку, так би мовити, в онлайн режимі.
Анімований поворот можна посадити на подію, наприклад, на наведення курсору миші та отримати ефект чуйності від картинки.
З самого початку нам потрібно виділити те зображення, до якого будемо застосовувати ефект повороту – присвоюємо йому ідентифікатор rotateimg:
Ось кілька типових прикладів, за допомогою яких можна досягти необхідного ефекту:
Повернути зображення на кут в 12 градусів:
Постійно обертати зображення:
Повертання зображення при наведенні на нього мишки:
Спочатку хотів зробити окрему сторінку зприкладами цього диво-плагіна, але перечитавши всю статтю наново, зрозумів, що все й так зрозуміло.
Коментарі:
Чудовий прийом! Дякую! Візьму на озброєння!
що демо не залишив, гіт здувся, видаляти нах?