Как сделать появление при наведении тильда

Обновлено: 25.06.2024

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

Градиентные кнопки для сайтов на платформе Тильда

Данную модификацию я использую на сайтах, которые имеют определённую стилистику и заказчики хотят видеть градиентные кнопки. В тильде нет стандартной настройки, что бы сделать такую кнопку. Поэтому я использовал код, который беру с сайта michailozdemir.dev

Тут нам достаточно зайти на страницу, вставить нужные цвета, здесь же посмотреть как будет выглядеть наша кнопка. После чего копируем код и вставляем на тильде в блок другое T123. И не забудьте класс кнопке прописать, об этом я рассказываю тут

У Романа много интересных модификаций для Тильды, которые можно применять на своих сайтах. Если что-то не получится, то можно всегда ему написать и попросить помощи.

Глитч в zero block на Тильде для текста

Калькулятор и квиз в zero block на Тильде

Автора данного ресурса с модификациями для Тильды зовут Дмитрий. За небольшую плату можно получить доступ ко всем видео инструкциям на сайте. А если вы дружите с кодом, то и так поймёте как установить модификацию на сайт.

Я указал основные источники, на которых сам беру код для сайтов на тильде. Где-то я код дорабатываю и видоизменяю, где-то беру в готовом виде. Тут я оставлю список всех сайтов, на которых я находил код для тильды, возможно вам пригодится.

//сборник использованных мной решений при верстке на Тильда

Свойство background-attachment на мобильных не работает! Приходится использовать такой способ, как в примере.

Можно задать ширину и высоту html элемента 100% и установить window container и получиться заливка всего блока.

После

В данном примере анимация проигрывается по первому клику от начала до конца. По второму клику в обратном направлении.

В данном примере анимация проигрывается по кругу при наведении мыши. Если мышь не наведена на элемент, анимация стоит на паузе.

В Tilda есть стандартная кнопка для показа и скрытия блоков, но работает она скучно. Ни какой анимации и плавности, просто дергает экран. Мой пример работает при клике на любой объект. В качестве триггеров я использую кнопки в Zero block, немного украсив их анимацией.

UPD
Написал пару статей по данной теме, доступны по ссылкам:
Часть 1: Показываем блок меню по клику в Tilda Part 1
Часть 2: Показываем блок меню по клику в Tilda Part 2

. UPD 2.
Я не против записать видео на данную статью, но мне не очень понятно, что конкретно вас интересует, что именно не получается. Скрипт достаточно простой. Прежде чем кликнуть, напишите в комментарии или в группу в VK, какая проблема у вас возникает при работе с данным примером, отталкиваясь от этого я подготовлю материал и заодно помогу вам.

Привет, друзья! На связи Евгений Тридчиков и в этом видео мы разберем виды анимации в Тильда.

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

Переходим в редактирование зеро блока, выделим элемент, опции, скролл вниз. И здесь нас интересует две последние панели настроек. Это базовая и пошаговая анимация.

Базовая анимация позволяет настроить эффект появления элемента на экране, параллакс эффект и установить фиксированное положение элемента.

Базовая анимация нулевого блока

Среди эффектов появления: слева, справа, снизу, сверху и увеличение. При выборе определенного эффекта появляются дополнительные настройки. Здесь у вас такие возможности, как:

продолжительность анимации (в секундах),
дистанция, которую преодолевает анимация элемента (в пикселях),
задержка перед началом анимации (в секундах),
и расстояние до края экрана, после которого запускается анимация.

Чтобы проверить, как работает анимация, нажмите кнопку “Play Element” . А для тестирования всей анимации в блоке, нажмите кнопку “Play All” .

Параллакс

Далее параллакс эффект. Триггером может быть скролл. Здесь мы выбираем скорость движения элемента относительно скорости скролла (в процентах). Триггером может быть и движение курсора. Тогда мы выбираем смещение элемента по оси Х и У относительно местоположения курсора на экране (в пикселях).

Фиксирование

Далее фиксация элемента относительно экрана: вверх, центр или низ. Здесь можно добавить расстояние между элементом и выбранным краем экрана. А также указать расстояние в пикселях, которое вы будете скролить и элемент будет сохранять фиксированное положение.

Обратите внимание, что работу параллакса и фиксированной анимации вы не можете проверить в режиме редактирования.

Вам нужно сохраниться, выйти и запустить режим превью. Это хорошо, потому что только попытками вы поймете логику работы.

Пошаговая анимация нулевого блока

Базовая анимация это прикольно, но самые интересные и вау-эффекты достигаются за счет пошаговой анимации. Обратите внимание, что пошаговая анимация замещает базовую.

Жмем добавить и выбираем триггер для начала анимации: появление элемента на экране, появление блока на экране, скролл, ховер, клик.

Далее вы можете уточнить триггер с помощью расстояния до края экрана, выбрать зацикливание анимации, протестировать анимацию. Ниже, собственно, шаги анимации, то есть сам сценарий.

А внизу подсказка о том, что можно изменить состояние элемента по умолчанию с помощью первого шага, где следует задать duration (продолжительность анимации) равным 0.

Жмем добавить первый шаг. Перед вами настройки анимации, среди которых:

Для начала я рекомендую определить сценарий, затем разбить его на шаги, и задать свойства элемента на каждом шаге. А поможет вам в этом супер крутой учебник пошаговой анимации от Тильда.

Здесь представлены пошаговые инструкции около 20 самых популярных сценариев. Тут и ховер для карточек, и зацикленный кораблик на волнах, и сборка композиции из разных элементов – в общем все, что хотите.

Сейчас вам нужно уделить пару часов этим инструкциям, повторить у себя в проекте и буквально за один день вы освоите пошаговую анимацию в Тильда.

Смотреть видео

В следующем уроке мы разберем настройку целей в Яндекс Метрике и Google Analytics для форм на Тильде. Если видео получилось полезным, поделитесь с коллегами. С вами был Евгений Тридчиков, и я желаю вам великолепного дня!

Привет, друзья! На связи Евгений Тридчиков и в этом видео мы разберем виды анимации в Тильда. Перемещаемся на тестовую страницу. Во-первых, как видите, у готовых блоков есть базовые настройки анимации. Это простые эффекты для текста, кнопок, которые вы можете изучить на досуге. Не будем на этом останавливаться. Переходим в редактирование зеро блока, выделим элемент, опции, […]

За последний год через мои руки прошли два десятка лендингов на Тильде. Некоторые я собирал сам, в некоторых помогал со сложными местами, за некоторыми просто наблюдал. Первые страницы выглядели скучно, я использовал стандартные блоки и боялся экспериментировать. Со временем я разобрался с тонкостями дизайна и с тем, как устроен код Тильды и как можно влиять на него.

Этот разбор поможет тем, кто работает с Тильдой, но использует только стандартные инструменты и либо боится, либо не знает, как расширять конструктор с помощью своих стилей и скриптов. Оказывается, не нужно быть разработчиком или изучать языки программирования, чтобы делать важные мелочи лучше.

Код в примерах может быть неидеальный, а объяснения — содержать технические неточности. Важно, что это не очередной урок про устройство интернета, а небольшой гайд, как я выжимаю максимум из Тильды без полноценного знания вёрстки или языков программирования.

С помощью этих простых решений я могу делать элементы, которые не соберёшь на стандартных блоках. Например, вот эта кнопка, наведите на неё мышкой (или пальцем).

Кнопка увеличивается. Так не получится сделать с помощью простых настроек блока — можно поменять цвет или тень, но не размер при наведении. Чтобы добавить этот эффект, напишем несколько строчек кода:

Тильда — гибкий инструмент и позволяет реализовать почти любую задумку. Почти — потому что иногда натыкаешься на ограничения: блокам нельзя поставить произвольную ширину, у элементов управления нельзя поменять цвет, карточки ведут себя не так, как тебе нужно.

С помощью своего кода можно менять цвета и поведение элементов, добавлять интерактивность и сложную логику. А чтобы написать простой код, вообще не нужно уметь программировать — достаточно уметь пользоваться гуглом и понимать основы вёрстки.

Если HTML и CSS вас не пугают, вы знаете, зачем нужны классы и id, то нажмите на кнопку ниже, чтобы не отвлекаться на экскурс в вёрстку. Кнопка отправит вас сразу к месту, где разберём пару примеров того, что можно сделать в Тильде, не проходя ни одного курса по программированию.

Вёрстка страницы — это просто работа с объектами, которые на ней расположены: заголовки, текст, изображения. С помощью кода мы говорим им, что они должны содержать, как выглядеть и как вести себя. Обычно за это отвечают HTML, CSS и JavaScript.

HTML — базовый язык разметки. Обычно с помощью HTML просто задают объекты на странице, их расположение и наполнение. Размечают текст на заголовки и абзацы, расставляют ссылки в нужные места, определяют положение картинок и других объектов относительно друг друга. Например, создадим какой-нибудь текст в абзаце. Абзац в HTML — это p, paragraph

JavaScript помогает делать страницу интерактивной: добавлять анимацию и эффекты, задавать правила поведения для кнопок. В примерах ниже JS мы рассматривать не будем, но принцип такой же — находим подходящее решение и используем в своих целях.

JavaScript помогает делать страницу интерактивной: делать анимацию и эффекты, задавать правила поведения для кнопок. В примерах ниже JS мы рассматривать не будем, но принцип такой же — находим подходящее решение и используем в своих целях.

HTML — базовый язык разметки. Обычно с помощью HTML просто задают объекты на странице, их расположение и наполнение. Текст в заголовки и абзацы, ссылки в нужные места текста, положение картинок и других объектов относительно друг друга. Например, нужно создать какой-то текст в абзаце. Абзац в HTML — это p, paragraph

Читайте также: