» »

Стильное со звуком оповещение ЛС для ucoz


В первые вижу такой скрипт по дизайну и главное сразу срабатывает Стильное со звуком оповещение ЛС для ucoz которое выполнено в светлом оттенке. Отлично подойдет как на белый так и на совершенно другие гаммы цвета. Вы его получите, находясь на сайте на любом модуле или странице. И идет с ним само изображение пользователя в окружности и сама тема, если вам некогда читать, то вы наводите на его курсор и появляется крестик, что можете отменить. Если открыть, то только один клик и переходите непосредственно к написанному.

Красивое со звуком оповещение ЛС для ucoz



Когда проверял, думал как обычно будет появляться. Но мои ожидание не оправдались и оно появилось в верхнем левом углу почти, немного ниже. Но когда еще сопровождал звук, тогда понял, отличное решение для любого сайта будет. Здесь показано с закруглением и без него, все вы можете сделать и настроить сами в коде "margin-bottom: 90px;" за что и отвечает он. Так очень необычное по своим стилям и вообще оригинальное по дизайну.

Установка:

Первое, это подключаем API в Общих настройках, которые находятся в админ панели. И потом код нужно поставить вверх или в низ, как сделал.

Код
<!--Оповещение ЛС-->  

  <?if($USER_LOGGED_IN$)?>  
  <div id="one_pm" class="bounceIn animated"></div>  
  <script type="text/javascript">  
  var no_ava = 'http://zornet.ru/ZORNET/Fail/sagte/nophoto.png';  
  var this_mess_link = '';  
  function m_reload() {  
  if($('#one_pm').html()=='') {  
  $.get('/index/14?'+Math.random(), function (data) {  
  $('b.unread', data).each(function (i,index) {  
  getLink = $(index).parent().attr("href");  
  this_mess_link = getLink;  
  getText = $(index).parent().text();  
  getAuthorName = $(index).parent().parent().children('a').eq(1).text();  
  getAuthor = $(index).parent().parent().children('a').eq(1).attr("href");  
  getID = '#one_pm'+i;  
  var xml = $.ajax({  
  type: 'GET',  
  url: '/api/index/8-0-'+getAuthorName.replace('-','~'),  
  dataType: 'xml',  
  async: false  
  }).responseText;  
  var urlAvatar = $(xml).find('struct:first member:contains("USER_AVATAR")').find('string').text();  
  var userName = $(xml).find('struct:first member:contains("USER_NAME")').find('string').text();  
  $('#one_pm').html('<div id="one_pm'+i+'" style="display:none" class="bounceIn animated">'  
  +'<div class="h_newpm">'  
  +'<div class="h_npin" align="center"><a class="h_nover" href="'+getLink+'"></a>'  
  +'<div class="h_nptitle">Новое сообщение</div><span class="h_del" onclick="h_del();return false;"></span>'  
  +'<div class="h_npl"><div class="h_npimg"><a href="#" id="hnp_avatar"></a></div></div>'  
  +'<div class="h_npr"><a href="#" id="hnp_author"></a> <a id="hnp_text" href="'+getLink+'">'+getText+'</a></div>'  
  +'</div>'  
  +'</div>'  
  +'</div><div id="hnp_sound"></div>');  
  $(getID+' #hnp_author').attr('href', getAuthor);  
  $(getID+' #hnp_avatar').attr('href', getAuthor);  
  $(getID+' #hnp_author').html(userName);  
  $(getID+' #hnp_avatar').html('<img src="'+ (urlAvatar == '' ? no_ava : urlAvatar )+'">');  
  setTimeout(function(){$(getID).slideDown(200);},200);  
  $('#hnp_sound').html('<audio src="http://zornet.ru/ZORNET/Fail/sagte/gently.mp3" volume="1" autoplay></audio>');setTimeout(function(){$('#hnp_sound').html('')},2000);  
  });  
  });  
  }  
  }  
  function h_del() {$('#one_pm').fadeOut(200,function(){$('#one_pm').html('<i></i>')});$.get(this_mess_link);}  
  m_reload();setInterval(function(){m_reload()}, 15000);  
  </script>  
  <style type="text/css">  
  #one_pm { position: fixed;  
  top: 80px;  
  cursor: pointer;  
  font-family: Tahoma,Arial,Verdana,sans-srif;  
  width: 300px;}  
  #hnp_sound {position:absolute;top:-1000px;left:-1000px}  
  #hnp_author span {display:none}  
  .h_newpm { position: relative;  
  height: 110px;  
  margin-bottom: 20px;  
  color: #555;  
  padding: 8px 8px!important;  
  background: #fff!important;  
  border-radius: 90px;}  
  .h_newpm #hnp_author {color:#555;font-weight:bold;text-decoration:none;}  
  .h_newpm #hnp_author:hover {color:#555;text-decoration:underline}  
  .h_npin {padding:5px;padding-top:5px}  
  .h_nptitle {color:#555;font-size:13px;font-weight:bold;padding-bottom:0px}  
  .h_npimg {width:57px;height:57px;overflow:hidden;-webkit-border-radius: 90px;-moz-border-radius:90px;border-radius: 90px;}  
  .h_npimg img {width:100%;-webkit-border-radius: 90px;-moz-border-radius: 90px;border-radius: 90px;}  
  .h_npl {position:absolute;left:13px;top:45px;z-index:3;width:70px}  
  .h_npr {position:absolute;left:84px;top:45px;z-index:3;color:#555;font-size:13px;padding-right:14px}  
  .h_npr #hnp_text, .h_npr #hnp_text:hover {display:block;text-decoration:none;color:#555}  
  .h_newpm:hover .h_del {display:inline-block;}  
  .h_del {display: none;cursor: pointer;position: absolute!important;right: 10px;top: 40px;margin: 0!important;z-index: 10014!important;width: 36px!important;height: 36px!important;background: url(http://zornet.ru/ZORNET/Fail/sagte/ajax_p.png) no-repeat!important;}  
  .h_del:hover {background-position:0px 18px}  
  .h_nover {position:absolute;top:0px;left:0px;width:100%;height:100%;}  
  .animated {  
  -webkit-animation-duration: 1s;  
  animation-duration: 1s;  
  -webkit-animation-fill-mode: both;  
  animation-fill-mode: both;  
  }  

  .animated.infinite {  
  -webkit-animation-iteration-count: infinite;  
  animation-iteration-count: infinite;  
  }  

  .animated.hinge {  
  -webkit-animation-duration: 2s;  
  animation-duration: 2s;  
  }  

  /*the animation definition*/  

  @-webkit-keyframes bounceIn {  
  0%, 100%, 20%, 40%, 60%, 80% {  
  -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);  
  transition-timing-function: cubic-bezier(0.215, .61, .355, 1)  
  }  
  0% {  
  opacity: 0;  
  -webkit-transform: scale3d(.3, .3, .3);  
  transform: scale3d(.3, .3, .3)  
  }  
  20% {  
  -webkit-transform: scale3d(1.1, 1.1, 1.1);  
  transform: scale3d(1.1, 1.1, 1.1)  
  }  
  40% {  
  -webkit-transform: scale3d(.9, .9, .9);  
  transform: scale3d(.9, .9, .9)  
  }  
  60% {  
  opacity: 1;  
  -webkit-transform: scale3d(1.03, 1.03, 1.03);  
  transform: scale3d(1.03, 1.03, 1.03)  
  }  
  80% {  
  -webkit-transform: scale3d(.97, .97, .97);  
  transform: scale3d(.97, .97, .97)  
  }  
  100% {  
  opacity: 1;  
  -webkit-transform: scale3d(1, 1, 1);  
  transform: scale3d(1, 1, 1)  
  }  
  }  

  @keyframes bounceIn {  
  0%, 100%, 20%, 40%, 60%, 80% {  
  -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);  
  transition-timing-function: cubic-bezier(0.215, .61, .355, 1)  
  }  
  0% {  
  opacity: 0;  
  -webkit-transform: scale3d(.3, .3, .3);  
  -ms-transform: scale3d(.3, .3, .3);  
  transform: scale3d(.3, .3, .3)  
  }  
  20% {  
  -webkit-transform: scale3d(1.1, 1.1, 1.1);  
  -ms-transform: scale3d(1.1, 1.1, 1.1);  
  transform: scale3d(1.1, 1.1, 1.1)  
  }  
  40% {  
  -webkit-transform: scale3d(.9, .9, .9);  
  -ms-transform: scale3d(.9, .9, .9);  
  transform: scale3d(.9, .9, .9)  
  }  
  60% {  
  opacity: 1;  
  -webkit-transform: scale3d(1.03, 1.03, 1.03);  
  -ms-transform: scale3d(1.03, 1.03, 1.03);  
  transform: scale3d(1.03, 1.03, 1.03)  
  }  
  80% {  
  -webkit-transform: scale3d(.97, .97, .97);  
  -ms-transform: scale3d(.97, .97, .97);  
  transform: scale3d(.97, .97, .97)  
  }  
  100% {  
  opacity: 1;  
  -webkit-transform: scale3d(1, 1, 1);  
  -ms-transform: scale3d(1, 1, 1);  
  transform: scale3d(1, 1, 1)  
  }  
  }  

  .bounceIn {  
  -webkit-animation-name: bounceIn;  
  animation-name: bounceIn  
  }  
   
  </style>  
  <?endif?>


PS - само звучание от ICQ, а как на пианино взяли одну ноту, если был бы слух, даже возможно сказал, какая она.

Источник: Kanavas.at.ua
12.10.2015 Просмотров: 599 Комментарий: (21)

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

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

Комментарий: 21
FeStemBer
FeStemBer 12.10.2015 19:131
0
Раньше у меня стояло оповещение от Ураа и оно как кто знает по дизайну темное было и есть и даже немного прозрачное. Но это больше понравилось и пока оставил его.
Kosten
Kosten 12.10.2015 19:192
0
Tventum, понял о каком личном сообщение говорите, его тоже проверял и работает отлично. Если кому нужно оно, то вы здесь найдете его и там все также по подключению.

Это тоже хотел сделать прозрачным, но потом подумал, кому нужно тот сделает, оно изначально вообще круглое было и идет сейчас, там выставлено 90 пикселей. Но поставил на 5, что на первом скрине. Потом опять на место цифры прописал и можно уже увидит изображение в самом материалею
Brung
Brung 12.10.2015 20:123
0
Tventum, все правильно, просто что то хочется оригинальное, установил, пусть будет сильно закругленное, не стал выпрямлять, звук нормальный, хоть не эта кукушка.
Kosten
Kosten 12.10.2015 20:144
0
Brung, но вы дали с кукушкой.
AnTron
AnTron 12.10.2015 20:175
0
Думаю не кто не будет оспаривать, что по своим функциям, они схожи как 2 капли воды. Но вот дизайн совершенно разный. И это правильно, что есть второе такое сообщение, а значит будет выбор.
ZruBkul
ZruBkul 12.10.2015 20:226
0
Светлые или белые, сами по сути своей очень редкие, а здесь его можно трансформировать, это здорово. Но старое и проверенное как то лучше, если только дизайн поменять и он должен быть серым, так как можно увидит, что на светлом фоне как то не очень смотрится. Но и здесь есть выход, само окно немного сделать под другой оттенок или прозрачным, но это трудно представить, светлое и прозрачное, но все возможно.
Kosten
Kosten 12.10.2015 20:287
0
На темном дизайне сайта, прозрачное и в тоже светлое оповещение, думаю это будет что то. Не скажу что оригинальное а точно креативное направление и что про светлый дизайн, там нормально смориться. И если у пользователя нет Avatar, то здесь стоит ссылка на другое изображение.
FeStemBer
FeStemBer 12.10.2015 21:148
0
У таких скриптов, только один минус, это больше обычного код.
Kosten
Kosten 12.10.2015 21:189
0
Но это всегда, если скрипт идет с множеством функциями, то и код основном больше стандартного, похожего материала, где меньше функционала.
kos
kos 12.10.2015 22:3710
0
Лично мне этот скрипт очень нравится! =)
larisa
larisa 13.10.2015 12:0711
0
классный скрипт! просьба: может, кто-нибудь подскажет... как сделать , чтобы это окошко выскакивало не только на главной странице?
Kosten
Kosten 13.10.2015 12:1012
0
larisa, в низ сайта поставить и должно на всех страницах показывать.
Kosten
Kosten 13.10.2015 12:1613
+1
Проверил еще раз, работает на всех страницах, вот скрин с форума, вообщем куда не зайдешь, оно покажется. Если скрипт, разместить в низ или вверх сайта.

larisa
larisa 13.10.2015 12:1914
0
Kosten, спасибо. приду с работы- сделаю... огромное спасибо!
Kosten
Kosten 13.10.2015 12:1915
0
Всегда, пожалуйста!
Kosten
Kosten 13.10.2015 19:1016
+1
Попробую переделать в дизайне.
larisa
larisa 15.10.2015 09:1117
+1
Kosten, хочу ещё раз Вас поблагодарить за скрипт.... пользователи в восторге..... поставила код, как Вы и сказали- всё работает( на любой странице сайта)- СПАСИБО ВАМ ОГРОМНОЕ!!!!
Kosten
Kosten 15.10.2015 11:5618
0
Всегда пожалуйста, обращайтесь!
McRamzes
McRamzes 20.10.2015 00:2619
0
Спасибо за скрипт
1 2 »
avatar