Эффект на Google Chrome Extension с помощью CSS3, jQuery и MooTools | XoZblog - Уроки и статьи по созданию сайта, блога

Здравствуйте уважаемые читатели XoZblogа! Вы наверняка знаете, что такое Google Chrome и возможно даже пользуетесь им. Тогда Вам должен быть хорошо известен Интернет-магазин Chrome, так вот там применяется следующий эффект — при наведении курсора мыши на миниатюру расширения, снизу «выезжает» панель с описанием и кнопкой добавить. В этом уроке реализуем такой эффект тремя способами:

на CSS3;
с помощью jQuery;
и MooTools.

Базовый HTML и CSS

Как обычно начнем с базовой разметки HTML и основных стилей CSS. Будем использовать минимум элементов в этом коде:

1
2
3
4
5
6
7
8
9
10
11

<div class="item">
<a href="/angry-birds">
<div class="item-billboard">
<img src="angrybirds.jpg" />
<h3>Angry Birds</h3>
</div>
<div class="item-detail">
<p>Текстовый блок внутри элемента DIV!</p>
</div>
</a>
</div>

Базовых стилей CSS не так много:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

.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;
}

Способ 1: CSS3

Оживляем «выезжающую» панель с помощью анимации CSS3.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.item-billboard {
margin-top: 0;
background: #fff;

/* добавляем анимацию! */
-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;
}

На этом можно было бы завершать урок, но к сожалению нам не повезло, есть на свете Internet Explorer и с ним приходиться считаться. В этом нам поможет MooTools и JQuery!

Способ 2 и 3: jQuery и MooTools

Подключаемся к библиотекам этих фрэймворков с помощью все того же Google и используем нижеследующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// 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);
}
});
});

// 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
});
}
});
});

На этом все! Мне нравится вид и функциональность таких блоков. При необходимости можно сэкономить достаточно много места на странице, используя этот прием. Не забудьте скачать Исходники)

Источник статьи/урока: https://xozblog.ru

По материалам: http://davidwalsh.name/google-extension-effect

Правила перепечатки

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Просмотр демо страницы и скачивание исходников не доступно

Базовый HTML и CSS

Способ 1: CSS3

Способ 2 и 3: jQuery и MooTools