Главная » Эффекты для сайта » Красивый эффект для миниатюры сайта с помощью CSS3, jQuery и MooTools

Красивый эффект для миниатюры сайта с помощью CSS3, jQuery и MooTools

2014-10-20 / Вр:23:22 / просмотров: 4210

Всем привет!
Сегодня я хочу удивить вас красивым эффектом для миниатюры сайта. Этот эффект созданный при помощи CSS3, jQuery, Moo Tools.
При наведении мыши на миниатюру, снизу выплывет панель с текстом. Текст может быть описанием к картинке или товару с кнопкой купить или добавить в корзину. Идей для применения этого эффекта много.

Демонстрацию эффекта можете посмотреть здесь
[просмотреть демонстрацию]

Для начала создайте html-файл с любым названием, например, «fx-bloggood-ru.html» и вставьте вот этот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Красивый эффект для миниатюры сайта с помощью CSS3, jQuery и MooTools на BlogGood.ru</title>
<style ENGINE="text/css">
.item {
position: relative;
width: 240px;
overflow: hidden;
border: 1px solid #ccc;
}
.item {
height: 200px;
}

.item a {
text-decoration: none;
color: #000;
}

.item-billboard, .item-detail {
padding: 10px;
height: 180px;
}

.item-billboard {
margin-top: 0;
background: #fff;
}
.item-billboard h3 {
font-size: 13px;
font-weight: bold;
color: #262626;
font-family: 'Open Sans',arial,sans-serif;
}

.item-detail {
background: #ececec;
}
</style>
</head>

<body>
</body>
</html>

Внимание: этот код будет использоваться во всех трех способах для CSS3, jQuery и MooTools.

Способ №1. С помощью CSS3

Вставьте между тегами <body></body> вот этот код:

<div class="blok">
<h2>CSS3</h2>
	<div class="item itemCss">
			<div class="item-billboard item-billboard-css">
				<img src="bloggood-ru.png" />
				<h3>CSS на блоге BlogGood.ru </h3>
			</div>
			<div class="item-detail">
				<p>Текстовое содержание!</p>
				<p><a href="/">Ссылка на блог</a></p>
			</div>
	</div>
</div>

В строке №5 пропишите путь к картинке. Желательные размеры картинки 220 х 135px или 220 х 140px.

Красивый эффект для миниатюры сайта с помощью CSS3, jQuery и MooTools

Перед тегом</style> вставьте вот этот код для анимации:

/* анимация */
.item-billboard-css {

-webkit-transition-property: margin-top;
-webkit-transition-duration: .5s;

-moz-transition-property: margin-top;
-moz-transition-duration: .5s;

-o-transition-property: margin-top;
-o-transition-duration: .5s;

-ms-transition-property: margin-top;
-ms-transition-duration: .5s;
}

.itemCss:hover .item-billboard {
margin-top: -200px;
}

Это был способ на CSS. Но, к сожалению, не на всех браузерах вы сможете увидеть плавную анимацию :sad: . Вот по этой причине на помощь приходят jQuery и MooTools. Смотрите следующий пример.

Способ №2. С помощью jQuery

Вставьте между тегами <body></body> вот этот код:

<div class="blok">
<h2>jQuery</h2>
	<div class="item itemJQuery">
		<div class="item-billboard">
				<img src="fx-css.png" />
				<h3>jQuery на блоге BlogGood.ru</h3>
		</div>
            <div class="item-detail">
				<p>Текстовое содержание!</p>
				<p><a href="/">Ссылка на блог</a></p>
	    </div>
	</div>
</div>

Теперь подключим библиотеку JQuery и пропишем необходимый скрипт к эффекту. Между тегами <head></head> напишите вот этот код:

<!-- Подключаем библиотеку JQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>
// jQuery
jQuery(document).ready(function() {
jQuery(".itemJQuery").bind({
mouseenter: function() {
var self = jQuery(this), billboard = self.data("billboardElement");
if(!billboard) {
billboard = jQuery(jQuery(".item-billboard", this)[0]);
self.data("billboardElement", billboard);
}
jQuery(billboard).stop().animate({
"margin-top": "-200px"
});
},
mouseleave: function() {
jQuery(this).data("billboardElement").stop().animate({
"margin-top": 0
});
}
});
});
</script>

Вот теперь данный эффект будет работать во всех браузерах на 99%. Давайте еще посмотрим способ №3 с помощью MooTools.

Способ №3. С помощью MooTools

Вставьте между тегами <body></body> вот этот код:

<div class="blok">
	<h2>MooTools</h2>
	<div class="item itemJs">
			<div class="item-billboard">
				<img src="fx-css.png" />

				<h3>MooTools на блоге BlogGood.ru</h3>

			</div>
			<div class="item-detail">
				<p>Текстовое содержание!</p>
				<p><a href="/">Ссылка на блог</a></p>
			</div>
	</div>
</div>

Подключаем библиотеку MooTools и прописываем необходимый скрипт к эффекту. Между тегами <head></head> напишите вот этот код:

<!-- Подключаем библиотеку MooTools -->
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools.js"></script>
<script>
// MooTools
window.addEvent("domready", function() {
$$(".itemJs").addEvents({
mouseenter: function() {
var billboard = this.retrieve("billboardElement");
if(!billboard) {
billboard = this.getElements(".item-billboard")[0];
this.store("billboardElement", billboard);
}
billboard.tween("margin-top", "-200px");
},
mouseleave: function() {
this.retrieve("billboardElement").tween("margin-top", 0);
}
});
});
</script>

На этом можно было бы закончить свою статью, но я решил написать общий комбинированный способ. То есть, все три способа воссоединить :smile: .

Комбинированный способ.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Красивый эффект для миниатюры сайта с помощью CSS3, jQuery и MooTools на BlogGood.ru</title>
<!-- Подключаем библиотеку JQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>
		// jQuery
		jQuery(document).ready(function() {
			jQuery(".itemJQuery").bind({
				mouseenter: function() {
					var self = jQuery(this), billboard = self.data("billboardElement");
					if(!billboard) {
						billboard = jQuery(jQuery(".item-billboard", this)[0]);
						self.data("billboardElement", billboard);
					}
					jQuery(billboard).stop().animate({
						"margin-top": "-200px"
					});
				},
				mouseleave: function() {
					jQuery(this).data("billboardElement").stop().animate({
						"margin-top": 0
					});
				}
			});
		});
</script>

<!-- Подключаем библиотеку MooTools -->
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools.js"></script>
<script>
// MooTools
window.addEvent("domready", function() {
$$(".itemJs").addEvents({
mouseenter: function() {
var billboard = this.retrieve("billboardElement");
if(!billboard) {
billboard = this.getElements(".item-billboard")[0];
this.store("billboardElement", billboard);
}
billboard.tween("margin-top", "-200px");
},
mouseleave: function() {
this.retrieve("billboardElement").tween("margin-top", 0);
}
});
});
</script>

<style type="text/css">
.item {
position: relative;
width: 240px;
overflow: hidden;
border: 1px solid #ccc;
}
.item {
height: 200px;
}

.item a {
text-decoration: none;
color: #000;
}

.item-billboard, .item-detail {
padding: 10px;
height: 180px;
}

.item-billboard {
margin-top: 0;
background: #fff;
}
.item-billboard h3 {
font-size: 13px;
font-weight: bold;
color: #262626;
font-family: 'Open Sans',arial,sans-serif;
}

.item-detail {
background: #ececec;
}	

/* анимация */
.item-billboard-css {

-webkit-transition-property: margin-top;
-webkit-transition-duration: .5s;

-moz-transition-property: margin-top;
-moz-transition-duration: .5s;

-o-transition-property: margin-top;
-o-transition-duration: .5s;

-ms-transition-property: margin-top;
-ms-transition-duration: .5s;
}

.itemCss:hover .item-billboard {
margin-top: -200px;
}
</style>
</head>

<body>
<div class="blok">
	<h2>CSS3</h2>
	<div class="item itemCss">
			<div class="item-billboard item-billboard-css">
				<img src="fx-css.png" />
				<h3>CSS на блоге BlogGood.ru </h3>
			</div>
			<div class="item-detail">
				<p>Текстовое содержание!</p>
				<p><a href="/">Ссылка на блог</a></p>
			</div>
	</div>
</div>

<div class="blok">
<h2>jQuery</h2>
	<div class="item itemJQuery">
		<div class="item-billboard">
				<img src="fx-css.png" />

				<h3>jQuery на блоге BlogGood.ru</h3>

			</div>
            <div class="item-detail">
				<p>Текстовое содержание!</p>
				<p><a href="/">Ссылка на блог</a></p>
			</div>
	</div>
</div>

<div class="blok">
	<h2>MooTools</h2>
	<div class="item itemJs">
			<div class="item-billboard">
				<img src="fx-css.png" />

				<h3>MooTools на блоге BlogGood.ru</h3>

			</div>
			<div class="item-detail">
				<p>Текстовое содержание!</p>
				<p><a href="/">Ссылка на блог</a></p>
			</div>
	</div>
</div>
<br>
<div><a href="/">Автор блога Костаневич Степан </a>(BlogGood.ru)</div>
</body>
</html>

Ну, вот и все! Кажется, все сказал, хотя нет, не все! Подписывайтесь на обновление моего блога, жмите на кнопки социальных сетей, которые размещены снизу.