Под курсором
Статично
PEGGY GOU – STARRY NIGHT
OCTOBER 2
ELECTRONIC
TUNGZ – OKAY
OCTOBER 1
GROOVE
MAI.LA – MAYBE ୧(ಠ益ಠ)୨
SEPTEMBER 29
HYPE
AMAARAE – LIKE IT
SEPTEMBER 26
SMOOTH
KU KIM – PERIDOT
SEPTEMBER 25
SMOOTH
SASSY 009 – THRASHER
SEPTEMBER 23
ELECTRONIC
PEGGY GOU – STARRY NIGHT
OCTOBER 2
ELECTRONIC
GERMANY
TUNGZ – OKAY
OCTOBER 1
GROOVE
UNITED KINGDOM
CHARLOTTE DAY WILSON – MOUNTAINS
SEPTEMBER 30
SMOOTH
CANADA
MAI.LA – MAYBE ୧(ಠ益ಠ)୨
SEPTEMBER 29
HYPE
UNITED STATES
P-RALLEL – CHARMER (FT. SAM WISE)
SEPTEMBER 28
RHYMES & BEATS
UNITED KINGDOM
HÅN – IT'S BETTER WHEN I SLEEP
SEPTEMBER 27
LATE NIGHT
ITALY
AMAARAE – LIKE IT
SEPTEMBER 26
SMOOTH
GHANA
KU KIM – PERIDOT
SEPTEMBER 25
SMOOTH
KENYA
DORJ & MELODIESINFONIE – MUAR
SEPTEMBER 24
GROOVE
GLOBAL
1. Создаем Zero блок и добавляем shape элементы, при наведении на который будет всплывать изображение и изображения, image с отключенным Lazy Load.

2. Добавляем код в блок T123.

3. В коде нужно через запятую указать класс shape элемента в переменной hover_elems и класс изображения в переменной images. Нужно чтобы классы были параллельно, то есть элемент класс которого мы указали первым в переменной hover_elems при наведении будет отображать первое изображение из images.
var hover_elems = $(".tn-elem__0000000000000000000001, .tn-elem__0000000000000000000002, .tn-elem__0000000000000000000003");
var images = $(".tn-elem__0000000000000000000001, .tn-elem__0000000000000000000002, .tn-elem__0000000000000000000003");

Для изображения под курсором в конце кода можно указать ширину изображения.
width: 400px;

Для статичных изображений можно так-же изменить позицию изображения заменив изменив значения в переменных top и left с 50% на пиксели (500px) или другое значение в процентах (20%)
var top = "50%";
var left = "50%";

И ширину изображения указав другое значение
var width = "600px";

Если вам нужно чтобы некоторые элементы zero блока были под всплывающим изображением, как полоски между пунктами списка в демо выше, вам нужно добавить код 3 и указать в нем классы этих элементов.

Изначально в коде отключен эффект если ширина экрана пользователя меньше чем 1200 пикселей, но это можно изменить в конце кода.

Всплывающие изображения при наведении в Zero блоке

Код 1: для изображения под курсором
<script>
	$(document).ready(function(){
		// Классы шейпов
		var hover_elems = $(".tn-elem__0000000000000000000001, .tn-elem__0000000000000000000002, .tn-elem__0000000000000000000003, .tn-elem__0000000000000000000004");
		// Классы изображений
		var images = $(".tn-elem__0000000000000000000001, .tn-elem__0000000000000000000002, .tn-elem__0000000000000000000002, .tn-elem__0000000000000000000004");

		$("body").append("<div class='hover_float_img'></div>");

		var img_exist = 0;
		var img_src;

		var images_src = [];

		images.each(function(){
			images_src.push($(this).find(".tn-atom__img").attr("src"));
		})

		hover_elems.each(function(i, item) {
			$(item).hover(function(){
				img_src = images_src[i];
				if (img_exist == 0) {
					$(".hover_float_img").append( "<img class='tn-atom__img' src='" + img_src + "'>" );
					img_exist = 1;
				} else {
					$(".hover_float_img .tn-atom__img").attr("src", img_src);
				}

				$(".hover_float_img").css("opacity", "1");
			}, function(){
				$(".hover_float_img").css("opacity", "0");
			})
		})


		$(window).mousemove(function(e){
			var width = $(".hover_float_img").get(0).offsetWidth;
			var height = $(".hover_float_img").get(0).offsetHeight;
			$(".hover_float_img").css("top", e.clientY - height / 2).css("left", e.clientX - width / 2);
		})
	})
</script>
<style>
	.hover_float_img {
		position: fixed;
		top: 0;
		left: 0;
		pointer-events: none;
		opacity: 1;
		transition: opacity .2s;
	}
	.hover_float_img,
	.hover_float_img img {
		/* Ширина изображения */
		width: 400px;
	}
        /* При ширине экрана меньше чем 1200 пикселей эффект не работает */
	@media screen and (max-width: 1200px) {
	    .hover_float_img {
	        display: none;
	    }
	}
</style>
Код 2: для статичного отображения
<script>
	$(document).ready(function(){
		// Классы шейпов
		var hover_elems = $(".tn-elem__1274353341568204948817, .tn-elem__1274353341570107321820, .tn-elem__1274353341570107324740, .tn-elem__1274353341570107324748, .tn-elem__1274353341570107328692, .tn-elem__1274353341570107328698, .tn-elem__1274353341570107328707, .tn-elem__1274353341570107328714, .tn-elem__1274353341570107333588");
		// Классы изображений
		var images = $(".tn-elem__1274353341570116687722, .tn-elem__1274353341570116687613, .tn-elem__1274353341570116687581, .tn-elem__1274353341570116687672, .tn-elem__1274353341570116687686, .tn-elem__1274353341570116687638, .tn-elem__1274353341570116687656, .tn-elem__1274353341570116687603, .tn-elem__1274353341570116687664");
		// Отступ сверху до центра изображения
		var top = "50%";
		// Отступ слева до центра изображения
		var left = "30%";
		// Ширина изображения
		var width = "600px";

		$("body").append("<div class='hover_static_img'></div>");

		var img_exist = 0;
		var img_src;


		var images_src = [];

		images.each(function(){
			images_src.push($(this).find(".tn-atom__img").attr("src"));
		})

		var float_elem =  $(".hover_static_img")
		hover_elems.each(function(i, item) {
			$(item).hover(function(){
				img_src = images_src[i];
				if (img_exist == 0) {
					float_elem.append( "<img class='tn-atom__img' src='" + img_src + "'>" );
					float_elem.css("width", width);
					float_elem.find("img").css("width", width);
					img_exist = 1;
				} else {
					float_elem.find(".tn-atom__img").attr("src", img_src);
				}
				float_elem.css("top", "calc(" + top + " - " + (float_elem.height() / 2) + "px)")
				float_elem.css("left", "calc(" + left + " - " + (float_elem.width() / 2) + "px)")

				float_elem.css("opacity", "1");
			}, function(){
				float_elem.css("opacity", "0");
			})
		})
	})
</script>
<style>
	.hover_static_img {
		position: fixed;
		top: 0;
		left: 0;
		pointer-events: none;
		opacity: 1;
		transition: opacity .2s;
	}
        /* При ширине экрана меньше чем 1200 пикселей эффект не работает */
	@media screen and (max-width: 1200px) {
	    .hover_static_img {
	        display: none;
	    }
	}
</style>
Код 3: указанные элементы находятся под изображением
<style>
    .tn-elem__1222564331570095027480,
    .tn-elem__1222564331570095191240 {
        z-index: 0 !important;
    }
</style>
Есть вопросы?
comments powered by HyperComments
Вот, что есть еще
Made on
Tilda