Сегодня поговорим об «украшательствах» и рассмотрим довольно интересную анимацию при наведении на картинку (картинку беру как пример, в реальности эффект можно использовать на чем угодно), а также познакомимся с библиотекой MooTools.
Суть анимации следующая: при наведении на изображение картинка делится на две части и раздвигается в стороны как занавес, открывая скрытую под ней информацию. В предыдущих статьях мы, в основном, использовали библиотеку jQuery, и не мудрено, ведь она самая распространенная, сегодня же я решил немного разнообразить тематику, и для реализации анимации мы будем использовать библиотеку MooTools.
Для начала подключим саму библиотеку MooTools:
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js"></script>
Теперь как всегда добавим на страницу HTML структуру:
<div class="thumb">
<div class="someContent">
<div class="content">
Какой-то текст...
</div>
</div>
<div class="divLeft" style="left: 0px">
<div class="divLeftImage" style="background: url(7.jpg);"></div>
<div class="divLeftShadow"></div>
</div>
<div class="divRight" style="left: 0px; background-image: url(7.jpg);"></div>
<img class="thumbnail-shadow" alt="bottom" src="thumbnail-shadow.png">
</div>
Здесь у нас 3 основных блока: блок с контентом, в который кладем текст описания, или же другое изображение (как у кого с фантазией), и два блока с нашей картинкой, при помощи которых и будет реализован «занавес». Кроме того, используется несколько блоков для реализации красивых динамических теней при наведении.
CSS-стили следующие:
div.thumb{
position: relative;
width: 160px;
height: 160px;
margin: 30px 40px;
overflow: hidden;
border: 5px solid #313131;
float: left;
}
div.divLeft, div.divRight{
width: 90px;
height: 160px;
overflow: hidden;
position: relative;
top: -160px;
overflow: hidden;
float: left;
}
div.divLeft{
margin-right: -10px;
}
div.divLeftImage{
width: 80px;
height: 100%;
float: left;
}
div.divLeftShadow{
width: 10px;
height: 100%;
float: left;
background: transparent url(shadow.png) repeat-y 0 0;
}
div.divRight{
width: 80px;
background-position: -80px 0;
}
.thumbnail-shadow{
float: left;
height: 33px;
position: relative;
top: -320px;
width: 100%;
}
div.someContent{
position: relative;
width: 160px;
height: 150px;
padding: 10px 0px 0px;
font-size: 12px;
font-family: Arial;
text-align: justify;
background: transparent url(thumbnail-overlay.png) no-repeat scroll 0px -167px;
}
div.someContent div.content{
color: #CCC;
height: 126px;
font-size: 11px;
padding: 0 10px 0 20px;
}
Вот же сама реализация:
window.addEvent("domready", function(){
$$("div.thumb").each(function(div){
div.getElement("div.someContent").set("tween", {duration: "700"});
div.getElement("div.divLeft").set("tween", {duration: "450"});
div.getElement("div.divRight").set("tween", {duration: "450"});
div.addEvent("mouseenter", function(e){
this.getElement("div.divLeft").tween("left", "-70px");
this.getElement("div.divRight").tween("left", "80px");
this.getElement("div.someContent").tween("background-position", "-20px 0px");
});
div.addEvent("mouseleave", function(e){
this.getElement("div.divLeft").tween("left", "0px");
this.getElement("div.divRight").tween("left", "0px");
this.getElement("div.someContent").tween("background-position", "0px -167px");
});
});
});
Для тех, кто незнаком с библиотекой MooTools, поясню, что здесь происходит. Для того, чтобы достичь желаемый эффект, а именно раздвижение картинки при наведении в разные стороны, у нас есть два дива divLeft и divRight в свойствах которых указана одна и та же картинка. При наведении divLeft двигается на -70px влево, divRight на 80px вправо. Когда убираем курсор с картинки, всё возвращается на исходные позиции.
Вот так просто можно создать интересный hover effect, воспользовавшись библиотекой MooTools.