Т И Л Ь Д О Ш Н А Я

При наведении

По клику

Everything should be made as simple as possible, but not simpler.

The work you do while you procrastinate is probably the work you should be doing for the rest of your life.

HOVER ME

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

1) Создаем в редакторе zero блока элемент и настраиваем ему анимацию с настройкой EVENT: On click.

2) Создаем элемент, при наведении на который будет происходить анимация на первом элементе.

3) Добавляем код 1 в блок T123.

4) Добавляем код 2 в блок T123 и указываем в нем:
Класс элемента, на котором задали анимацию в шаге 1;
Класс элемента, при наведение на который будет происходить анимация;
Суммарное время анимации в секундах, которое указали в редакторе анимации.

5) Если нужно добавить еще одну зависимую анимацию, нужно копировать только код 2.

Зависимая анимация при наведении

Зависимая анимация нужна когда при нажатии или наведении на один элемент, запускается анимация других элементов на экране. Например, при наведении на кнопку, позади неё происходит анимация.

При наведении курсора на элемент происходит анимация, а когда курсор покидает область элемента, анимация проигрывается в исходное положение. В мобильной версии работает не по наведению, а по нажатию.

time в коде указывает когда элемент может начать проигрывать анимацию обратно. В некоторых случаях, например, при наведении на кнопку рядом с ней происходит анимация нескольких элементов с разным временем, лучше в коде выставить всем время максимальной анимации. Пример:
Шейп 1 — Время анимации 0.7
Шейп 2 — Время анимации 0.4
Шейп 3 — Время анимации 1
Тут лучше выставить всем time = 1;

Инструкция

Код 1

<!-- Тильдошная зависимая анимация для zero блока при наведении -->
<!-- Код 1: должен быть один на странице -->
<script>
function dependentAnimationOnHover(e,o,i){setTimeout(function(){o.unbind("click")},500),i*=1e3;var t=!1,a=!1;function n(){a||(a=!0,function(){o.children(".tn-atom__sbs-anim-wrapper").css("animation-direction","normal"),o.addClass("t-sbs-anim_started");var n=o.clone();o.before(n),o.remove(),o=n,setTimeout(function(){t?e.on("mouseleave",r):r()},i)}())}function r(){e.unbind("mouseleave",r),o.children(".tn-atom__sbs-anim-wrapper").css("animation-direction","reverse");var n=o.clone();o.before(n),o.remove(),o=n,setTimeout(function(){a=!1},i)}e.hover(function(){t=!0,n()},function(){t=!1})}
</script>

Код 2

<!-- Тильдошная зависимая анимация для zero блока по клику -->
<!-- Код 2: здесь указываем классы элементов и время анимации -->
<script>
$("document").ready(function(){
	// Класс элемента, на который наводим
	var hoverElem = $(".tn-elem__1149003771562151458350");
	// Класс элемента, который будет анимироваться
	var animElem = $(".tn-elem__1149003771562095593462");
	// Суммарное время анимации в секундах, выставленное в редакторе анимации
	var time = 0.3;
	dependentAnimationOnHover(hoverElem, animElem, time);
})
</script>

Everything should be made as simple as possible, but not simpler.

The work you do while you procrastinate is probably the work you should be doing for the rest of your life.

CLICK ME

Зависимая анимация по клику

1) Создаем в редакторе zero блока элемент и настраиваем ему анимацию с настройкой EVENT: On click.

2) Создаем элемент, при наведении на который будет происходить анимация на первом элементе.

3) Добавляем код 1 в блок T123.

4) Добавляем код 2 в блок T123 и указываем в нем:
Класс элемента, на котором задали анимацию в шаге 1;
Класс элемента, при клике на который будет происходить анимация;
Суммарное время анимации в секундах, которое указали в редакторе анимации.

5) Если нужно добавить еще одну зависимую анимацию, нужно копировать только код 2.

Зависимая анимация нужна когда при клике или наведении на один элемент, запускается анимация других элементов на экране. Например, при наведении на кнопку, позади неё происходит анимация.

При клике на элемент происходит анимация, и при повторном клике, анимация проигрывается в исходное положение.

time в коде указывает когда элемент может начать проигрывать анимацию обратно. В некоторых случаях, например, при наведении на кнопку рядом с ней происходит анимация нескольких элементов с разным временем, лучше в коде выставить всем время максимальной анимации. Пример:
Шейп 1 — Время анимации 0.7
Шейп 2 — Время анимации 0.4
Шейп 3 — Время анимации 1
Тут лучше выставить всем time = 1;

Инструкция

Код 1

<!-- Тильдошная зависимая анимация для zero блока по клику -->
<!-- Код 1: должен быть один на странице -->
<script>
function dependentAnimationOnClick(i,e,t){setTimeout(function(){e.unbind("click")},500),t*=1e3;var o=!1,c=!1;function n(){c||(c=!0,function(){e.children(".tn-atom__sbs-anim-wrapper").css("animation-direction","normal"),e.addClass("t-sbs-anim_started");var n=e.clone();e.before(n),e.remove(),e=n,setTimeout(function(){o?i.on("click",a):a()},t)}())}function a(){i.unbind("click",a),e.children(".tn-atom__sbs-anim-wrapper").css("animation-direction","reverse");var n=e.clone();e.before(n),e.remove(),e=n,setTimeout(function(){c=!1},t)}i.click(function(){0==o?(o=!0,n()):o=!1})}
</script>

Код 2

<!-- Тильдошная зависимая анимация для zero блока по клику -->
<!-- Код 2: здесь указываем классы элементов и время анимации -->
<script>
$("document").ready(function(){
	// Класс элемента, на который наводим
	var hoverElem = $(".tn-elem__1148719531562151458350");
	// Класс элемента, который будет анимироваться
	var animElem = $(".tn-elem__1148719531562569303474");
	// Суммарное время анимации в секундах, выставленное в редакторе анимации
	var time = 1;
	dependentAnimationOnClick(hoverElem, animElem, time);
})
</script>