Эффект загибающегося уголка для картинки через javascript (Часть 2: движение уголка)

С помощью скрипта, который рассмотрен в данной статье ниже можно заставить уголок вашей картинки двигаться: разгибаться, загибаться, изменять угол загиба и др., то есть реагировать на действия посетителя вашего сайта.

Скачать исходники для статьи можно ниже

1. Скачиваем сам javascript.

Нам понадобиться скрипт с названием: cvi_curl_lib.js (ссылка с архивом данного скрипта) или же скачать его с сайта разработчика “netzgesta.de/reflex” (закачается папочка со скриптами, внутри нее и лежит скрипт cvi_curl_lib.js ).

Чтобы распаковать архив советую воспользоваться программой WinRaR.

Далее нам нужно загрузить данный скрипт (cvi_curl_lib.js) на сервер нашего сайта, а для этого открываем программу FileZilla и перекидываем наш файл cvi_curl_lib.js в корневую папку сайта (на моем хостинге она называется public_html), тогда путь до скрипта у нас будет следующий: http://название вашего сайта/cvi_curl_lib.js

2. Подключаем данный javascript к wordpress.

Открываем с помощью редактора кода файл header.php, для этого переходим в панель управления нашим сайтом, в левом меню выбираем пункт “Внешний вид”, далее подпункт “Редактор”, справа – в списке шаблонов находим файл header.php (Шапка) и кликаем по нему.

Находим в нем тег </head> и вставляем перед ним следующие строчки:

<script type="text/javascript" src="http://mnogoblog.16mb.com/cvi_curl_lib.js"></script>
<script type="text/javascript">
<!--
function toggle(obj) {
	cvi_curl.defaultSize = 50;
	cvi_curl.defaultColor = "#ffeeaa";
	if(obj.tagName.toUpperCase() != 'IMG') {
		cvi_curl.remove(obj);
	}else {
		cvi_curl.add(obj);
	}
}

var size = 100;
var direct = true;
function increase(obj) {
	var max = 100;
	if(obj.tagName.toUpperCase() != 'IMG') {
		if(!direct && size>5 || size>=max) {
			direct = false; size -= 5;
		}else if(direct && size<=5 || size<max) {
			direct = true; size += 5;
		}
		cvi_curl.modify(obj, {size: size });
	}
}

window.onload = function () {
	cvi_curl.add(document.getElementById("img2"), {size: 100 });
	cvi_curl.add(document.getElementById("img3"), {size: 5 });
	cvi_curl.add(document.getElementById("img4"), {size: 75 });
};
-->
</script>

С помощью данного кода мы подключили нужный нам javascript к сайту и установили некоторые исходные параметры для уголка.

Использование данного скрипта я буду показывать на примере сайта mnogoblog.16mb.com

Поэтому путь до файла со скриптом у меня будет следующий: http://mnogoblog.16mb.com/cvi_curl_lib.js ( у вас он будет http://ваш сайт/cvi_curl_lib.js, если вы закачали скрипт в корневую папку своего сайта), поэтому не забудьте при вставке вышеуказанного кода поменять путь до скрипта.

3. Использование:

Далее изображение, к которому мы хотим добавить эффекты, заключаем в тег <div> с определенными свойствами.

Допустим у меня на сайте было загружено изображение и путь до него был следующим “http://mnogoblog.16mb.com/wp-content/uploads/2012/08/01.jpg”

Тогда рассмотрим следующие примеры:

Пример 1. При клике на картинку уголок загибается, при следующем клике – уголок разгибается.

Посмотреть демо (наглядный пример).

Для осуществления данного эффекта, необходимо вставить следующий код в нужном месте странички или поста во вкладке HTML.

Код:

<div class="demo" onclick="toggle(document.getElementById('img1'));">
<img src="http://mnogoblog.16mb.com/wp-content/uploads/2012/08/01.jpg" id="img1">
</div>

Где вместо пути к картинке http://mnogoblog.16mb.com/wp-content/uploads/2012/08/01.jpg укажите путь к нужной вам картинке на вашем сайте.

Пример 2. При наведении курсора на картинку уголок загибается, как только курсор выходит за область картинки уголок разгибается.

Посмотреть демо (наглядный пример).

Для осуществления данного эффекта, необходимо вставить следующий код в нужном месте странички или поста во вкладке HTML.

<div class="demo" onmouseover="cvi_curl.modify(document.getElementById('img3'), {size: 50 });" onmouseout="cvi_curl.modify(document.getElementById('img3'), {size: 5 });">
<img src="http://mnogoblog.16mb.com/wp-content/uploads/2012/08/01.jpg" id="img3">
</div>

Пример 3. При перемещении курсора в области картинки уголок изменяет угол своего загиба, как только курсор выходит за область картинки состояние загиба уголка фиксируется.

Посмотреть демо (наглядный пример).

<div class="demo" onmousemove="increase(document.getElementById('img2'));">
<img src="http://mnogoblog.16mb.com/wp-content/uploads/2012/08/01.jpg" id="img2">
</div>