Просим обратить внимание: техническая поддержка 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 пикселей, но это можно изменить в конце кода.
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>
Есть вопросы?
Вот, что есть еще
ЭФФЕКТ
Модификация позволяет анимировать числа в Zero Block с заданным начальным и конечным значением
Модификация
Запускаем анимацию для мобильных устройств простым кодом
