falbar Анимация занавеса, hover effects

Анимация занавеса, hover effects

13 февраля 2015 2595 0

Сегодня поговорим об «украшательствах» и рассмотрим довольно интересную анимацию при наведении на картинку (картинку беру как пример, в реальности эффект можно использовать на чем угодно), а также познакомимся с библиотекой 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.

Реклама
Комментариев еще не оставлено
no_avatar