Как сделать собственные интерактивные картинки на сайте

Доброго времени суток всем читателям текущей публикации. Сегодняшняя статья посвящена теме «Интерактивные картинки». Это достаточно интересная технология, которая делает дизайн сайтов разнообразным и динамичным. А это как раз отличное решение для привлечения внимания пользователей к вашему сервису.

Поэтому я расскажу вам, что из себя представляют интерактивные изображения, где они обычно используются и как можно создать свою собственную аналогичную картинку. Давайте приступим!

Ой, там что-то движется!

Итак, что же означает термин «интерактивное изображение»? Это такое изображение, которое при взаимодействии с какими-либо действиями пользователя определенным образом видоизменяется.

На самом деле с интерактивными картинками мы сталкиваемся буквально каждый день. Одно время они были очень популярны в социальных сетях. Их отправляли друзьям и знакомым на Новый Год, таким образом поздравляли с днем рождения и другими праздниками.

К тому же для детей выпускают простые игры с поиском предметов в определенной сцене, двигающимися объектами и т.д., которые тоже относятся к описываемому разделу.

Видоизменяющиеся картинки хорошо использовать для презентаций, так как на них наглядно можно объяснить, например, некоторые детали разрабатываемого проекта.

Интерактивные движения

Еще одним интересным вариантом использования такого вида изображений являются разработки компании Apple. Они приняли решение ставить на телефонах на рабочий стол двигающиеся картинки. А с выходом iOS 7 этот механизм только улучшился. Теперь iPhone 7 использует интерактивный слой, который реализует качественный, глубокий параллакс-эффект при наклонах смартфона.

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

За нас уже подумали

Так как описываемая мною технология достаточно популярна, для ее реализации было создано множество различных платных и бесплатных плагинов. Все они реализованы на языках программирования, начиная от html и css, и заканчивая JavaScript и ее наиболее известной библиотекой jQuery.

Так, интересными являются «3D Thumbnail Hover Effects», который необычно складывает фотографию при наведении на нее курсора (демо примера), «Caption hover effect», который выводит информацию о картинках, и еще множество других. Все примеры можно найти на вышеуказанном сайте.

Помимо этого, существуют и другие дополнения для реализации hover effects на библиотеке jQuery. Например, плагин с размытием основного фона рисунка в определенных местах (так реализовывается «спойлер с размытием»), эффект увеличительного стекла в пределах указанного объекта на картинке и т.д.

Многие из них выложены в общий доступ, так что вам останется только найти подходящий эффект и подключить его к своему проекту. Я хочу посоветовать вам сайт. На нем выложено много плагинов и учебных пособий (tutorials).

Контрольный пример

Ну а теперь пришло время реализовать интерактивную картинку самостоятельно. Для этого я воспользовался эффектным плагином «Hover and Click Trigger for Circular Elements». Для более качественного обучения ознакомьтесь с официальной статьей, перейдя по ссылке.

Ну а я хочу презентовать вам свой код, усовершенствованный под мой вкус.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>article</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.circlemouse.js"></script> /* для будущей работы с плагином вам придется подключить данный скрипт, указав при этом в src путь к файлу*/
<style>
.pic-circle{
	width: 470px;
	display: block;
	height: 470px;
	border-radius: 49%;
	-webkit-border-radius: 49%;
	-moz-border-radius: 49%;
	overflow: hidden;
	background: #dda994 url(https://ru2.anyfad.com/items/t1@be437384-1558-48a5-9808-22f0151157ff/KRASIVYE-PLATYa--UKRAShENIE-DLYa-DEVUShEK-I-RADOST-DLYa-MUZhChIN.jpg) no-repeat center right;
        background-size: cover;
	box-shadow: 
		inset 0 0 2px 240px rgba(0,1,0,.4),
		inset 0 0 0 7px #ff6970;
	outline: none;
	transition: box-shadow 440ms ease-in-out;
}
.pic-circle:hover{
    box-shadow: 
		inset 0 0 0 0 rgba(0,0,0,0.6),
		inset 0 0 0 17px #FFA07A,
		0 0 9px rgba(0,0,0,0.9);
}
 
</style>
 </head> 
 <body>
<a href="#" id="circle" class="pic-circle"><h3>klik</h3></a>
 </body> 
</html>

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

.pic-circle-hover{
    box-shadow: 
		inset 0 0 0 0 rgba(0,0,0,0.6),
		inset 0 0 0 17px #FFA07A,
		0 0 9px rgba(0,0,0,0.9);
}

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

Я решил не дублировать программный код на jQuery, поэтому его вы можете скопировать с официального сайта. Но стоит обратить внимание на эту функцию, так как название классов изменено.

$('#circle').circlemouse({
	onMouseEnter	: function( el ) {
                el.addClass('pic-circle-hover');
	},
	onMouseLeave	: function( el ) {
		el.removeClass('pic-circle-hover');
	},
	onClick: function( el ) {
		alert('clicked');
	}
});

И в конце своего повествования хочу вам порекомендовать поучительный курс Евгения Попова Javascript + jQuery для начинающих. Все подробно, пошагово, понятно, одним словом для чайников.