Как сделать смену цвета при наведении тильда

Обновлено: 06.07.2024

Бесплатный учебник из 16 уроков о том, как использовать анимацию в веб-проектах.

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

Все примеры из учебника можно повторить в конструкторе Tilda — в каждом уроке есть видеоинструкция, которая поможет разобраться, как создать анимацию.

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

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

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

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

Перемещая элемент вдоль экрана по скроллу, можно управлять вниманием посетителя сайта.

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

Все уроки и примеры учебника по веб-анимации — по ссылке.

Почему-то вспомнилось обилие анимации и всяких вылетающих плашек в презентациях школьников и студентов. +5 к привлекательности. Они так думали.

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

На сайте Apple, например, шикарнейший параллакс.

Да я не против) Я просто про презентации.

Учебник как сделать некоторую анимацию в тильде, но не "Учебник по веб-анимации"

Тильда вообще молодцы. Столько полезного у них блоге да еще и бесплатно

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

В какой-то момент казалось, что сайт начал как то медленнее работать из-за этой анимации((
Надо понимать, на что идёшь ради красоты..

Любая анимация забирает на себя ресурсы браузера. При умеренном использовании, это не будет заметно. Еще анимация может тормозить сильнее, если на сайте включен вебвизор Яндекс Метрики. Он ловит все изменения на экране и тоже отнимает ресурсы.

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

Но видеотуториалы — это только дополнение к приемам из уроков, чтобы показать, как повторить анимацию из примеров в Тильде.

у меня такое часто. из-за этого стал редко посещать ресурс.
странно, но сейчас все ок

Ковидные ограничения стали испытанием для мобильных операторов, которые недополучили доход от роуминга в 2020 году. В Yota в 2020 году выручка от роуминга сократилась в два раза по сравнению с 2019 годом.

Три из них можно будет посмотреть уже весной 2022 года.

Решение по делу вынесли в сентябре 2021 года, но пока оно не вступило в силу — его оспаривают обе компании.

В прошлом году я стал операционным директором офиса компании Promwad в Иннополисе и оказался единственным сотрудником, который исходно жил в этом городе. Остальные приезжали из других городов России. Поэтому мне часто приходилось делиться с новичками своим опытом трех лет жизни и работы в Иннополисе. В итоге я решил собрать свои заметки про плюсы…

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

Делается данная "штука" при помощи стилей CSS, т.е. придется добавить несколько строчек текста в файл стилей шаблона, а так же проявить свои дизайнерские способности. Я подскажу что именно добавить.

Обновлено 17.01.2019

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

Как только мышка оказывается наведена на любое поле в списке - происходит смена заднего фона строки, а так же цвет текста/ссылки в названии рубрики сайта.

Вот так выглядит код данного блока:

В моем примере видим что эффект срабатывает на обычной ссылке. Вместо нее может быть контейнер

Чтобы сказать браузеру, что эффект нужно выполнять на конкретных ссылках, я взял их в отдельный

Практика

Теперь необходимо задать действие по наведению мышки. Как уже говорилось выше - делаем все при помощи стилей CSS (файл шаблона может называться style.css, css.css, core.css или еще как-то).

Чуть понятнее: мы указали что ссылка a должна находиться внутри контейнера с классом .catside . Далее мы добавили псевдокласс hover и оформили по правилам CSS.

Послесловие

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Переходим в Настройки нашего блока и рассмотрим их подробнее.

В общих Настройках для блока GL27 мы можем изменять:

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

Здесь нам доступны настройки для элементов управления галереей - полосы прокрутки и кнопки PLAY/STOP:

ее цвет,
толщину полосы в пикселях,
величину отступа полосы прокрутки от изображений в пикселях;

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

Здесь нам доступны следующие настройки:

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

Нашему вниманию представлены настройки:

полноэкранная версия - очередное что-то непонятное, у меня не сработало, ничего не поменялось на экране;
автоматическая смена слайдов (в миллисекундах, 1 сек = 1000 млсек) - дает возможность указать скорость смены карточек;
размер стрелки - позволяет указать размеры стрелок галереи - маленький, средний, большой и самый большой;
толщина стрелки - можем сделать стрелки галереи тоньше или толще, в пикселях;
стрелка цвет - цвет самой стрелки;
цвет при наведении - цвет стрелки при наведении на нее курсора мыши;
стрелка: цвет фона - цвет фонового кружка под стрелкой;
цвет фона при наведении - цвет фонового кружка под стрелкой в момент наведения на него курсора мыши;
стрелка: непрозрачность фона - можем регулировать яркость фонового кружка под стрелкой;
непрозрачность при наведении - позволяет добавлять hover-эффект фону кружка со стрелкой при наведении;
показывать обводку - по моим ожиданиям, это предполагалась именно обводка кружка под стрелкой. Однако, при экспериментировании с данной настройкой оказалось, что она включает фон этого кружка (если, например, в настройках самого фона цвет не выбран), но не обводку. Взрыв мозга. Похоже на баг в библиотеках Тильды. Или я чего-то опять не понимаю.

Сразу нам доступны настройки:

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

Здесь мы можем изменять параметры:

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

Здесь нам доступны настройки:

цвет заголовка карточки;
размер шрифта заголовка карточки;
шрифт для заголовка карточки;
межстрочное расстояние для заголовка;
можно отметить чекбокс для отображения заголовка карточки заглавными буквами;
отступ сверху для заголовка в пикселях;
отступ снизу для заголовка в пикселях;
цвет описания карточки;
размер шрифта описания;
шрифт для описания карточки;
межстрочное расстояние для описания;
насыщенность шрифта описания карточки;
также доступен чекбокс для отображения описания заглавными буквами;
отступы сверху и снизу для описания карточки в пикселях.

Давайте теперь перейдем к Контенту блока и посмотрим, что нам доступно.

Итак, видим, что здесь мы можем управлять контентом с помощью карточек. Их можно добавлять, дублировать, выключать, удалять, перемещать вверх или вниз.

В карточках нам доступны следующие элементы:

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

Неоднократно встречался вопрос о том, как изменить левый отступ в блоке GL27 Тильды.

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

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

Для этого нужно добавить на страницу блок T123 HTML-код и написать в нем:

Получим в результате отсутствие такого большого отступа слева в блоке GL27.

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

На этом я заканчиваю данный пост. Получился он очень длинный.

Надеюсь, статья была полезна и Вы нашли решение для своих задач.
Желаю Вам творческих успехов!

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