• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Мигающая кнопка вверх (Пульсирующая кнопка вверх на сайте)
Мигающая кнопка вверх
Angerfist
 		Воскресенье, 18 Сентября 2016, 13:10 | Сообщение 1
Оффлайн
Vip
Сообщений:767
Награды: 21
« 253 »
У многих на сайте стоит кнопка вверх для быстрого возврата к началу страницы, по себе замечаю что иногда забываю и не обращаю внимание на эти кнопки пролистывая контент. Упорно прокручивая страницу сайта с помощью колёсика мыши я убил механизм прокрутки точно у пару мышек ). Этой анимацией просто добавляем напоминание что на сайте есть такая кнопка и лучше воспользоваться ей) Привязываем эти стили анимации к кнопке вверх, время анимации поставил 8 секунд (подумал это не будет слишком навязчиво).

Код

.hover-up img {
opacity: 0;
animation: hover 8s linear infinite;
-webkit-animation: hover 8s linear infinite;
-moz-animation: hover 8s linear infinite;
-o-animation: hover 8s linear infinite;
-ms-animation: hover 8s linear infinite;
}
@keyframes hover {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
@-webkit-keyframes hover {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
@-moz-keyframes hover {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
@-o-keyframes hover {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
@-ms-keyframes hover {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}


Также можно сделать анимацию не постоянной, для этого вместо параметра infinity вписываем просто кол-во (к примеру
animation: hover 8s linear 3;) а также менять этапы прозрачности.
No regrets

Сообщение отредактировал
Angerfist - Воскресенье, 18 Сентября 2016, 13:13
Страна: (RU)
Kosten
 		Воскресенье, 18 Сентября 2016, 13:58 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Angerfist, это у кого кнопка с изображение на ссылке идет и тому подойдет, просто здесь на сайте попробовал, и не чего не одного эффекта.
Страна: (RU)
Kolinkor
 		Воскресенье, 18 Сентября 2016, 14:03 | Сообщение 3
Оффлайн
Vip
Сообщений:306
Награды: 1
« 7 »
Kosten, так в стилях вначале стоит стиль .hover-up img что думаю как раз под картинку, в нашем случай стрелку вверх.
Страна: (RU)
tsakonter
 		Воскресенье, 18 Сентября 2016, 14:12 | Сообщение 4
Оффлайн
Пользователи
Сообщений:220
Награды: 0
« 8 »
Это просто как предупреждение что ли, что у тебя есть кнопка, а ты все на мышке колесо накручиваешь.
Страна: (RU)
FeStemBer
 		Воскресенье, 18 Сентября 2016, 14:33 | Сообщение 5
Оффлайн
Проверенные
Сообщений:355
Награды: 1
« 13 »
Если пульсация, то должно красиво смотреться, основном такой эффект на телефон идет.
Страна: (RU)
Angerfist
 		Воскресенье, 18 Сентября 2016, 15:23 | Сообщение 6
Оффлайн
Vip
Сообщений:767
Награды: 21
« 253 »
Kosten, у тебя конкретно вот такие стили:
Код

.scrollup{
width:40px;
height:40px;
position:fixed;
bottom: 297px;
right:25px;
display:none;
text-indent:-9999px;
background: url('http://zornet.ru/ZORNET/drental/vverkh.png') no-repeat;
opacity:0.5;}
.scrollup:hover{
opacity:0.7;
}

Отталкиваясь от них, привязываемся к классу scrollup, но вместо opacity:0.7; ставим opacity:0, и полностью убираем scrollup:hover. В итоге получаем;

Код

.scrollup{
width:40px;
height:40px;
position:fixed;
bottom: 297px;
right:25px;
display:none;
text-indent:-9999px;
background: url('http://zornet.ru/ZORNET/drental/vverkh.png') no-repeat;
opacity:0;
animation: hover 8s linear infinite;
-webkit-animation: hover 8s linear infinite;
-moz-animation: hover 8s linear infinite;
-o-animation: hover 8s linear infinite;
-ms-animation: hover 8s linear infinite;
}
@keyframes hover {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
@-webkit-keyframes hover {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
@-moz-keyframes hover {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
@-o-keyframes hover {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
@-ms-keyframes hover {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
No regrets
Страна: (RU)
Kosten
 		Воскресенье, 18 Сентября 2016, 15:27 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Angerfist, сейчас за ценим, все нормально скрин скину.
Страна: (RU)
Kosten
 		Воскресенье, 18 Сентября 2016, 15:33 | Сообщение 8
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Вообщем чтоб понимали, не знаю как на GIF сделал так. А это кнопка просто с начало тухнет а потом обратно равномерно набирает изначальный цвет, и все идет не быстро, но заметить можно нормально.
Прикрепления: 4240025.jpg (3.0 Kb)
Страна: (RU)
Angerfist
 		Воскресенье, 18 Сентября 2016, 15:36 | Сообщение 9
Оффлайн
Vip
Сообщений:767
Награды: 21
« 253 »
Kosten, время анимации меняй как нравится, я писал что 8 секунд я выбрал чтобы не особо раздражало)
No regrets
Страна: (RU)
Kosten
 		Воскресенье, 18 Сентября 2016, 15:41 | Сообщение 10
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Angerfist, думал с пульсацией будет. Но и так реально заметно все.
Страна: (RU)
Angerfist
 		Воскресенье, 18 Сентября 2016, 16:24 | Сообщение 11
Оффлайн
Vip
Сообщений:767
Награды: 21
« 253 »
Kosten, кнопка с пульсацией тут, там главное уменьшить размеры, поменять на свой цвет и привязать уже к кнопке вверх.
No regrets
Страна: (RU)
Kosten
 		Воскресенье, 18 Сентября 2016, 16:30 | Сообщение 12
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Стилей очень много, лучше этот.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Мигающая кнопка вверх (Пульсирующая кнопка вверх на сайте)
  • Страница 1 из 1
  • 1
Поиск: