Т И Л Ь Д О Ш Н А Я

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

1) Создаем основной zero-блок и добавляем в него карточки при помощи «SHAPE» элементов.

2) Создаем дополнительные zero-блоки, под каждую карточку отдельный, т. е. если 4 карточки в основном zero, нужно 4 дополнительных zero — блока. В них мы создадим контент, который будет отображаться при наведении. Контент может быть любым, текст, изображения, кнопки, формы

3) Заполняем дополнительные zero-блоки с контентом для отображения при наведении. Для идеального совпадения высота и ширина контента должны соответствовать высоте и ширине карточки, в которой он будет. Так-же, каждому элементу нужно проставить container: window положение left;top.
Положение этого элемента не меняем, всегда в левом верхнем углу, именно эту область будет «видеть» элемент в первом блоке. Дополнительные элементы можно перемещать в границах этого элемента

4) Теперь настраиваем первую карточку. Сначала нужно выяснить её «CLASS» (в основном zero-блоке,
вида .tn-elem__902 167 301 551 229 108 224) и «ID» дополнительного блока (вида #rec00000000), в котором находится контент, который будет отображаться при наведении.

5) Копируем код 1 и 2 в блок T123. В коде 1 в первых строках мы указываем «CLASS» 1-й карточки и «ID» дополнительного блока.
в строках —
var tildoshnaya_frame = $(«.tn-elem__902 167 301 551 229 108 224»); - заменяем «CLASS»
var tildoshnaya_block = $(«#rec90220023»); - заменяем «ID» блока
Если все сделали правильно, после публикации карточка будет работать.

6) Для остальных карточек нужно копировать только код 1 с указанием соответствующих «CLASS» и «ID».
Копировать код 2 не нужно.

Карточки с эффектом при наведении

Код 1. Скрипт под каждую карточку

<!-- Тильдошная Карточки с эффектом при наведении -->
<!-- Код для каждой карточки -->
<script>
(function () {
	var tildoshnaya_frame = $(".tn-elem__902167301551229099372");
	var tildoshnaya_block = $("#rec90220023");

	tildoshnaya_frame.prepend("<div class='hover'>");
	var destination = tildoshnaya_frame.find(".hover");
	tildoshnaya_block.appendTo(destination);

	tildoshnaya_frame.find(".t396__artboard").addClass("noBackground");
	tildoshnaya_frame.mouseenter(function(){
		tildoshnaya_frame.find(".hover").addClass("active");
	})
	tildoshnaya_frame.mouseleave(function(){
		tildoshnaya_frame.find(".hover").removeClass("active");
	})
	tildoshnaya_frame.addClass("wrap");
}());
</script>

Код 2.Стили. Вставляем в конце кода

<!-- Тильдошная Карточки с эффектом при наведении -->
<!-- Код в конце  -->
<style>
.hover{position:absolute;width:100%;height:100%;transform:translateY(100%);opacity:0;transition:all .4s}
.hover.active{transform:translateY(0);opacity:1}
.noBackground{background-color:transparent!important}
.wrap{overflow:hidden}
</style>

Есть вопросы?

comments powered by HyperComments

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