Опубликовано Оставить комментарий

JavaScript анимация кнопки вызова диспетчера

JavaScript анимация кнопки вызова диспетчера
JavaScript анимация кнопки вызова диспетчера

JavaScript анимация кнопки вызова диспетчера или менеджера через Skype или другой мессенджер выполнятся через таймеры JavaScript. Верстаем заготовку кнопки, позиционируем её (в нашем случае нижняя правая часть страницы); в атрибуте href прописываем псевдопротокол skype и название учётной записи, на которую будет осуществлён звонок.

JavaScript анимация кнопки

Готовый пример JavaScript анимации кнопки

HTML-код кнопки вызова диспетчера:

<a class="btnphone" href="skype:ЛОГИНВСКАЙПЕ?call">☎</a>

CSS-код кнопки:

a{
  text-decoration: none;
  display: block;
  position: absolute;
  font-size: 70px;
  background-color: #369;
  color: #fff;
  width: 110px;
  height: 110px;
  text-align: center;
  line-height: 110px;
  border-radius: 110px;
  bottom: 20px; right: 20px;
}

JavaScript для анимации кнопки:

var btnPhone = document.querySelectorAll(".btnphone")[0], 
flag = true, i = 1, tick = 100;
var step = 0.05; 

function anima(){
  if( i > 0.2 && flag){
    i -= step;
  } else flag = false;
  
  if (i <= 1 && !flag){
    i += step;
  } else flag = true;
  
  btnPhone.style.opacity = i;
  setTimeout(anima, tick);
}
anima();

Анимацию кнопки можно сделать и при помощи CSS-свойства animation, которое позволяет настроить время анимации, количество кадров, какие CSS-свойства при анимации меняются и т.д.

Добавить комментарий