|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
22.02.2019, 17:03 | #1 |
Регистрация: 21.02.2019
Сообщений: 4
|
Как реализовать чтоб после события :hover происходила плавная анимация?
Есть такой код, волнует 2 вещи:
1) я реализовал чтоб при наведении на img происходила анимация (из чёрно-белого состояния в цветное, img:hover 2-ая строка), но после отвода от элемента мгновенно возвращается в чёрно-белое. Как реализовать плавный переход? 2) Я использовал плагин fullpage. Он довольно массовый, думаю сможете помочь. Почему-то после создания div элемента на второй странице сам этот элемент встаёт по центру. Да, я мог бы использовать margin-top: (0-50%), но хотелось бы узнать почему это реализованно именно так. Заранее огромное спасибо. Код:
Код:
|
22.02.2019, 17:23 | #2 |
Старожил
Регистрация: 09.01.2008
Сообщений: 26,229
|
я не специалист по HTML/CSS
поэтому предложу добавить transition в тег img Код:
|
22.02.2019, 17:42 | #3 |
Регистрация: 21.02.2019
Сообщений: 4
|
|
22.02.2019, 19:12 | #4 |
Старожил
Регистрация: 12.11.2010
Сообщений: 8,568
|
Можно, вот нажмите на этот значок:
2019-02-22_21-09-43.png Но пока ваш голос будет равен нулю: http://www.programmersforum.ru/showt...20#post1769902 |
23.02.2019, 15:33 | #5 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Трансишен довольно тяжелая операция, поэтому я рекомендую ей ставить только то свойство, которое должно изменяться (сделано) и только на конкретный элемент или класс (не сделано).
В данном случае трансишен будет лепиться ко всем тегам <img/>, это плохо. Старайтесь не использовать селекторы по тегу. Почитайте про БЭМ. UPD: трансишен на ховер стоял, когда ховер пропадает, то у него отключается и трансишен, поэтому анимация обратно не срабатывает. Анимации можно комбинировать: на :hover ставить 1 эффект, а обратно -- другой. Это первое, что хотел добавить. Второе: полторы минуты слишком долго. За это время и уснуть можно. Зависит, конечно от типа... Но в данном случае я бы поставил 150-200 миллисекунд. Ориентируйтесь на среднюю скорость реакции человека: 250мс. Мозг юзера успеет заметить анимацию, но по завершении уже будет готов реагировать на ее результат.
Alar, верни репу!
Последний раз редактировалось Naive; 23.02.2019 в 15:48. |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
После выполнения JS, не работает :hover | Stanislav123 | JavaScript, Ajax | 1 | 01.02.2019 18:20 |
Анимация Поплавка как реализовать? | KWN, lnc | WordPress и другие CMS | 1 | 25.06.2012 00:21 |
анимация, реализовать замену цвето | romanie | Помощь студентам | 2 | 17.05.2012 04:07 |
google maps kml события hover & click | Naive | JavaScript, Ajax | 1 | 28.12.2011 09:41 |
JQuery! Анимация, Как увеличить картинку так, чтоб она не смещалась? | AlienNation | JavaScript, Ajax | 2 | 05.10.2011 00:38 |