BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

Всем привет!
Сегодня я хочу удивить вас красивым эффектом для миниатюры сайта. Этот эффект созданный при помощи 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 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;
}
</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="http://bloggood.ru/">Ссылка на блог</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="http://bloggood.ru/">Ссылка на блог</a></p>
	    </div>
	</div>
</div>

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

<!-- Подключаем библиотеку JQuery -->
<script src="https://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="http://bloggood.ru/">Ссылка на блог</a></p>
			</div>
	</div>
</div>

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

<!-- Подключаем библиотеку MooTools -->
<script src="https://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="https://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="https://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="http://bloggood.ru/">Ссылка на блог</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="http://bloggood.ru/">Ссылка на блог</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="http://bloggood.ru/">Ссылка на блог</a></p>
			</div>
	</div>
</div>
<br>
<div><a href="http://bloggood.ru/">Автор блога Костаневич Степан </a>(BlogGood.ru)</div>
</body>
</html>

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. Юра

    мне нравится

    Ответить

  2. Ирина

    Здравствуйте. Подскажите пожалуйста как мне добавить в шаблон Twenty Ten отображение миниатюр. Заранее огромное спасибо за ответ.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Ирина! На этот вопрос сложно ответить двумя словами, нужна целая, полноценная статья.
    Пробуйте.
    В файле Функции темы (functions.php) добавьте перед символами “?>”, вот такой код:

    add_theme_support('post-thumbnails'); // поддержка миниатюр

    в файле шаблона “index.php” найдите функцию the_excerpt().
    Перед этой функцией the_excerpt() вставьте вот этот код:

    <?php the_post_thumbnail();?>

    Теперь, если вы откроете или создадите новую запись, появиться под виджетом “Метки” виджет “Миниатюра записи”

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 787
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4386