Кнопка обратного звонка – анимация css плюс JS

Статья – ответ на вопросы в комментариях (письмах).

Поступают вопросы о том, как установить анимированную кнопку обратного звонка на своём сайте: то есть требуется бегающая по экрану анимированная кнопка, например, картинка телефонной трубки, нажав на которую, всплывает модальное окно с формами связи, или же пользователя перебрасывает на некую целевую страницу сайта.

В самом деле подобную анимированную кнопку обратного звонка возможно приспособить на что угодно: у меня, например, услуги Скайп – но возможно использовать по типу кнопки “наверх”, либо поместить в её обработку какую-то полезную информацию для пользователя… Да мало ли у нас фантазии…

Установить кнопку обратного звонка, дело в принципе не очень сложное!

Сегодня установим кнопку обратного звонка в следующем принципе: анимация (пульсация с перемещением по окну монитора) – css плюс JS:

Статья рассчитана на более-менее уверенных в работе с сайтом админов, так что особо расталковывать не стану… по сути, в описанной ниже установке кнопки обратного звонка нет ничего сложного, всего 4 простых шага, и у вас на сайте появится кнопка обратного звонка с элементами анимации (с пульсирующим эффектом).

В комментариях к кодам даны кое-какие пояснения, так что…

скрипт плавающей кнопки обратного звонка – css плюс JS

Начнём прикрутку кнопки обратного звонка с создания простенького js файла.

пройдём по такому пути: (в шаблонах пути подключения js файлов могут отличаться) – ничего страшного, главное принцип.

/wp-content/themes/тема/js/

…если в корне вашей темы нет папки JS, в которой хранятся файлы сценариев… создайте её с именем js.

Далее… в папке js создаём файл с именем, к примеру, skypeats.js

получится примерно так:

/wp-content/themes/тема/js/skypeats.js

…в этот файл помещаем такой чудный код JS:

$(document).ready(function(){
$(".skype_skypeats.jump").css({"position":"absolute", "top":"-100px", "right":"50px", "transition": "top .9s cubic-bezier(.65, 1.95, .03, .32) 0.5s"});
// 0.41, 0.01, 0.57, 1.01 - это более плавно двигается картинка = отступ от правого края экрана "right":"50px" = top .9s подпрыгивание значка
skyForm_Return_Button ();

$(window).scroll(function(){
skyForm_Return_Button();
});
$(window).resize(function(){
skyForm_Return_Button();
});

function skyForm_Return_Button (){
var r=getPageSize();docW=r[0];docH=r[1];winW=r[2];winH=r[3];
var y=$(window).scrollTop(); y=y+winH-72;// от -155 ОТСТУП ОТ НИЗА
$(".skype_skypeats.jump").css({"position":"absolute", "top": y+"px", "right": "50px"});
}
//определение высоты и ширины документа, а также высоты и ширины окна браузера
function getPageSize(){
var xScroll, yScroll;
// старт
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // все, кроме Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else if (document.documentElement && document.documentElement.scrollHeight > document.documentElement.offsetHeight){ // Explorer 6 strict mode
xScroll = document.documentElement.scrollWidth;
yScroll = document.documentElement.scrollHeight;
} else { // Explorer Mac... также работал бы в Mozilla и Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
// Explorer
var windowWidth, windowHeight;
if (self.innerHeight) { // все, кроме Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // другие версии Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport = для небольших страниц с общей высотой, меньшей высоты окна просмотра
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport = для небольших страниц, общая ширина которых меньше ширины окна просмотра
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
return [pageWidth,pageHeight,windowWidth,windowHeight];
} });

В верхних строках кода (и в некоторых последующих) даны пояснения к значениям.

…также в первых строчках задаём некоторые дизайнерские значения кнопки (внешний вид и поведение иконки обр. звонка).

подключим js скрипт обработчик плавающей кнопки обратного звонка

Предположительно что у вас в файлах сайта уже подключена библиотека jquery:

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

<script src="/wp-content/themes/тема/js/jquery-1.12.4.min.js"></script>

…либо этот вариант подключения библиотеки с серверов Google:

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>

…если jquery не подключена – подключите (как? описано по ссылке ниже)

А мы продолжаем:

Следующим шагом – 2 – будем подключать в подвале (в файле footer.php) файл скрипта, который создали: (вот статья, которая повествует о наиболее целесообразных подключениях файлов).

<script> if (document.body.clientWidth>940) {document.write("<script src='/wp-content/themes/тема/js/skypeats.js'><\/script>");}</script>

обратите внимание: подключение файла скрипта кнопки звонка на сайт обусловлено document.body.clientWidth>940 – это для того, чтобы скрипт отключался на маленьком экране, например, телефона с расширением менее 940px.

В пути подключения пропишите имя своей темы.

…чуть ниже строки подключения скрипта js, добавим (элемент разметки для пульсирующей кнопки обратного звонка) HTML обработку выводимой на экран кнопки – всё это также располагаем в подвале footer.php где-то перед закрывающим тегом </body>: (html значка возможно разместить и в шапке сайта header.php – всё в зависимости от желания расположения кнопки).

<div class="skype_skypeats jump">
<div class="skype_shadow"></div>
<div class="skype_fone"><span><a title="Skype" href="//mihalica.ru/адрес" target="_blank" rel="noopener">Skype</a></span></div>
</div>

В нашем примере, клик по кнопке будет отправлять пользователя на требуемую страницу…

Соответственно в href – задаём нужную ссылку…

Примеры модальных окон, где будут размещены какие-то данные, разберём в следующих статьях.

организуем стили CSS кнопки обратного звонка

Шаг – 3.

Зададим обработку внешнего вида кнопки обратного звонка: анимацию – пульсирующий эффект, цвет, расположение… видимость кнопки.

Всего-то поместите эти селекторы куда-то к себе в файл стилей style.css… (а при желании немного подредактируйте).

.skype_skypeats .skype_shadow{border-color:#008594;margin:-84px -10px} // убираем с экрана иконку, если скрипт js не подключен (телеф.)
.skype_skypeats .skype_shadow2{border-color:#fff;margin:-84px -10px}
.skype_skypeats .skype_fone,.skype_skypeats .skype_fone2{background-color:#0088BD;margin:-84px -10px}
.skype_skypeats{z-index:99998;width:60px;height:60px;opacity:.9}
.skype_skypeats:hover{opacity:1}
.skype_skypeats .skype_fone{background-position:center center;background-size:100% 100%;width:60px;height:60px;border-radius:50%;position:absolute;display:table;/*color:transparent;*/font-family:Arial;font-size:14px;text-align:center;font-stretch:ultra-condensed;animation-name:pulse;animation-duration:5s;animation-iteration-count:infinite}
.skype_skypeats .skype_fone2{background-position:center center;background-size:100% 100%;width:55px;height:55px;border-radius:50%;position:absolute;display:table;color:transparent;font-family:Arial;font-size:14px;text-align:center;font-stretch:ultra-condensed;animation-name:pulse;animation-duration:1s;animation-iteration-count:infinite}
.skype_skypeats .skype_fone span{display:table-cell}
.skype_skypeats .skype_fone2 span{display:table-cell;vertical-align:middle}
.skype_skypeats .skype_fone:hover,.skype_skypeats .skype_fone2:hover{color:#fff;background-image:none;animation-name:none;cursor:pointer;opacity:1}
.skype_skypeats .skype_fone span a,.skype_skypeats .skype_fone2 span a{display:table-cell;vertical-align:middle;opacity:0}
.skype_skypeats .skype_fone:hover a,.skype_skypeats .skype_fone2:hover a{color:#fff;background-image:none;animation-name:none;cursor:pointer;text-decoration:none;opacity:1}
.skype_skypeats .skype_shadow,.skype_skypeats .skype_shadow2{position:absolute;top:-1px;left:-1px;width:56px;height:56px;border-radius:50%;border-style:solid;border-width:3px;animation-name:shadow;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease-out}@keyframes pulse{0%{width:60px;height:60px;top:0px;left:0px}5%{width:66px;height:66px;top:-3px;left:-3px}10%{width:60px;height:60px;top:0px;left:0px}15%{width:66px;height:66px;top:-3px;left:-3px}20%{width:60px;height:60px;top:0px;left:0px}25%{width:66px;height:66px;top:-3px;left:-3px}30%{width:60px;height:60px;top:0px;left:0px}59%{transform:rotate(0deg)}60%{transform:rotate(10deg)}65%{transform:rotate(-10deg)}70%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}80%{transform:rotate(10deg)}85%{transform:rotate(-10deg)}90%{transform:rotate(0deg)}100%{width:60px;height:60px;top:0px;left:0px}}@keyframes shadow{0%{top:0px;left:0px;width:56px;height:56px;opacity:.5}100%{top:-22px;left:-22px;width:96px;height:96px;opacity:0}}
.skype_skypeats .skype_fone,.skype_skypeats .skype_fone2{background-image:url(js/images/imag/skype-s.png)}
.skype_fone .tooltip,.skype_fone2 .tooltip{background-color:#deffda;text-indent:0}
.skype_fone2 .tooltip{border:none}
.skype_skypeats .skype_fone .tooltip{padding:0 5px;display:inline-block}
.skype_fone2 .tooltip.right{margin:0 -7px}

В строке селектора укажите путь до картинки обратного звонка или ещё чего-то…

background-image:url(js/images/imag/skype-s.png)

Обратите внимание на селекторы типа skype_fone2 и аналоги – этот селектор для того, если вы используете на сайте какую-то страницу с отличным от основного дизайном.

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

убираем кнопку обратного звонка на малых разрешениях экранов

Шаг – 4.

…после кода css, который дан выше, поместите такую строку CSS @media…

@media only screen and (max-width:940px){.skype_skypeats{display:none}}

это строка также служит для того, чтобы при отключенном скрипте JS (шаг – 2) убрать на экране с расширением менее 940px отображение значка кнопки обратного звонка – иначе иконка будет некрасиво болтаться без анимации.

940 – меняйте на требуемое вам значение.

Как эпилог:

Online консультация по настройкам и созданию сайтов на WordPress

Если что-то неясно – пишите, поясню…