! Запросто с WordPress - доступная ручная работа по правилам оптимального интернета
...здесь Ваша реклама.?.
Здравствуйте !
написано: — 
отредактировано: 2018-09-25
издатель:  в теме: Контент, шапка site: кодингS реплики: будьте первым в диалоге
 
Запросто с WordPress - студия ATs media fashion Reception WordPress golden

Кнопка обратного звонка — анимация 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 скрипт плавающей кнопки обратного звонка

 

 

 

к оглавлению $

подключим 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 — меняйте на требуемое вам значение.

 

 

 

Как эпилог:

 

 

Файл js сценария возможно переименовать на своё усмотрение (понятности для) — в этом случае не забудьте изменить имена селекторов css…

 

Всплывающая подсказка со значком «?» (как у меня на сайте) выполнена путём соединения пары скриптов в обработке JS, но об этом в следующих статьях…

 

Подписывайтесь на обновления блога…

 


подписка feedburner МИГ подписки - ВРЕМЯ знаний!!

 

 


подписка feedburner Online консультация по работе c сайтом на WordPress

 

 

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

 

 

 


Благодарности)) и вопросы в комментариях - помогу… в чём дюжу
А также Вы можете просто:
Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!
 ! самое читаемое:
   Подключение jQuery библиотеки от CDN Google — рационально!..   Что такое Яндекс? SEO оптимизация сайта за пределами Google   14 полезных сниппетов — код для наилучшей работы сайта WordPress — функции   Как перевести сайт на https — сертификат ssl — шифрование   Санкции вебмастера Яндекс (фатальные ошибки) — предупреждения, или что это?..   Включаем обслуживание gzip сжатия файлов на хостинге и в htaccess   Создаём плагин — добавочный файл функций — my-functions.php   Убираем циклическую ссылку h1 логотипа на главной странице   Как добавить свой новый (второй) сайт в Яндекс Директ   Яндекс ИКС — новый индекс качества сайта, заместо ТИЦ   Как самостоятельно установить в Notepad++ плагин Compare   Как исключить вывод (выборочно) поста с главной страницы сайта — регулировка в админке   Как к статье добавить блок ссылок на похожие по теме записи сайта   Продвижение контентом или нужно настраивать сайт — валидный код шаблона..?
↔ перетаскивайте ленту ↔
ещё статьи по теме:

смотреть ещё статьи в теме Контент, шапка site: кодингS
меточная навигация:


Комментарии © 0 к статье: Кнопка обратного звонка — анимация css плюс JS

Поделитесь соображениями: Ваши мысли очень важны! $ правила комментирования ©

Внимание! Обязательные поля помечены *

  отныне доступен плагин: privacy-policy ©

 необходимо принять правила конфиденциальности и пользовательского соглашения
Яндекс.Метрика
? основная линейка услугSkype консультацияЕсли вы выбрали для своего сайта WordPress и только-только начинаете изучать панель управления контентом, то этот вариант оnline консультаций — практически по любым вопросам — для вас! вопросы сюдаSkype онлайн