Визитная карточка на JQuery

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

 

Скрипт спокойно прошел кроссбраузерность, поэтому подойдет для вставки на любой сайт и не вызовет никаких проблем. По структуре состоит из трех частей, в котором присутствуют:  HTML, CSS и JQuery.

 

 

Сразу по стандарту подключаем необходимые нам стили и библиотеки, а затем переходим к HTML коду. Подключаем стиль demo.css, библиотеке jquery.min.js и скрипт card.js.

 

<link type="text/css" rel="stylesheet" href="css/demo.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/card.js"></script>

 

Создаем класс card, который будет служить для каркаса ширины нашей визиткой карточки на JQuery. Далее прописываем класс card_content, который будет формировать нашу визитную карточку, именно с взаимодействием стилей и скрипта card.js.

Дальше мы разбиваем верхнюю часть и нижнюю часть, в которых будут определенных элементы визитной карточки. К примеру, в верхней части под классом card_logo, я буду хранить логотип сайта, а в нижней части под классом card_info, будет название card_name и скрытые элементы визиткой карточки, такие как: заголовок и ссылка на сайт. 

 

<div class="card">
<div class="card_content">
	<div class="card_logo"><img src="img/logo.png" alt="RootHelp"></div>
	<div class="card_info">
		<div class="card_name">RootHelp</div>
		<h1>Скрипты для сайта</h1>
		<a target="_blank" href="http://roothelp.ru">RootHelp.ru</a>
	</div>
</div>
</div>

 

 

Никак не обойтись и без применения css свойств. Сначала устанавливаем ширину для оболочки визиткой карточки с классом card.

 

.card {
	width: 165px;
}

 

Далее мы создаем контент для визиткой карточки.

 

.card_content {
	background: #f6f6f6;
	position:relative;
	height: 270px;
	overflow: hidden;
}

 

Имеется одна картинка в классе card_logo, которая будет меняться, а точнее подниматься вверх и опускаться вниз, при наведении на визитную карточку, создавая эффект наложения цвета.

 

.card_logo {
	width: 165px;
	height: 135px;
	position: absolute;
	z-index: 300;
	background: url('../img/content.png') no-repeat left top;
	text-align: center;
	padding-top: 9px;
}

.card_logo.active {
	background-position: 0px -144px;
}

 

Далее мы выводим нижний контент, в котором распишем класс card_name - название и скрытый элемент заголовка. 

 

.card_info {
	width: 165px;
	height: 134px;
	position: absolute;
	top: 136px;
	text-align: center;
}

.card_name {
	width: 165px;
	height: 134px;
	margin-bottom: 15px;
	text-decoration:underline;
	line-height:134px;
	font-size:25px;
}

.card_info h1 {
	font-weight: bold;
	font-size: 17px;
	line-height:50px;	
}

 

Теперь выводим весь css код скрипта.

a{
	text-decoration:none;
}

.card {
	width: 165px;
}

.card_content {
	background: #f6f6f6;
	position:relative;
	height: 270px;
	overflow: hidden;
}

.card_logo {
	width: 165px;
	height: 135px;
	position: absolute;
	z-index: 300;
	background: url('../img/content.png') no-repeat left top;
	text-align: center;
	padding-top: 9px;
}

.card_logo.active {
	background-position: 0px -144px;
}

.card_info {
	width: 165px;
	height: 134px;
	position: absolute;
	top: 136px;
	text-align: center;
}

.card_name {
	width: 165px;
	height: 134px;
	margin-bottom: 15px;
	text-decoration:underline;
	line-height:134px;
	font-size:25px;
}

.card_info h1 {
	font-weight: bold;
	font-size: 17px;
	line-height:50px;	
}

 

 

Заключительная часть нашего скрипта, содержит в себе функциональность анимации. Мы уже ни раз разбирали подобные тематики, с данным механизмом работы, к примеру возьмем тему увеличение картинки при наведении курсора JQuery, где при наведении происходит анимация. Данный скрипт, очень похож, но имеет помимо анимации, еще и поиск всех элементов с помощью функции find, а также остановку действия с помощью функции stop.

 

$(document).ready(function(){
$('.card').hover(function(){
$(this).find('.card_info').stop().animate({
		'top': 0
	},400);
$(this).find('.card_logo').addClass('active');
},function(){
	$(this).find('.card_info').stop().animate({
		'top': 136
	},400);
$(this).find('.card_logo').removeClass('active');
});
});

 

Давайте, попробуем разобраться в скрипте по шагам.

 

Номер строки	Пояснение кода
1-13	Начало и конец функции скрипта
2-7	Начало и конец функции при наведении на скрипт
3-5	Начало поиска элементов с классом card_info и запуска анимации со скоростью 400  миллисекунд. Положение элементов сверху - top равное 0 пикселей
6	Начало поиска элементов с классом card_logo и добавлением класса active, который c  взаимодействием, с css свойством background-position: 0px -144px;, возвращает элемент в новое положение
7-12	Начало и конец функции
8-10	Начало поиска элементов с классом card_info и запуска анимации со скоростью 400  миллисекунд. Положение элементов сверху - top равное 136 пикселей
11	Начало поиска элементов с классом card_logo и удалением класса active, который c  взаимодействием, с css свойством background-position: 0px -144px;, возвращает элемент в исходное положение

 

Я вам подал идею, как можно реализовать визитную карточку, дизайн конечно оставляет желать лучшего, но мы тут и не фотошоп припадаем.) Всем спасибо за внимание! Жду Ваших комментариев!