Поворот картинки с помощью JS

JavaScript – это мега крутая штука, которая позволяет делать очень много великолепных эффектов. Одним из таких эффектов можно назвать поворот картинки. Такой эффект добавляет живости сайту, делая его более интересным с точки зрения пользователя.

Я использовал его на одном своем женском сайте, который упорно не хотят брать в Яндекс.Каталог.

Я считаю, что умение поворачивать изображение – это очень полезный и нужный эффект, который в некоторых случаях будет к месту на вашем сайте.

Возможность поворачивать изображения у нас есть благодаря существованию jQuery и дополнительному плагину jqueryrotate.

Могу сказать с некоторой увереностью, что этот плагин корректно работает в большинстве браузеров. В современных версиях работает 100% и только в Opera под Linux есть незначительные лаги. В более старых версиях начиная от IE 6 и Firefox 2.0 плагин также отлично работает. И это огроменный плюс в его пользу.

Что нам нужно для поворота изображений?

Для этого нам нужно подключить к своему сайту библиотеку jQuery и плагин jqueryrotate:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jqueryrotate.2.1.js"></script>

Перед этим необходимо поместить плагин jqueryrotate в директорию /js вашего сайта.

Непосредственно сам поворот

Плагин jqueryrotate позволяет:

  • повернуть картинку на определенный угол;
  • красиво, с анимацией поворачивать картинку, так сказать в онлайн режиме.

Анимированный поворот можно посадить на событие, к примеру, на наведение курсора мыши и получить эффект отзывчивости от картинки.

С самого начала нам нужно выделить то изображение, к которому будем применять эффект поворота – присваиваем ему идентификатор rotateimg:

<img src="/images/img.jpg" alt="" id="rotateimg" />

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

Повернуть изображение на угол в 12 градусов:

<script type="text/javascript">
	jQuery(document).ready(function() {
	    jQuery("#rotateimg").rotate({angle:12});
	});
</script>

Постоянно вращать изображение:

<script type="text/javascript">
	var angle = 0;
	setInterval(function(){
	      angle+=3;
	     jQuery("#rotateimg").rotate(angle);
	},60);
</script>

Поворот изображения при наведении на него мышки:

<script type="text/javascript">
	jQuery("#rotateImg").rotate({ 
	   bind: 
	     { 
	        mouseover : function() { 
	            jQuery(this).rotate({animateTo:15})
	        },
	        mouseout : function() { 
	            jQuery(this).rotate({animateTo:0})
	        }
	     } 
	});
</script>

Сначала хотел сделать отдельную страницу с примерами этого чудо-плагина, но перечитав всю статьи заново, понял, что всё и так понятно.

P.S. С недавнего времени я вышел из тени и стал разрабатывать сайты уже платя налоги. Для такой работы нужно очень много вдохновения и новых идей, в силу того, что своих ресурсов, увы, не хватает, я в постоянном поиске таких мест. Бороздя просторы всемирной паутины, я набрел на очень красивый и интересный блог «Web Energy», где автор делится своими знаниями в области HTML, CSS, PHP и JavaScript. Очень интересно почитать. Автор блога работает в Serenity, на сайте которых можно найти очень много красивых дизайнов, интересных идей и находок. В общем, всем рекомендую!

Комментарии:

  1. Секрет опубликовал комментарий 28 Январь 2013, 16:21 #

    Отличный прием! Спасибо! Возьму на вооружение!

    | Ответить
  2. николай опубликовал комментарий 3 Сентябрь 2014, 21:08 #

    очень интересная и полезная статья мне понравились определённые полезные моменты я узнал для себя спасибо за статью

    | Ответить
Имя
e-mail
Сайт
Текст комментария: