Всплывающая кнопка. Расширенные настройки виджета
Подключать себе такой функционал заказчик не хотел. Ему просто надо была кнопка, после нажатия на которую, появлялось бы модальное окно с формой заказа. Кнопки обратного звонка - это очень полезная вещь. Благодаря им, человек может заказать звонок себе не тратя свои деньги, что есть важным для нашего человека:). По сути, такую кнопку можно сделать и для возвращения наверх страницы и для кнопки помощи и тд. Главный элемент тут будет - анимация, пульсирующий эффект.
09.09.2016 Добавлена новая кнопка, на старой не работал эффект пульсации в новом Хроме.
Установить анимированную кнопку себе на сайт очень легко. Вся анимация выполнена с помощью CSS , без подключения дополнительных скриптов и плагинов. Хоть кода и много, но все довольно просто.
УВАЖАЕМЫЕ МАСТЕРА! Имейте совесть, если используете данную кнопку, то хотя бы картинку трубки телефонной заливайте себе на хостинг, а не тупо копируете ссылку на мой сайт. Таких умельцев и их сайты прославлю на весь интернет 🙂
Сначала нужно добавить HTML разметку. У нас это будет обычная ссылка. В нужном месте у себя на сайте, в шапке или подвале вставляем такую строку.
Кнопка рассчитана на подключение модального окна из другой статьи. Если подключаете сторонние ссылки, то у самой кнопки в ее HTML коде есть событие
Onclick="return false;"
Теперь в файл стилей надо добавить сами стили CSS .
#popup__toggle{bottom:25px;right:10px;position:fixed;z-index:999;} .img-circle{background-color:#29AEE3;box-sizing:content-box;-webkit-box-sizing:content-box;} .circlephone{box-sizing:content-box;-webkit-box-sizing:content-box;border: 2px solid #29AEE3;width:150px;height:150px;bottom:-25px;right:10px;position:absolute;-webkit-border-radius:100%;-moz-border-radius: 100%;border-radius: 100%;opacity: .5;-webkit-animation: circle-anim 2.4s infinite ease-in-out !important;-moz-animation: circle-anim 2.4s infinite ease-in-out !important;-ms-animation: circle-anim 2.4s infinite ease-in-out !important;-o-animation: circle-anim 2.4s infinite ease-in-out !important;animation: circle-anim 2.4s infinite ease-in-out !important;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all 0.5s;} .circle-fill{box-sizing:content-box;-webkit-box-sizing:content-box;background-color:#29AEE3;width:100px;height:100px;bottom:0px;right:35px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;-webkit-animation: circle-fill-anim 2.3s infinite ease-in-out;-moz-animation: circle-fill-anim 2.3s infinite ease-in-out;-ms-animation: circle-fill-anim 2.3s infinite ease-in-out;-o-animation: circle-fill-anim 2.3s infinite ease-in-out;animation: circle-fill-anim 2.3s infinite ease-in-out;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all 0.5s;} .img-circle{box-sizing:content-box;-webkit-box-sizing:content-box;width:72px;height:72px;bottom: 14px;right: 49px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;opacity: .7;} .img-circleblock{box-sizing:content-box;-webkit-box-sizing:content-box;width:72px;height:72px;background-image:url(images/mini.png);background-position: center center;background-repeat:no-repeat;animation-name: tossing;-webkit-animation-name: tossing;animation-duration: 1.5s;-webkit-animation-duration: 1.5s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;} .img-circle:hover{opacity: 1;} @keyframes pulse {0% {transform: scale(0.9);opacity: 1;} 50% {transform: scale(1); opacity: 1; } 100% {transform: scale(0.9);opacity: 1;}} @-webkit-keyframes pulse {0% {-webkit-transform: scale(0.95);opacity: 1;} 50% {-webkit-transform: scale(1);opacity: 1;} 100% {-webkit-transform: scale(0.95);opacity: 1;}} @keyframes tossing { 0% {transform: rotate(-8deg);} 50% {transform: rotate(8deg);} 100% {transform: rotate(-8deg);}} @-webkit-keyframes tossing { 0% {-webkit-transform: rotate(-8deg);} 50% {-webkit-transform: rotate(8deg);} 100% {-webkit-transform: rotate(-8deg);}} @-moz-keyframes circle-anim { 0% {-moz-transform: rotate(0deg) scale(0.5) skew(1deg);opacity: .1;-moz-opacity: .1;-webkit-opacity: .1;-o-opacity: .1;} 30% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .5;-moz-opacity: .5;-webkit-opacity: .5;-o-opacity: .5;} 100% {-moz-transform: rotate(0deg) scale(1) skew(1deg);opacity: .6;-moz-opacity: .6;-webkit-opacity: .6;-o-opacity: .1;}} @-webkit-keyframes circle-anim { 0% {-webkit-transform: rotate(0deg) scale(0.5) skew(1deg);-webkit-opacity: .1;} 30% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);-webkit-opacity: .5;} 100% {-webkit-transform: rotate(0deg) scale(1) skew(1deg);-webkit-opacity: .1;}} @-o-keyframes circle-anim { 0% {-o-transform: rotate(0deg) kscale(0.5) skew(1deg);-o-opacity: .1;} 30% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);-o-opacity: .5;} 100% {-o-transform: rotate(0deg) scale(1) skew(1deg);-o-opacity: .1;}} @keyframes circle-anim { 0% {transform: rotate(0deg) scale(0.5) skew(1deg);opacity: .1;} 30% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .5;} 100% {transform: rotate(0deg) scale(1) skew(1deg); opacity: .1;}} @-moz-keyframes circle-fill-anim { 0% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;} 50% {-moz-transform: rotate(0deg) -moz-scale(1) skew(1deg);opacity: .2;} 100% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}} @-webkit-keyframes circle-fill-anim { 0% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2; } 50% {-webkit-transform: rotate(0deg) scale(1) skew(1deg);opacity: .2; } 100% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}} @-o-keyframes circle-fill-anim { 0% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;} 50% {-o-transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;} 100% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}} @keyframes circle-fill-anim { 0% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;} 50% {transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;} 100% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}
Первые 7 строк отвечают за внешний вид кнопки, далее уже анимация. В первой строке можно настроить расположение кнопки, а в шестой строке указываете путь к изображению в параметре background-image:url(mini.png) .
Вот и все что нужно для установки такой кнопки. Если Вы разбираетесь в CSS, то сможете настроить кнопку и по нужде полностью ее изменить под свои нужды и стиль сайта.
Чтобы привязать к этой кнопке модальное окно, Вам поможет статья - . Если все сделаете согласно инструкции, проблем у Вас не возникнет.
На этом все, спасибо за внимание. 🙂
P.S.
Я решил создать плагин, который поможет Вам без проблем получить нужный результат. Можете перейти и посмотреть:
Кнопки социальных сетей или onLine консультации сегодня встречаются практически на каждом Интернет проекте. Некоторые из них размещаются непосредственно в теле страницы, другие же остаются всегда на виду пользователя независимо от прокрутки. Именно такие кнопки, блок попытаемся создать в этом материале на чистом CSS
Чтобы кнопка, блок (далее просто кнопка) не изменяла своего положения независимо от прокрутки страницы – как бы плыла по материалам сайта, ей необходимо задать позицию (position ) и разместить ее, поверх все элементов. Но прежде чем перейдем непосредственно к стилям CSS создадим объект для наших экспериментов. Пускай это будет некая картинка (picture), которая является отправной точкой к какому-то действию
<a class =”start” href =”#” > <img src =”picture” > a >html-код составили, теперь попытаемся ее заставить плавать.
И так, с нам уже известно, что фиксированное позиционирование позволяет элементу сохранять свое положение при прокрутке странице, а чтобы он был всегда на переднем плане – необходимо задать большое числовое значение параметру z-index . Делаем это для нашей кнопки:
.start { position :fixed ; z-index : 99999 ; } .start { left :0 : position:fixed ; top :200 px ; z-index : 99999 ; }Если же нам нужно кнопку разместить справа, то вместо left нужно задать right, а именно:
.start { position :fixed ; right :0 ; top :200 px ; z-index : 99999 ; }Если же нашу кнопку необходимо разместить внизу окна браузера, то top заменяем на bottom.
Это было для кнопки, но а если перед нами стоит задача разместить не кнопку, а целый блок с текстом или целым набором кнопок. Эта задача решается аналогично, только приведенные стили нужно задать блоку:
CSS
.block_start { background : #382d25 ; border : 1 px solid #382d25 ; border-radius : 6 px ; box-shadow : 0 px 0 px 8 px #382d25 ; font-size :14 px ; padding : 5 px 5 px 0 ; position : fixed ; right : 25 px ; text-align : center ; top :25 px ; width : 96 px ; z-index : 99999 ; }Прокомментируем свойства параметров. Положение блока указали при помощи position: fixed; z-index: 99999; и разместили его справа сверху — right: 25px; top:25px. Ширина блока (width) равна 96 пикселей. Оформление его задается параметрами – background, border, border-radius, box-shadow. И в завершение, чтобы наш текст внутри блока размещался посредине и имел поля, был одного размера, записали font-size:14px; padding: 5px 5px 0; text-align: center.
Теория – это хорошо, подумали Вы, но вот как это внедрить в реальность? Для примера, допустим у нас есть два сайта – один CMS Joomla, другой – WordPress. Ну что же, установим для Joomla
Установка на CMS Joomla
html-код кнопки необходимо разместить в шаблоне сайта – это файл index.php, что находиться вот здесь — ваш_сайт/templates/тема/ Сам код я чаще всего устанавливаю непосредственно перед тегом
Загрузка...
