Floating button — плагин кнопки wordpress. Материальный дизайн: Почему плавающая кнопка действия — не лучшая практика в UX дизайне
— легкий, элегантный, динамичный, быстрый и эффективный помощник, направленный на поддержку основной навигации и привлечение пользователей. Будучи всего лишь небольшим круглым элементом, который перемещается вместе с пользователем, независимо парящим над всей дизайн-конструкцией и, как правило, придерживающимся правой стороны, он способен расширить функциональность каждого экрана, а также сделать программу удобнее.
Как предполагают спецификации Google, кнопка должна нести конструктивный тонус и обеспечивать быстрый доступ к важным инструментам. Этот элемент должен быть простым и радовать глаз, содержать интуитивную и понятную графику, живой и яркий дизайн, но при этом избегать деструктивных функций. Мы собрали небольшую коллекцию свежих мобильных концепций пользовательского интерфейса, которые освоили эту новую тенденцию.
Редизайн Instagram MaterialЭтот дизайн содержит небольшую круглую кнопку с тонкой тенью, окрашенную в соответствующем темно-синем тоне. Она обеспечивает быстрый доступ к фотографиям, а также предоставляет владельцам дополнительный функционал. Сопровождает большинство экранов.
Android & Wear App Ecosystem
Дизайнер Стефан Кастро использует круглую плавающую кнопку, которая благодаря красному тону резко контрастирует с содержанием. Она открывает пять крошечных иконок с подсказками, также имеющих яркую расцветку, располагающихся снизу вверх.
Magnet.me
Здесь используется тот же прием, что и в предыдущем примере. Во-первых, это просто обычная круглая кнопка, прилипающая к нижней части страницы. Когда пользователь нажимает ее, она плавно раскрывает три другие иконки, размещаются вертикально друг за другом.
Coloring UI
Дизайнер Лоис Ян демонстрирует отличную работу по выбору цветовой палитры для данного элемента. Интерфейс сайта довольно тяжелый по содержанию. Яркий сплошной красный фон в сочетании с тонкими тенями отделяет иконку от потока информации, ненавязчиво привлекая внимание.
Drooling by Henrique Ferreira
Здесь плавающая кнопка подкрепляется наложенным элегантным полупрозрачным экраном. Экран необходим для привлечения внимания к иконкам и заголовкам, так как основа приложения заполнена большими сочными изображениями. Крошечное отклонение от траектории добавляет в дизайн изюминку.
Плавающие кнопки Add Media
Кнопка действия O-образной формы присутствует на нижней части страницы и включает в себя четыре CTA, расположенных по кругу. Из-за этого они быстро доступны. Каждая иконка имеет относительно огромный размер, яркий цвет, и острый вразумительный символ.
Daily UI 010
Здесь кнопка связана с большой боковой панелью, которая вытекает из правой стороны и слегка смещает содержание влево. Связанная с социальными медиа, она включает в себя все популярные порталы: Pinterest, Twitter, Facebook, Google и др.
Приложение Алекса Рябушко
Кнопка действия и ее СТА сконструированы в отличном плоском стиле и в одном цвете. Однако hover-статус в жизнерадостном оранжевом цвете по умолчанию меняется на синий. Огромные глифы внутри кругов интуитивно понятны и легко читаются. Элемент предлагает пользователям визуальные подсказки для быстрого достижения целей.
Material design app PSD template (от Даниэля Де Сантиса)
UI создан в лучших традициях современных спецификаций Google. Классическая плавающая кнопка вызывает большую панель, которая занимает почти весь экран и охватывает действия, необходимые для работы в разделе «Входящие».
Mobile UI (от Smiley)
Художник демонстрирует многочисленные функциональные экранные концепции. Как видите, почти каждая страница имеет свою кнопку действия. Последняя вызывает небольшую, но достаточно высокую панель, которая находится слева и занимает около пятнадцати процентов пространства.
Плавающая кнопка действия от Тайлера Берри
Этот вариант отличается от большей части примеров, перечисленных в нашей коллекции. Он не только имеют сочный колорит и прекрасный тени, но и раскрывают иконки в линию в верхней части интерфейса.
Плавающие кнопки действий от Giulio «bart172» Smedile
Хотя большинство кнопок в этом дизайне похожи на другие такие же, они подключены к клавиатуре стерлингов. Автор получает максимальную отдачу от этого крошечного плавающего помощника. Он также обеспечивает плавный переходный эффект между двумя состояниями.
UX Exploration
В этом дизайне плавающая кнопка демонстрирует набор СТА, расположенных в ряд. Это занимает всю нижнюю часть экрана. Двухцветная окраска, твердые монохромные полотна, отточенные с пиксельной точностью глифы и тени создают классную эстетику.
Пользовательский интерфейс для большого пальца (от Йохема ван дер Вира)
Концепция этого дизайна – использование плавающей кнопки действий, похожей на большинство. Она придерживается правой стороны, имеет простой вид и сразу бросается в глаза. В некоторых случаях, кнопка идет рука об руку с миниатюрной версией логотипа.
Floating Magic Button
Эти плавающие кнопки минималистские в отношении функциональности. Они используются только для предоставления пользователям быстрого доступа к рабочему пространству, где можно создавать свои книги. Дизайн соответствует стандартам и отвечает настроению приложения.
theScore Android
Здесь кнопка с СТА выглядит элегантно, сложно и утонченно. Линейный стиль в паре с красивой двухцветной гаммой, где синий преобладает, создает выдающуюся эстетику, а также преобразует действия в точки фокуса.
FAB for User Engagement
Разработчик использует кнопку действия, дизайн которой мягко перекликается с верхней панелью навигации. Она направлена на то, чтобы заинтересовать пользователей и помочь им чувствовать себя комфортно в рамках всего проекта. Кнопка перекликается со всплывающим окном в правом нижнем углу и захватывает весь экран.
Alternacare
Автор данного дизайн скрывает под плавающей кнопкой действия фильтры, позволяющие пользователям разобраться в избыточной информации и достигнуть цели в течение нескольких секунд. Благодаря смелому виду и яркому цвету, кнопка не сочетается с содержанием и сразу бросается в глаза.
Swipii App
Концепция Swipii App основывается на нескольких свежих решениях. Плавающая кнопка является одним из них. Она хорошо служит своей цели, что облегчает жизнь пользователю. Кнопка располагается в углу каждой страницы и вызывает всплывающую страницу с QR-кодом.
Перетекающая кнопка действий дизайнера Шу Макино
В этом дизайне короткий анимированный GIF демонстрирует стандартный рабочий процесс плавающей кнопки действий. Он силен своими плавными переходами и включает в себя семь элементов элегантной формы, которые появляются один за другим и придерживаются правой стороны.
И в заключение…
Плавающие кнопки действий могут легко превратиться в необходимые элементы интерфейса. Это элегантный и довольно простой способ улучшить его. Обеспечивая пользователям быстрого доступа к жизненно важным функциям мобильных приложений, они попадают прямо в точку, и способны сделать использование приложения быстрым, эффективным и продуктивным.
Всем доброго времени суток. Сегодня речь пойдет о модальных окнах, и на их примере мы реализуем кнопку «Заказать обратный звонок «. Наверняка вы видели на множестве лендингов такую кнопку, при нажатии на которую появляется контактная форма с затемнением общего фона. Именно такой функционал мы и реализуем сегодня.
Обычно кнопку «заказать обратный звонок» располагают в правом верхнем углу. Можете поэкспериментировать с расположением, но помните о том, что люди уже привыкли видеть этот элемент именно там, хотя, — это больше относится к сайтам бизнес тематики и услуг.
Конечно, в большинстве случаев модальные окна делают с применением javascript, но сегодня мы попробуем обойтись только средствами css, и не будем нагружать наш landing page лишним скриптом.
И напоследок, скажу, что я не заморачивался с дизайном контактной формы, просто хотел передать суть того, как реализуется подобный эффект, так что прошу сильно не пинать. Просто опишу основные моменты, а вы потом подправите, как вам будет угодно.
О том, как настроить контактную форму можно почитать в этих статьях:
Для того, чтобы статья не получилась очень длинной, я приведу только html разметку, а остальное вы сможете посмотреть, скачав исходник.
Будем реализовывать такой функционал: :)
Еще раз повторюсь — это просто небольшой шаблончик, который вы потом подправите под свой дизайн. Вызываться это все будет нажатием на кнопку.
Первое, что нужно сделать, это подключить таблицу стилей (less), представленную в исходнике. Я очень подробно описал его комментариями, посмотрите и внесите правки.
Html структура очень проста. Размещаем эту ссылку в нужное место на сайте. Туда, где вы планируете вывести кнопку «заказать обратный звонок»:
Заказать обратный звонок
Теперь нужно создать контейнер модального окна:
содержимое модального окна
Оставьте ваш телефон
и наш консультант свяжется с вами
Не стал публиковать таблицу стилей, можете скачать исходник здесь:
А с html разметкой — все. Так вот просто. Преимущества этого способа в том, что модальное окно можно вызывать несколько раз на странице и в том, что не используются скрипты.
Как вы могли заметить, я написал, что использовал less. Посмотрите на структуру. Я не использовал и 5% от возможностей препроцессора (только вложенность), так как только начал изучать его, но планирую в будущем чаще применять. Вот хотел спросить у вас, как лучше. Не против ли вы, если примеры кода будут не в CSS а less? У меня Google chrome и Яндекс браузер отказались компилировать less в css без открытия файла через Денвер или OpenServer. На Мазила и IE — проглотили. Так что, скорее всего, буду выкладывать обычные CSS стили.
А на сегодня — все! Всем пока!
Если нет желания создавать подобную кнопку самому, рекомендую обратить внимание на , которые позволяют реализовать эту функцию и имеют много других дополнительных возможностей.
Здравствуйте, уважаемые посетители!
Я продолжаю публиковать статьи технической тематики.
И сегодня я затрону интересную тему, в которой мы обсудим кнопку прокрутки вверх страницы на сайте. Мы поговорим о важности данной кнопки, как я люблю это делать. Также покажу наиболее интересные и эффективные реализации этой функции.
Нужна лиЯ думаю, что не стоит показывать, как она выглядит на сайтах, так как почти на каждом ресурсе она есть. Это простая кнопка со стрелкой вверх или со словом, при нажатии на которую вы быстро перемещаетесь в самую верхнюю область сайта.
Данная функция - это некий элемент, который в определенных случаях улучшает юзабилити сайта. Вот в каких случаях, мы сейчас с вами и разберем.
Первый самый важный, а может и единственный случай, когда кнопка вверх нужна - это наличие огромного количества контента на странице. Если страница длинная, то довольно затруднительно ее листать в самый верх.
Приходится либо пользоваться полосой прокрутки, чем пользуются малое количество людей. Я по крайней мере ей вообще не пользуюсь, так как это лишние движение мышки, да и не очень удобно. Либо же приходится крутить ролик на мышке, что очень долго и со временем напрягает.
Поэтому, если на вашем сайте действительно большие статьи, то кнопку можно и установить, но сделать ее нужно такой, чтобы на нее было легко нажать и сделать это было проще, чем крутить ролик или воспользоваться полосой прокрутки в браузере. В другом случае, какой от нее будет толк, если она будет равнозначна стандартным действиям?
Исходя из этого имеются наиболее распространенные и самые действенные кнопки прокрутки вверх, которые действительно эффективно работают. Один из таких вариантов - это кнопка вверх, как в социальной сети Вконтакте. К реализации этого способа мы и переходим.
Кнопка вверх, как ВконтактеОтличительной чертой данной кнопки является ее простота в использовании. Она имеет вид полосы прокрутки в левой части сайта, которая занимает всю высоту ресурса.
Такой вариант уже зарекомендовал себя, так как практически нет пользователей, которые ей не пользуются в соц. сети Вконтакте. Удобна данная реализация тем, что не приходится целиться курсором мышки на какую-то кнопку. Достаточно просто кликнуть на левую область сайта и страница прокрутится в самый верх. Нет необходимости даже следить за курсором, можно просто двинуть мышью в самый край экрана и кликнуть один раз.
Сделать точной такую же реализацию, как Вконтакте не получится, но вот приближенный вариант - запросто.
Чтобы реализовать его, нужно всего лишь разместить скрипт на сайте.
Для загрузки скрипта можно разместить сам код между тегами или перед закрывающим тегом в файле footer.php. А можно просто загрузить файл со скриптом на хостинг, а затем просто сделать загрузку файла на сайте.
Если вы хотите разместить скрипт и не мучиться с загрузкой, то даю вам сам код скрипта.
JavaScript
$(document).ready(function() { $("body").append("^ Наверх"); $ (window).scroll (function () { if ($ (this).scrollTop () > 300) { $ (".button-up").fadeIn(); } else { $ (".button-up").fadeOut(); } }); $(".button-up").click(function(){ $("body,html").animate({ scrollTop: 0 }, 100); return false; }); $(".button-up").hover(function() { $(this).animate({ "opacity":"1", }).css({"background-color":"#E1E7ED","color":"#45688E"}); }, function(){ $(this).animate({ "opacity":"0.7" }).css({"background":"none","color":"#45688E"});; }); });
$ (document ) . ready (function () { $ ("body" ) . append ("^ Наверх" ) ; $ (window ) . scroll (function () { if ($ (this ) . scrollTop () > 300 ) { $ (".button-up" ) . fadeIn () ; } else { $ (".button-up" ) . fadeOut () ; } ) ; $ (".button-up" ) . click (function () { $ ("body,html" ) . animate ({ scrollTop : 0 } , 100 ) ; return false ; } ) ; $ (".button-up" ) . hover (function () { $ (this ) . animate ({ "opacity" : "1" , } ) . css ({ "background-color" : "#E1E7ED" , "color" : "#45688E" } ) ; } , function () { $ (this ) . animate ({ "opacity" : "0.7" } ) . css ({ "background" : "none" , "color" : "#45688E" } ) ; ; } ) ; } ) ;
|
В данном коде можно изменить некоторые параметры под себя.
- Строка 4 отвечает за вывод самой области для прокрутки страницы. В ней прописаны основные стили для отображения кнопки. в принципе, данные параметры должны подойти практически каждому. Но может потребоваться и отредактировать их под себя;
- В строке 7 в скобках имеется число 300, которое отвечает за момент появления кнопки. То есть, кнопка будет появляться только после прокрутки 300 пикселей вниз. Рекомендую тут подобрать такое значение, чтобы прокрутка была возможной только тогда, когда с поля зрения пропадает основное меню сайта или какие-то другие важные элементы в навигации;
- В строке 17 значение 100 отвечает за скорость прокрутки. Чем меньше значение, тем быстрее возвращение вверх страницы.
Данный код можно разместить между тегами в верхушке сайта. Если сайт на WordPress то данная область находится в файле шаблона header.php. Также можно разместить перед закрывающим тегом в самом низу сайта (файл footer.php). Последний вариант я и рекомендую, так как он позволит ускорить загрузку сайта. Выглядеть будет это так.
Еще более эффективным вариантом является загрузка этого скрипта из отдельного файла. Файл можете скачать по кнопке ниже. Находится он внутри архива.
Затем загружаете данный файл на хостинг. Можно загрузить в папку с темой, а можно и в корень сайта. Я, по традиции, сделать это в папку с шаблоном. Потом стоить в то же место прописать код, который будет грузить данный файл. Для этого воспользуйтесь следующей строчкой.
JavaScript
|
В нем необходимо будет заменить пой путь к файлу на ваш во второй строке. Затем вставить этот код в ту же область перед закрывающим тегом, как показано ниже.
После редактирования файла, если мы делали это на компьютере, загружаем его на хостинг с заменой исходного файла. После этого простая кнопка вверх на вашем сайте будет работать.
Для редактирования параметров в данном файле, его потребуется открыть с помощью редактора Notepad.
Данный вариант очень хорош своей простотой, как в работе, так и в установке на сайта. Более продвинутым вариантом является вариант, когда кроме прокрутки вверх имеется возможность вернуться в то место, с которого осуществилась прокрутка. Именно такой вариант реализован в соц. сети Вконтакте. Как его сделать, смотрим ниже.
Второй способ кнопки наверх от ВконтактеПо данному способу я записал подробный видео-урок.
Такой вариант сейчас и стоит на моем блоге. Я пока не смог проанализировать его полезность. Но, если он стоит на одном из гигантов рунета, то можно смело предположить, что толк от него есть. Конечно при таких масштабах это и ежу понятно. А вот на мелком ресурсе можно хорошенько подумать перед его установкой. Но я смотрю на перспективу, поэтому и поставил такое решение.
Реализация второго способа чуть посложнее, но процесс уже должен быть вам знаком, если делали другие технические моменты на своем ресурсе.
Состоит из 3х этапов:
Для начала мы должны разместить скрипт, который будет делать плавность прокрутки и плавное изменение цвета при наведении, как самой области, так и цвета сова "Наверх" в зависимости от дальности прокручивания страницы вниз.
Можно пойти 2мя путями, как и в первом случае. Либо разместить сам скрипт в нужной области (см. пункт выше) либо же сделать загрузку скрипта через файл. Далее мы будем делать все именно через второй способ, чтобы было эффективно.
Файл скрипта скачайте по кнопке ниже.
Размещаете файл на хостинге и делаете загрузку файл через код в самом низу сайта, как делали это ранее. Файл называется точно также, как и в 1м способе, поэтому можно взять ту же самую строку кода для вывода.
⇓ Назад ⇑ Наверх
< div class = "leftbar-wrap" > < a href = "#0" id = "scroll-back" > < span class = "active-area" > < span class = "bar-desc-niz" > ⇓Назад< / span > < / span > < / a > < a href = "#" class = "left-controlbar" > < span class = "active-area" > < span class = "bar-desc-top" > ⇑Наверх< / span > < / span > < / a > |
Разместить его можно в самом низу сайта, перед закрывающим тегом в файле footer.php.
Затем прописываем стили оформления в свой файл стилей (style.css) и загружаем все измененные файлы на хостинг. Вот сами стили.
/* описание контейнера */.leftbar-wrap { position: fixed; height: 100%; top: 0; width: 99px !important; left: 0; } /* описание кнопки «Вверх» */.left-controlbar { height: 100%; display: block; text-decoration: none; } /* описание кнопки «Вернуться» */#scroll-back { display: block; height: 100%; top: 0; display: none; text-align: center; } /* описание столбца фонового цвета для обеих кнопок */.active-area { width: 100px; height: 100%; display: block; text-align: center; } /* задаем прозрачность фонового цвета при наведении на активную область страницы */.leftbar-wrap:hover .active-area { background: #E1E7ED !important; opacity:0.7 !important; } /* делаем подсветку немного ярче при наведении на надпись */.leftbar-wrap .active-area:hover { } /* центрируем надпись у кнопок */.bar-desc-niz { top: 26% !important; position: relative; display: inline-block; } .bar-desc-top { top: 10% !important; position: relative; display: inline-block; }
/* описание контейнера */ Leftbar-wrap { position : fixed ; height : 100% ; top : 0 ; width : 99px !important ; left : 0 ; /* описание кнопки «Вверх» */ Left-controlbar { height : 100% ; display : block ; text-decoration : none ; /* описание кнопки «Вернуться» */ #scroll-back { display : block ; height : 100% ; top : 0 ; display : none ; text-align : center ; /* описание столбца фонового цвета для обеих кнопок */ Active-area { width : 100px ; height : 100% ; display : block ; text-align : center ; /* задаем прозрачность фонового цвета при наведении на активную область страницы */ Leftbar-wrap:hover .active-area { background : #E1E7ED !important ; opacity : 0.7 !important ; /* делаем подсветку немного ярче при наведении на надпись */ Leftbar-wrap .active-area:hover { /* центрируем надпись у кнопок */ Bar-desc-niz { top : 26% !important ; position : relative ; display : inline-block ; Bar-desc-top { top : 10% !important ; position : relative ; display : inline-block ; |
В зависимости от дизайна и структуры вашего ресурса, потребуется немного изменить некоторые параметры в данных стилях. Например, в строках 47 и 53 изменить параметр отступа слова "Назад" и "Наверх" от самого верха страницы соответственно
После редактирования всех файлов, можем смело загрузить их на хостинг и этот способ будет работать. Его реализацию можете посмотреть на моем блоге. Делайте на здоровье.
Мы переходим к следующему способу. Данный вариант уже будет содержать простую кнопку в правой нижней области экрана, нажав на которую, будет произведено перемещение верх страницы.
Третий способ кнопки наверх без плагинаРеализация кнопки также очень простая и 100% работает на сайте WordPress. По поводу HTML сайта или другого движка сказать не могу. Тестируйте.
Нужно скопировать следующий код со скриптом в самый низ сайта перед закрывающим тегом /
JavaScript
$(document).ready(function(){ $("#back-top").hide(); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $("#back-top").fadeIn(); } else { $("#back-top").fadeOut(); } }); $("#back-top a").click(function () { $("body,html").animate({ scrollTop: 0 }, 400); return false; }); }); });< p id = "back-top" > < a href = "#top" > < span > < / span > < / a > < / p > |
Подключать себе такой функционал заказчик не хотел. Ему просто надо была кнопка, после нажатия на которую, появлялось бы модальное окно с формой заказа. Кнопки обратного звонка - это очень полезная вещь. Благодаря им, человек может заказать звонок себе не тратя свои деньги, что есть важным для нашего человека:). По сути, такую кнопку можно сделать и для возвращения наверх страницы и для кнопки помощи и тд. Главный элемент тут будет - анимация, пульсирующий эффект.
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.
Я решил создать плагин, который поможет Вам без проблем получить нужный результат. Можете перейти и посмотреть:
Плавающая кнопка — это новый способ добавить опрос, объявление или какой-либо другой дополнительный контент без добавления каких-либо изменений в дизайн вашего сайта. Функциональность всего этого реализуется в виде плавающей кнопки на вашем сайте, и после нажатия на кнопку будет открыто дополнительное модальное окно с необходимым содержимым. Для улучшения юзабилити, можно использовать панель администрирования, настройки и опции навигации, а также некоторые данные для учёта статистики и проведения аналитики.
Плагин кнопки wordpress, который называется Floating button добавит на ваш сайт такую плавающую кнопку.
Плагин устанавливается также как и любой другой: переходим в раздел «Плагины» — «Добавить новый». Затем, в строку поиска вбиваем Floating button и устанавливаем его.
НастройкаПосле установки, справа в консоле управления вашим сайтом на вордпресс появляется дополнительная вкладка Floating button:
Нажимаем её и начинаем настраивать плавающую кнопку:
1. Button state — включение и выключение отображения кнопки;
2. Settings source — эта настройка отвечает за дальнейший функционал плагина. Если выбрать «Local settings», то функционал будет весьма ограничен, поэтому рекомендуется выбрать второй вариант «Settings from probtn.com»;
3. Теперь нужно зарегистрироваться на сайте разработчиков плагина — это не займёт много времени, зато функционал кнопки wordpress значительно расширится.
Регистрация на сайте разработчиковПереходим на страницу https://admin.probtn.com/login/new и заполняем адрес электронной почты, имя и пароль и нажимаем кнопку «Create»:
На этом регистрация завершена, переходим к дальнейшей настройки плагина, но уже непосредственно на сайте, на котором мы только что зарегистрировались.
После регистрации и входа на сайт мы видим следующую страницу:
Две кнопочки внизу отвечают одна за создание плавающей кнопки, вторая — за создание опроса, который будет появляться при нажатии на плавающую кнопку.
Начнём с создания, поэтому нажимаем «Create Floating Button». Сначала указываем название кнопки:
Обратите внимание, что можно выбрать значок на своём компьютере или указать ссылку на изображение. Для красоты рекомендуется использовать картинку с прозрачным фоном небольшого размера.
На следующем этапе выбираем платформу для отображения кнопки. Мы установили плагин на сайт, поэтому и будем выбирать вариант отображения на домене, который укажем:
Завершаем первоначальную настройку нажатием кнопки «Submit».
Указываем действие, после нажатие на плавающую кнопку и продолжаем настройку плагинаПосле создания, наша кнопочка отображается в консоле слева:
В разделе TOOL указываем адрес, который будет открыт в всплывающем окне после нажатия на кнопочку:
Или указываем опрос, который можно создать по клику на ссылку «Create survey»:
Сохраняем все сделанные изменения на каждом шаге. Установленная на сайте плавающая кнопка может выглядеть так:
А при нажатии на неё появляется следующее всплывающее окно:
Вариантов использования этого плагина для вордпресс — множество: можно создать отдельную страницу, на которой разместить рекламу, опрос или какую-либо информацию, которая не может быть вписана в дизайн сайта. В общем, всё что угодно!
п.с. если вам нужна помощь по настройке или установке — пишите свои вопросы в комментарии. Помощь бесплатна!