ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Эффект пульсации или мерцания на CSS3

Эффект пульсации или мерцания на CSS3

Эффект пульсации или мерцания на CSS3
Данный скрипт очень подойдёт для реалистичности эффекта онлайн или оффлайн статусу пользователя на вашем сайте без использования gif изображений. Так что на темном сайте будет отлично смотреться по визуализация и вам не нужно буде выставлять кнопки. Так как этот скрипт заменит и пользователь будет видеть, кто онлайн и находится на интернет ресурсе. В верхней части страницы возле никнейма пользователей стоит вот такая иконка (видна гостям). Если посмотреть на неё, то она мерцает. При статусе ONline она мерцает зеленым цветом. На ней мерцание заметнее. Дело не в этой ссылке, а в статусе пользователя.

1. Сам CSS код эффекта

Код
.pulse {  
  animation-name: pulse;  
  -webkit-animation-name: pulse;  
  animation-duration: 1.5s;  
  -webkit-animation-duration: 1.5s;  
  animation-iteration-count: infinite;  
  -webkit-animation-iteration-count: infinite;  
}  
@keyframes pulse {  
  0% {  
  transform: scale(0.9);  
  opacity: 0.7;  
  }  
  50% {  
  transform: scale(1);  
  opacity: 1;  
  }  
  100% {  
  transform: scale(0.9);  
  opacity: 0.7;  
  }  
}  
   
@-webkit-keyframes pulse {  
  0% {  
  -webkit-transform: scale(0.95);  
  opacity: 0.7;  
  }  
  50% {  
  -webkit-transform: scale(1);  
  opacity: 1;  
  }  
  100% {  
  -webkit-transform: scale(0.95);  
  opacity: 0.7;  
  }  
}  


Если хотим увеличить или уменьшить мерцание статуса, то можно просто заменить переменные scale( на свои );

2. Ну соответственно html

Код
<span class="pulse"><img title="В сети" src="/icon/online.png"></span>


Для сайтов uCoz можно использовать условные операторы

Код
<?if($USERNAME$=$_USERNAME$)?><span class="pulse"><img title="В сети" src="/icon/online.png"></span><?else?><img src="/icon/offline.png" title="Не в сети" alt="Не в сети"><?endif?>


PS- Данный скрипт очень подойдёт для реалистичности эффекта онлайн/оффлайн статусу пользователя на вашем сайте без использования gif изображений. Пример применения - Страница пользователей. В верхней части страницы возле никнейма стоит вот такая иконка (видна гостям). Если посмотреть на неё, то она мерцает.
2016-11-06 Просмотров: 5174 Комментарий: (18)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 18
iMadeas
iMadeas 2016-11-06 14:461
0
Для наглядности временно добавили эффект мерцания статусу OFFLINE здесь
Надеюсь кому-нибудь пригодится.
Kosten
Kosten 2016-11-06 16:382
0
iMadeas, приветствую, не могу понять, а что должно мерцать, и ссылка для чего в коде?
iMadeas
iMadeas 2016-11-06 16:563
0
Зачем Вы заменяете изображение? Дело не в этой ссылке, а в статусе пользователя.
Kosten
Kosten 2016-11-06 17:144
0
Все понятно, изменю сейчас.
Kosten
Kosten 2016-11-06 17:245
0
Описание с комментария взял, и в материал залил, просто так понятнее будет.
Kosten
Kosten 2016-11-06 20:5518
0
Просто сделал, чтоб понятие было, и взял сайта, который представлен был.
iMadeas
iMadeas 2016-11-06 17:326
+1
Дмитрий, напишите лучше так:

Данный скрипт очень подойдёт для реалистичности эффекта онлайн/оффлайн статусу пользователя на вашем сайте без использования gif изображений. Пример применения - Страница пользователей. В верхней части страницы возле никнейма стоит вот такая иконка (видна гостям). Если посмотреть на неё, то она мерцает.

...и почистите комментарии, раз в них нет надобности
Kosten
Kosten 2016-11-06 17:427
0
iMadeas, с материалом не знаком, а вы его в комментариях описали, так просто с комментария вашего взял и ваше же описание поставил.
Сафрон
Сафрон 2016-11-06 18:118
+2
А ссылки где, но одна кнопка есть, а вторая, когда онлайн.
iMadeas
iMadeas 2016-11-06 20:3015
0
ссылки на что? или вам нужны ссылки на картинки онлайн/офлайн? у каждого сайта они свои же.
ucozmental
ucozmental 2016-11-06 19:239
0
И главное на сайте кнопки не скопируешь, самому перекрасить, сейчас попробую, если получится, то закину.
ucozmental
ucozmental 2016-11-06 19:3110
0
Вообщем как получилось, зеленую кнопку онлайн перекрасил, можете копировать и ставить в код. И вторую в алый оттенок вывел, думаю так правильно будет.

iMadeas
iMadeas 2016-11-06 20:3316
0
Вы не можете найти в интернете простые иконки для статусов 10х10 или 16х16?
Webmaster32
Webmaster32 2016-11-06 20:0711
0
Установил также себе на сайт вот что получилось Страница пользователя
Kolinkor
Kolinkor 2016-11-06 20:0912
0
Прикольно смотрится, если еще цвету добавить, а так оригинально.
Kosten
Kosten 2016-11-06 20:1113
0
А где пульсация или мерцание, хотя и раскачка по сторонам нормально.
Webmaster32
Webmaster32 2016-11-06 20:1614
0
Ну у меня то текстовый вариант онлайн/офлайн вот видно и нет пульсации только раскачка. И тем более я только стили добавил, сам код я не прописывал.
1 2 »
avatar