Т И Л Ь Д О Ш Н А Я

Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода

Под курсором

Статично

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. Важно чтобы изображения хранились именно как image, а не shape.

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");
		// Классы изображений
		var images = ".tn-elem__0000000000000000000011, .tn-elem__0000000000000000000012, .tn-elem__0000000000000000000013";

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

		var img_exist = 0;
		var img_src;

		var images_arr = images.split(", ");

		hover_elems.each(function(i, item) {
			$(item).hover(function(){
				img_src = $(images_arr[i]).find(".tn-atom__img").attr("src");
				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__0000000000000000000001, .tn-elem__0000000000000000000002, .tn-elem__0000000000000000000003");
		// Классы изображений
		var images = ".tn-elem__0000000000000000000011, .tn-elem__0000000000000000000012, .tn-elem__0000000000000000000013";
		// Отступ сверху до центра изображения
		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.split(", ");

		var float_elem =  $(".hover_static_img")
		hover_elems.each(function(i, item) {
			$(item).hover(function(){
				img_src = $(images_src[i]).find(".tn-atom__img").attr("src");
				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

Вот, что есть еще

Модификация

Зависимая анимация

Анимация элементов при наведении или по клику

Эффект

Цветной дым по клику

Полюбившимся многим эффект реалистичного цветного дыма

Модификация

Поэкранный скролл

Ввертикальный, горизонтальный или смешанный поэкранный скролл

ЭФФЕКТ

Анимация чисел

Модификация позволяет анимировать числа в Zero Block с заданным начальным и конечным значением

Модификация

Анимация на мобильных устройствах

Запускаем анимацию для мобильных устройств простым кодом

МОДИФИКАЦИЯ

Слайдер из Zero Block

Слайдер со своими элементами управления и дизайном

Эффект

Наведение на карточки

При наведении на элемент в зеро блоке всплывает другой зеро блок

ЭФФЕКТ

Эффект загрузки страницы

Прелоадер при входе на страницу или при переходе по ссылке