Зворотний дзвінок сайту. Частина 1

29

Від автора: вітаю Вас, дорогий друже. В даний час інтернет магазини дуже популярні, адже все більше і більше користувачів інтернету, роблять покупки, не виходячи з дому. Тому якщо у Вас є свій власний сайт-магазин, або ж Ви плануєте його створити, обов’язково необхідно подумати про контакти з майбутніми відвідувачами.

скачать исходникискачать урок

Звичайно, як правило, зворотний зв’язок реалізується через електронну пошту або телефон і при цьому, останній переважніше, оскільки живе спілкування нічого не замінить. Тому зараз дуже часто можна зустріти на сайтах – сервіс зворотного дзвінка, тобто відвідувач за допомогою спеціальної форми надсилає запит до адміністрації магазину на зворотний дзвінок. У відповідності з цим, запит може надсилатися на поштову скриньку адміністратора магазину, або ж прямо на певний телефон у вигляді SMC за умови, що використовуються спеціальні сервіси, які, як правило, платні.

Тому в даному уроці ми з Вами поговоримо про те, як створюється форма зворотнього дзвінка для сайту, тобто ми створимо анімовану кнопку, клік по якій буде відкривати спеціальну форму, заповнивши яку користувач надсилає запит на зворотний дзвінок. При цьому запит – буде представляти собою просте повідомлення для адміністратора сайту, яка буде відправлятися з використанням спеціальної бібліотеки, під назвою SwiftMailer, але про це ми з Вами поговоримо пізніше. І звичайно, платний сервіс ми підключати не будемо, але якщо це Вам потрібно, Ви завжди зможете доопрацювати створений функціонал.

Отже, сервіс зворотний дзвінок, ми реалізуємо на сайті, звичайно — це не інтернет-магазин, але в якості прикладу він відмінно підійде.

Форма зворотного дзвінка спочатку прихована і буде відображена на екран після натискання спеціальної анімаційної кнопці, яку ми створимо далі. у вигляді спливаючого модального вікна.

Тепер, давайте створимо необхідну розмітку Html, а значить, відкриваємо в текстовому редакторі файл, в якому описана структура цікавить сторінки, в моєму випадку — це index.html і перед футером додамо наступний код.

X

Залиште ваш телефон
і наш консультант зв’яжеться з вами

Замовити дзвінок

Замовити дзвінок

Блок div з класом window_wrap, необхідний для затінення основного вмісту при відображенні спливаючого вікна з формою зворотного дзвінка. Елемент div з класом window – це і є, блок спливаючого віконця, в якому буде відображатися текстова область для додавання телефону відвідувача, кнопка відправки форми і кнопка закриття модельного вікна – блок div, з класом window__close.

Блок з класом telButton anim – це основний контейнер, для формування кнопки зворотного дзвінка. При цьому сама кнопка буде сформована елементом з класом telButton_background, і тегом div з класом telButton_border, який, по суті, являє собою звичайну рамку для майбутньої кнопки, для якої ми далі опишемо невеликий анімаційний ефект, для залучення уваги відвідувачів. І останній контейнер з класом telButton_hover, необхідний для відображення невеликої підказки замовити дзвінок), при наведенні курсору миші, безпосередньо на кнопку. Таким чином, в браузері ми побачимо наступний результат.

Тепер визначимо правила CSS, створеної для розмітки HTML і почнемо з стилізації кнопки.

.telButton .telButton_border {border-color: #ec3c28}
.telButton .telButton_background {background-color:#088789}
.telButton {z-index: 90;
width:60px;
height:60px;
opacity: .7;
}
.telButton:hover {opacity: 1;}
.telButton .telButton_background {
background-position: center center;
background-size: 100% 100%;
z-index: 5010;
width:60px;
height:60px;
border-radius: 50%;
position: absolute;
animation-name: pulse;
animation-duration: 5s;
animation-iteration-count:infinite;
}
.telButton .telButton_background span {
display:table cell;
vertical-align:middle;
}
.telButton .telButton_background:hover {
background-color: #fe9126;
cursor:pointer;
opacity: 1;
}
.telButton .telButton_border {
position: absolute;
top: -1px;
left: -1px;
width:56px;
height:56px;
border-radius: 50%;
border-style: solid;
border-width:3px;
animation-name: shadow;
animation-duration: 1.5 s;
animation-iteration-count:infinite;
animation-timing-function: ease-out;
}
.telButton_hover {
width:150px;
border: 3px solid #088789;
background-color: #FFFFFF;
border-radius: 15px;
padding:10px;
margin-left: -120px;
margin-top:9px;
font-size: 1.0 em;
line-height:1.2;
font-family:Arial;
color:#000000;
display: none;
opacity: 0;
z-index: 1
}

Код стилів досить великий, але в теж час не складний, тобто задаємо стандартні правила для кожного елемента розмітки – ширина, висота, позиція, відступи і т. д. В якості фону кнопки, використовується зображення, яке зазначено у вигляді коду base64. Правда, тут я його не наводив, так як обсяг досить великий, і Ви цілком зможете завантажити його з додаткових матеріалів. При цьому, на даному етапі кнопка буде виглядати наступним чином.

Для залучення уваги відвідувачів, до даної кнопці ми прив’яжемо невеликі анімаційні ефекти, завдяки яким вона буде плавно провертатися в обидві сторони, градусів на 10, а рамка, розташована позаду, буде трохи збільшуватися в розмірах, тобто як би пульсувати. Для реалізації вищевказаних ефектів, ми застосуємо два покадровых анімації з псевдонімами pulse і shadow, параметри яких, опишемо з наступному уроці.

Але, що стосується ефектів – це ще не все, так як при завантаженні сторінки, кнопка на екрані буде з’являтися так само з анімаційним ефектом, а саме, вона як би впаде з самого верху вікна браузера, в його нижню точку, потім відбудеться невеликий відскік вгору (за принципом повітряної кульки) і повернення назад вниз.

Для реалізації даного ефекту відкриємо в текстовому редакторі файл script.js, який вже підключений до цікавій сторінці і додамо кілька рядків коду JavaScript.

$(‘.telButton.anim’).css({‘position’:’absolute’,’top’:’-100px’,’right’:’50px’,’transition’: «top 0.9 s cubic-bezier(.65, 1.95, .03, .32) 0.5 s»});
telButtonReturn();
$(window).scroll(function() {
telButtonReturn();
});
$(window).resize(function() {
telButtonReturn();
});
function telButtonReturn() {
var wHeight = getWindowHeight();
var sHeight = $(window).scrollTop();
var result = wHeight + sHeight — 100;
$(‘.telButton.anim’).css({‘position’:’absolute’,’top’ : result + ‘px’,’right’:’50px’});
}
function getWindowHeight() {
var windowHeight;
windowHeight = $(window).height();
return windowHeight;
}

Для реалізації, анімації, насамперед визначаємо початковий стан кнопки і параметри майбутньої анімації, використовуючи метод css(). Тобто задаємо позицію кнопки по вертикалі – 100px , тим самим маємо її за межами видимої області браузера. Далі, за допомогою правила transition задаємо параметри анімації. Темп анімації визначає функція cubic-bezier(.65, 1.95, .03, .32), завдяки якій задаються дві точки, необхідні для побудови, кубічної кривої Безьє, приблизно ось такого виду (анімація повітряної кульки).

Далі, викликаємо на виконання функцію telButtonReturn(), яка визначає кінцевий стан кнопки. При цьому перехід з початкового стану в кінцеве, здійснитися з анімацією, дотримуючись параметри, зазначені у властивості transition. У коді вище зазначеної функції, викликається додаткова функція getWindowHeight(), яка повертає висоту вікна браузера користувача. Цей параметр разом з відстанню, на яке може бути переміщений повзунок скролла сторінки, використовується для обчислення нижньої точки положення кнопки. При цьому кнопка буде видалена від нижнього краю вікна браузера на 100 пікселів.

Так само виклик функції telButtonReturn(), необхідно повторити при переміщенні повзунка скролла, а так само при зміні розміру вікна браузера. І нарешті, для появи підказки при наведенні курсору миші на кнопку, необхідно додати наступний код.

$(‘.telButton .telButton_background’).hover(
function() {
var v = $(‘.telButton_hover’);
if(!v.hasClass(‘fHovered’)) {
v.stop().css(‘display’,’block’).animate({‘непрозорість’:1},1000).addClass(‘fHovered’);
}
},
function () {
var v = $(‘.telButton_hover’);
if(v.hasClass(‘fHovered’)) {
v.stop().animate({‘непрозорість’:0},1000,function() {
$(this).css(‘display’,’none’);
}).removeClass(‘fHovered’);
}
}
);

Тобто, використовуючи метод hover(), описуємо дві анонімні функції: перша виконається при наведенні курсору миші на вибраний елемент і друга, відповідно при відведенні.

Власне на цьому дана стаття завершена, більш докладно пояснення кожного елемента сформованого коду Ви зможете побачити у відео версії даного уроку. Всього Вам доброго біля дачного кодування!!!