Статья — ответ на вопросы в комментариях (письмах). Поступают вопросы о том, как установить анимированную кнопку обратного звонка на своём сайте: то есть требуется бегающая по экрану анимированная кнопка, например, картинка телефонной трубки, нажав на которую, всплывает модальное окно с формами связи, или же пользователя перебрасывает на некую целевую страницу сайта. В самом деле подобную анимированную кнопку обратного звонка возможно приспособить на что угодно: у меня, например, услуги Скайп — но возможно использовать по типу кнопки «наверх», либо поместить в её обработку какую-то полезную информацию для пользователя… Да мало ли у нас фантазии… Установить кнопку обратного звонка, дело в принципе не очень сложное! Сегодня установим кнопку обратного звонка в следующем принципе: анимация (пульсация с перемещением по окну монитора) — css плюс JS:
Статья рассчитана на более-менее уверенных в работе с сайтом админов, так что особо расталковывать не стану… по сути, в описанной ниже установке кнопки обратного звонка нет ничего сложного, всего 4 простых шага, и у вас на сайте появится кнопка обратного звонка с элементами анимации (с пульсирующим эффектом).
В комментариях к кодам даны кое-какие пояснения, так что…
пройдём по такому пути: (в шаблонах пути подключения js файлов могут отличаться) — ничего страшного, главное принцип.
…если в корне вашей темы нет папки JS, в которой хранятся файлы сценариев… создайте её с именем js .
Далее… в папке js создаём файл с именем, к примеру, skypeats.js
…в этот файл помещаем такой чудный код JS:
$(document).ready(function()< $(".skype_skypeats.jump").css(); // 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(); > //определение высоты и ширины документа, а также высоты и ширины окна браузера 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]; > >);
В верхних строках кода (и в некоторых последующих) даны пояснения к значениям.
…также в первых строчках задаём некоторые дизайнерские значения кнопки (внешний вид и поведение иконки обр. звонка).
Предположительно что у вас в файлах сайта уже подключена библиотека jquery :
или так: это локальный вариант (т.е. если файл библиотеки загружен в корень темы, например)
…либо этот вариант подключения библиотеки с серверов Google:
…если jquery не подключена — подключите (как? описано по ссылке ниже)
Следующим шагом — 2 — будем подключать в подвале (в файле footer.php ) файл скрипта, который создали: (вот статья, которая повествует о наиболее целесообразных подключениях файлов).
обратите внимание: подключение файла скрипта кнопки звонка на сайт обусловлено document.body.clientWidth>940 — это для того, чтобы скрипт отключался на маленьком экране, например, телефона с расширением менее 940px .
В пути подключения пропишите имя своей темы.
…чуть ниже строки подключения скрипта js, добавим (элемент разметки для пульсирующей кнопки обратного звонка) HTML обработку выводимой на экран кнопки — всё это также располагаем в подвале footer.php где-то перед закрывающим тегом
: (html значка возможно разместить и в шапке сайта header.php — всё в зависимости от желания расположения кнопки).
В нашем примере, клик по кнопке будет отправлять пользователя на требуемую страницу…
Соответственно в href — задаём нужную ссылку…
Примеры модальных окон, где будут размещены какие-то данные, разберём в следующих статьях.
В строке селектора укажите путь до картинки обратного звонка или ещё чего-то…
Обратите внимание на селекторы типа skype_fone2 и аналоги — этот селектор для того, если вы используете на сайте какую-то страницу с отличным от основного дизайном.
Если разность дизайна кнопки обратного звонка не требуется, можно удалить эти селекторы.
убираем кнопку обратного звонка на малых разрешениях экранов
…после кода css, который дан выше, поместите такую строку CSS @media …
@media only screen and (max-width:940px)>
это строка также служит для того, чтобы при отключенном скрипте JS (шаг — 2) убрать на экране с расширением менее 940px отображение значка кнопки обратного звонка — иначе иконка будет некрасиво болтаться без анимации .
940 — меняйте на требуемое вам значение.
Файл js сценария возможно переименовать на своё усмотрение (понятности для) — в этом случае не забудьте изменить имена селекторов css…
Всплывающая подсказка со значком «?» (как у меня на сайте) выполнена путём соединения пары скриптов в обработке JS, но об этом в следующих статьях…
Подписывайтесь на обновления блога…
Online консультация по настройкам и созданию сайтов на WordPress
Если что-то неясно — пишите, поясню…
Связка Contact Form 7 с плагином CF7 Google Sheet Connecto (отправим данные из формы связи в таблицы Google)
Михаил ATs — владелец блога запросто с Вордпресс — в сети нтернет давным-давно.
. веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети. — заказы, вопросы. разработка.
Зачастую бывает, что нет возможности использовать библиотеки jQuery или Mootools из за их несовместимости. При этом хочется, чтобы на сайте была всплывающая форма обратного звонка. Это вполне выполнимо по средствам HTML и CSS.
При необходимости форму можно дополнить полями, и придать любой дизайн по средствам CSS.
Коммерция, коммерция и еще раз коммерция! Именно это направление сегодня активно набирает обороты в сайтостроении. И для сайтов такой тематики (впрочем, как и для всех остальных) важную роль играет юзабилити. Чтобы на сайте все было удобно, доступно и понятно любому пользователю. Одним из элементов этой концепции является кнопка «Заказ обратного звонка».
В этом кратком обзоре мы сделаем круглую кнопку с анимацией, зафиксировав ее на странице. В будущем можно будет привязать к ней модельное окно, вызываемое нажатием этой же кнопки. К слову, в модельном окне по желанию можно сделать не только форму заказ звонка, но и форму обратной связи.
Для примера создадим две кнопки с разной анимацией. В качестве иконок используем всем известный шрифт Font Awesome.
Наверняка вы видели на многих сайтах кнопки, которые двигаются одновременно с прокруткой страницы. Частым примером таких кнопок может быть акция, заказ звонка или стрелка, позволяющая прокрутить страницу наверх. В этой статье вы узнаете, как сделать такую кнопку для своего сайта.
1.В стиле шаблона размещаем стиль кнопки:
Где: width:80px; — ширина картинки. height:150px; — высота картинки. right:0; — отступ справа, если вы поменяете данную строчку на left:0; — то кнопка будет располагаться слева, также можно указать отступ в пикселях, например: left:20px; top:200px; — верхний отступ. z-index: 99999; — задает расположение элемента поверх всех остальных, например у картинки шапки в теме Twenty Eleven данный параметр имеет значение 9999 и если ваша кнопка будет иметь значение ниже данного параметра, то она будет располагаться под ней.
2. Заходим в файл header.php — для этого входим в панель управления сайтом на wordpress, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редактор», справа в списке шаблонов выбираем файл header.php.
В нем сразу после тега body вставляем вывод нашей кнопки:
(Так выглядит код из примера на картинке, вы должны заменить значения на свои.)
Как видите это код обычной ссылки, только для нее задан особый класс — class=»add_button» , стиль оформления которого прописан в пункте 1 данной статьи.
