ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Эффект анимация при наведении на блоки для uCoz

Эффект анимация при наведении на блоки для uCoz

Эффект анимация при наведении на блоки для uCoz
Иногда попадаются ресурсы, где вы наводите на блог и изображением и оно меняется или появляется описание. И вот вам красивый Эффект анимация при наведении на блоки для uCoz который вы теперь можете поставить на свой ресурс. Он полностью работает на CSS3, что однозначно будет выгладить красиво. Сейчас я хочу вам предоставить один интересный и удобный скрипт блоков с анимацией при наведение на них с помощью CSS3. Данный скрипт хорошо будет смотреться и информировать ваших посетителей сайта на главной странице, с помощью его можно выводить разные категории вашего сайта.

Красивый эффект анимация при наведении на блоки для uCoz

Работает данный скрипт хорошо и не сильно грузит сайт. Так же замечу что установка данного скрипта лёгкая и справится с этой задачей любой новичок .

Установка скрипта: CSS3 анимация при наведении на блоки

Для начало установки скрипта вам нужно скачать архив (скачать можно в самом низу статьи) и загрузить папку images в файловый менеджер вашего сайта.

HTML код скрипта

Скопируйте код который расположен чуть ниже и вставьте в то место на сайте где вы его хотите видеть, но я бы посоветовал расположить его на главной странице сайта.

Код
<div class="homeBox">  

  <div class="one_fourth">  

  <div class = "boxImage"><img src = "/images/321.png"></div>  

  <h2>MOVIE CLIP</h2>  

  <div class = "boxDescription">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet</div>  

  </div>  

  <div class="one_fourth">  

  <div class = "boxImage"><img src = "/images/131.png"></div>  

  <h2>LITTLE CHAT</h2>  

  <div class = "boxDescription">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet</div>  

  </div>  

  <div class="one_fourth">  

  <div class = "boxImage"><img src = "/images/4821.png"></div>  

  <h2>SLIDESHOWS</h2>  

  <div class = "boxDescription">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet</div>  

  </div>  

  <div class="one_fourth last">  

  <div class = "boxImage"><img src = "/images/62.png"></div>  

  <h2>NEW FEATURES</h2>  

  <div class = "boxDescription">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet</div>  

  </div>  

  </div>


CSS3 стили скрипта

Теперь вставьте стили для наших блоков в самый низ ваших стилей сайта и сохраните.

Код
.homeBox {  
  position: relative;  
  float: left;  
  display: block;  
}  

.homeBox .one_fourth {  
  text-align: center;  
  overflow: hidden;  
  background-image: linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);  
  background-image: -o-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);  
  background-image: -moz-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);  
  background-image: -webkit-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);  
  background-image: -ms-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);  
  background-image: -webkit-gradient( linear, left bottom, left top, color-stop(1, #F3F3F3), color-stop(0, #FAFAFA) );  
  border: 1px solid #E1E1E1;  
  -moz-box-shadow: 0px 1px 0px #ecebeb;  
  -webkit-box-shadow: 0px 1px 0px #ecebeb;  
  height: 228px;  
  width: 228px;  
  margin-right: 10px;  
   
  -webkit-transition: background 0.5s linear;  
  -moz-transition: background 0.5s linear;  
  -o-transition: background 0.5s linear;  
  transition: background 0.5s linear;  
}  

.one_half, .one_third, .two_thirds, .one_fourth, .three_fourths, .one_fifth, .two_fifth, .three_fifths, .four_fifths {  
  position: relative;  
  margin: 0;  
  margin-right: 3.8%;  
  float: left;  
}  

.homeBox .one_fourth div, .homeBox .last div {  
  padding: 10px;  
}  

.homeBox .one_fourth:hover{  
  background:#252525;  

}  

.homeBox .one_fourth .boxImage {  
  -webkit-transition: all 0.2s linear;  
  -moz-transition: all 0.2s linear;  
  -o-transition: all 0.2s linear;  
  transition: all 0.2s linear;  
}  

.homeBox .one_fourth:hover .boxImage {  
  position: relative;  
  -webkit-animation: moveFromTop 350ms ease;  
  -moz-animation: moveFromTop 350ms ease;  
  -ms-animation: moveFromTop 350ms ease;  
}  

.homeBox .one_fourth h2 {  
  color: #4B4A4A;  
  margin: 0 0 10px 0;  
  -webkit-transition: all 0.2s linear;  
  -moz-transition: all 0.2s linear;  
  -o-transition: all 0.2s linear;  
  transition: all 0.2s linear;  
}  

.homeBox .one_fourth:hover h2 {  
  position: relative;  
  color:#EAEAEA;  
  -webkit-animation: moveFromTop 200ms ease;  
  -moz-animation: moveFromTop 200ms ease;  
  -ms-animation: moveFromTop 200ms ease;  
}  

.homeBox .one_fourth .boxDescription {  
  color: #4B4A4A;  
  margin: 0 0 10px 0;  
  -webkit-transition: all 0.2s linear;  
  -moz-transition: all 0.2s linear;  
  -o-transition: all 0.2s linear;  
  transition: all 0.2s linear;  
}  

.homeBox .one_fourth:hover .boxDescription {  
  position: relative;  
  color:#EAEAEA;  
  -webkit-animation: moveFromBottom 500ms ease-in-out;  
  -moz-animation: moveFromBottom 500ms ease-in-out;  
  -ms-animation: moveFromBottom 500ms ease-in-out;  
}  

@-webkit-keyframes moveFromTop {  
  from {  
  top: -600px;  
  }  
  to {  
  top: auto;  
  }  

}  

@-moz-keyframes moveFromTop {  

  from {  
  -moz-transform: translateY(-600%);  
  }  
  to {  
  -moz-transform: translateY(0%);  
  }  

}  

@-ms-keyframes moveFromTop {  
  from {  
  -ms-transform: translateY(-600%);  
  }  
  to {  
  -ms-transform: translateY(0%);  
  }  
}  

@-webkit-keyframes moveFromBottom {  
  from {  
  bottom: -400px;  
  }  
  to {  
  top: auto;  
  }  
}  

@-moz-keyframes moveFromBottom {  
  from {  
  -moz-transform: translateY(400%);  
  }  
  to {  
  -moz-transform: translateY(0%);  
  }  
}  

@-ms-keyframes moveFromBottom {  
  from {  
  -ms-transform: translateY(400%);  
  }  
  to {  
  -ms-transform: translateY(0%);  
  }  
}


Скрипт установлен и вы можете его настраивать и менять картинки под себя. Для замены картинок вам нужно проследовать в паку images и заменить существующие картинки на свои, но не забывайте что картинки должны иметь размер и название те же что и исходные изображение в обратном случае вам нужно будет подредактировать немного стили скрипта.
2015-09-27 Загрузок: 5 Просмотров: 1535 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 5
Kolinkor
Kolinkor 2015-09-27 23:571
0
Как понял, эффект состоит, только при наведение и вместо светлого становиться темным, или что то пропустил.
Сопрано
Сопрано 2015-09-28 00:002
0
Здесь мне кажется все просто и идет как дополнение к дизайну и можно сам оттенок поменять.
Kosten
Kosten 2015-09-28 00:103
0
Но возможно кому и пригодиться и установит этот эффект на свой сайт.
FeStemBer
FeStemBer 2015-09-28 00:384
+1
Интересное решение по дизайну, но сайту не тепло не холодно от этого, только красивый эффект и не более.
kos
kos 2015-09-28 01:075
0
Полностью с вами согласен
avatar