Jump to content
  • 0
Sign in to follow this  
Bearginger

Как сделать переливающуюся кнопку с пробегающим бликом?

Question

Bearginger    0

Приветствую! Подскажите, как в Muse сделать переливающуюся кнопку с пробегающим бликом? Как, например, здесь (Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.) или здесь (Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.). Спасибо!

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 0
В 09.05.2019 в 13:41, Bearginger сказал:

Приветствую! Подскажите, как в Muse сделать переливающуюся кнопку с пробегающим бликом? Как, например, здесь (Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.) или здесь (Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.). Спасибо!

Примерно так. Создаете кнопку из текстового фрейма, настраиваете ее внешний вид.Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.
Далее -  исследуйте с помощью инспектора кода браузера код кнопки на одном из ваших примеров сайтов. Найдите элемент блика в html коде. На скриншоте это  псевдо элемент ::after (1). Скопируйте его css код, точно как выделено (2).

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.И вставьте в Muse  - Свойства страницы > HTML для HEAD, обязательно обернув тегами

<style>
     Ваш css код
</style>
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.В коде находите имя анимации, запоминаете его
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.Переходите в css файл
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.И находите там код анимации с этим именем
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.Копируете его и также добавляете в Музу

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Возвращаетесь к кнопке и задаете ей стиль графики с классом из скопированного кода butt-anim.
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.Сохраняете, смотрите в браузере - не работает.
Теперь исследуете исходный код своей кнопки, что бы понять, почему не работает.
При исследовании видно, что объект на месте, все работает, но его почему то не видно
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.Подсказка кроется здесь же. Кнопка, кроме заданного вами класса butt-anim имеет еще один класс clearfix (1). Этот класс так же обращается к псевдо элементу ::after и у него свойство видимости имеет значение скрыто (visibility: hidden;) (2). Этот код генерирует муза и вам его надо переопределить для вашего конкретного блика. Для этого прямо в инспекторе (для наглядности) дописываете свойство "видимость" и значение "видимое" visibility: visible;. Объект появился. Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.Скопируйте это свойство и добавьте в Музу к коду блика
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке./monthly_2019_05/izobrazhenie.png.973cc0fb5e281dacc6e9c4bf43fbe099.png" />

Возможно потребуется дополнительная настройка значения свойств для псевдо элемента ::after  в коде под размеры вашей кнопки.

anim12.gif.5d2d910e3ab7f4bc095f9b0bbdeaf8c2.gif

  • Мне нравится 1

Share this post


Link to post

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0
Bearginger    0
В 09.05.2019 в 22:58, Павел Хомерики сказал:

задаете ей стиль графики с классом из скопированного кода .butt-anim. Для этого класса прописываете относительное позиционирование в css коде (добавляете к тому коду который вы вставили)

Спасибо большое! До этого момента сделал, а дальше никак не могу понять, что делать. Не могли бы вы подробнее написать про эти действия? Или дать ссылку где про это написано. Заранее спасибо!

Share this post


Link to post
  • 0
16 часов назад, Bearginger сказал:

Спасибо большое! До этого момента сделал, а дальше никак не могу понять, что делать. Не могли бы вы подробнее написать про эти действия? Или дать ссылку где про это написано. Заранее спасибо!

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

  • Мне нравится 1

Share this post


Link to post
  • 0
Bearginger    0
В 12.05.2019 в 10:31, Павел Хомерики сказал:

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

Спасибо огромное! Сделал вроде всё как написали, но блик почему-то выходит за рамки кнопки

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post
  • 0
Bearginger    0
2 минуты назад, Павел Хомерики сказал:

Дайте ссылку на сайт

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post
  • 0
8 минут назад, Bearginger сказал:

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Добавьте этот код в Музу, туда же

.butt-anim {
	overflow: hidden;
}
  • Мне нравится 1

Share this post


Link to post
  • 0
Bearginger    0
35 минут назад, Павел Хомерики сказал:

Добавьте этот код в Музу, туда же


.butt-anim {
	overflow: hidden;
}

Получилось! Спасибо огромное! 😊👍

Share this post


Link to post
  • 0
Bearginger    0

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

Вставил на страницу форму JotForm через вставку кода html.

Как можно поставить цели Метрики и Analytics на начало прохождения формы (нажатие первой кнопки Далее)?
Если нельзя, на крайний случай, на нажатие кнопки (с якорем).

Страница - Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post
  • 0
9 часов назад, Bearginger сказал:

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

Вставил на страницу форму JotForm через вставку кода html.

Как можно поставить цели Метрики и Analytics на начало прохождения формы (нажатие первой кнопки Далее)?
Если нельзя, на крайний случай, на нажатие кнопки (с якорем).

Страница - Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Вообще надо создавать новую тему с новым вопросом...

На JotForm нельзя поставить так как у вас нет доступа к ее исходному коду. Для привязки js целей к объектам Muse ищите виджет Yandex Aim или через html код добавляйте цель к объекту

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...