Т И Л Ь Д О Ш Н А Я

Просим обратить внимание: техническая поддержка 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

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

Модификация

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

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

Эффект

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

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

Модификация

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

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