Страница 1 из 11
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Мигающая кнопка вверх (Пульсирующая кнопка вверх на сайте)
Мигающая кнопка вверх
Angerfist
Дата: Воскресенье, 18.09.2016, 13:10 | Сообщение # 1
Vip
Сообщений:623
Награды: 18


У многих на сайте стоит кнопка вверх для быстрого возврата к началу страницы, по себе замечаю что иногда забываю и не обращаю внимание на эти кнопки пролистывая контент. Упорно прокручивая страницу сайта с помощью колёсика мыши я убил механизм прокрутки точно у пару мышек ). Этой анимацией просто добавляем напоминание что на сайте есть такая кнопка и лучше воспользоваться ей) Привязываем эти стили анимации к кнопке вверх, время анимации поставил 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.09.2016, 13:13
Kosten
Дата: Воскресенье, 18.09.2016, 13:58 | Сообщение # 2
Администраторы
Сообщений:12706
Награды: 39


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

Brung
Дата: Воскресенье, 18.09.2016, 14:03 | Сообщение # 3
Пользователи
Сообщений:112
Награды: 0


Kosten, так в стилях вначале стоит стиль .hover-up img что думаю как раз под картинку, в нашем случай стрелку вверх.
tsakonter
Дата: Воскресенье, 18.09.2016, 14:12 | Сообщение # 4
Пользователи
Сообщений:152
Награды: 0


Это просто как предупреждение что ли, что у тебя есть кнопка, а ты все на мышке колесо накручиваешь.
FeStemBer
Дата: Воскресенье, 18.09.2016, 14:33 | Сообщение # 5
Проверенные
Сообщений:296
Награды: 1


Если пульсация, то должно красиво смотреться, основном такой эффект на телефон идет.
Angerfist
Дата: Воскресенье, 18.09.2016, 15:23 | Сообщение # 6
Vip
Сообщений:623
Награды: 18


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
Kosten
Дата: Воскресенье, 18.09.2016, 15:27 | Сообщение # 7
Администраторы
Сообщений:12706
Награды: 39


Angerfist, сейчас за ценим, все нормально скрин скину.

Kosten
Дата: Воскресенье, 18.09.2016, 15:33 | Сообщение # 8
Администраторы
Сообщений:12706
Награды: 39


Вообщем чтоб понимали, не знаю как на GIF сделал так. А это кнопка просто с начало тухнет а потом обратно равномерно набирает изначальный цвет, и все идет не быстро, но заметить можно нормально.

Прикрепления: 4240025.jpg(3Kb)


Angerfist
Дата: Воскресенье, 18.09.2016, 15:36 | Сообщение # 9
Vip
Сообщений:623
Награды: 18


Kosten, время анимации меняй как нравится, я писал что 8 секунд я выбрал чтобы не особо раздражало)

No regrets
Kosten
Дата: Воскресенье, 18.09.2016, 15:41 | Сообщение # 10
Администраторы
Сообщений:12706
Награды: 39


Angerfist, думал с пульсацией будет. Но и так реально заметно все.

Angerfist
Дата: Воскресенье, 18.09.2016, 16:24 | Сообщение # 11
Vip
Сообщений:623
Награды: 18


Kosten, кнопка с пульсацией тут, там главное уменьшить размеры, поменять на свой цвет и привязать уже к кнопке вверх.

No regrets
Kosten
Дата: Воскресенье, 18.09.2016, 16:30 | Сообщение # 12
Администраторы
Сообщений:12706
Награды: 39


Стилей очень много, лучше этот.

Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Мигающая кнопка вверх (Пульсирующая кнопка вверх на сайте)
Страница 1 из 11
Поиск: