Обратный звонок для сайта. Часть 1

Дата публикации: 2016-10-19

WebIx быстрое создание страниц при помощи JavaScript

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

Конечно, как правило, обратная связь реализуется через электронные сообщения или телефон и при этом, последний предпочтительнее, так как живое общение ничего не заменит. Поэтому сейчас очень часто можно встретить на сайтах – сервис обратного звонка, то есть посетитель при помощи специальной формы отправляет запрос администрации магазина на обратный звонок. В соответствии с этим, запрос может отправляться на почтовый ящик администратору магазина, или же прямиком на определенный телефон в виде SMC при условии, что используются специальные сервисы, которые как правило платные.

Поэтому в данном уроке, мы с Вами поговорим о том, как создается форма обратного звонка для сайта, то есть мы создадим анимированную кнопку, клик по которой будет открывать специальную форму, заполнив которую пользователь отправит запрос на обратный звонок. При этом запрос – будет представлять собой простое сообщение для администратора сайта, которое будет отправляться c использованием специальной библиотеки, под названием SwiftMailer, но об этом мы с Вами поговорим позже. И конечно, платный сервис мы подключать не будем, но если это Вам потребуется, Вы всегда сможете доработать созданный функционал.

Итак, сервис обратный звонок, мы реализуем на следующем сайте, конечно — это не интернет-магазин, но в качестве примера он отлично подойдет.

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

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

<div class="window_wrap">
	    <div class="window">
	        <div class="window__close">X</div>
	        <p>Оставьте ваш телефон<br/>и наш консультант свяжется с вами</p>
		       <form id="backPhone" name="backPhone">
		           <input name="telephone" type="Tel" id="telForm" maxlength="20" placeholder="Введите ваш телефон" required=”required” />
		           <button id="telButton" type="submit" form="backPhone">Заказать звонок</button>
		        </form>
	    </div>
	    
	</div>
	
	<div  class="telButton anim">
	   <div class="telButton_border"></div>
	   <div class="telButton_background"><span></span></div>
	   <div class="telButton_hover">Заказать звонок</div>
	</div>

<p>Оставьте ваш телефон<br/>и наш консультант свяжется с вами</p>

<button id="telButton" type="submit" form="backPhone">Заказать звонок</button>

</form>

</div>

<div class="telButton_hover">Заказать звонок</div>

</div>

Блок 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.5s;
	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.0em;
		line-height:1.2;
		font-family:Arial;
		color:#000000;
		display: none;
		opacity: 0;
		z-index: 1
		
	}

.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.5s;

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.0em;

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.9s cubic-bezier(.65, 1.95, .03, .32) 0.5s"});	
	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;
	}

$('.telButton.anim').css({'position':'absolute','top':'-100px','right':'50px','transition': "top 0.9s cubic-bezier(.65, 1.95, .03, .32) 0.5s"});

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({'opacity':1},1000).addClass('fHovered');
			}
		},
		function () {
			var v = $('.telButton_hover');
			if(v.hasClass('fHovered')) {
				v.stop().animate({'opacity':0},1000,function() {
					$(this).css('display','none');
				}).removeClass('fHovered');
			}
		}
		
	);

$('.telButton .telButton_background').hover(

function() {

var v = $('.telButton_hover');

if(!v.hasClass('fHovered')) {

v.stop().css('display','block').animate({'opacity':1},1000).addClass('fHovered');

}

function () {

var v = $('.telButton_hover');

if(v.hasClass('fHovered')) {

v.stop().animate({'opacity':0},1000,function() {

$(this).css('display','none');

}).removeClass('fHovered');

}

);

То есть, используя, метод hover(), описываем две анонимные функции: первая выполнится при наведении курсора мыши на выбранный элемент и вторая, соответственно при отведении.

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

Метки: JavaScript