Главная » Файлы » Прочие скрипты » jQuery
Эффектное приближение к элементам при клике по ним через плагин Zoomooz на jQuery для uCoz
24.06.14, 17:09:31

Скачать файл



Очень интересный плагин, который я просто не мог не оформить здесь на apo-ucoz. Классный эффект приближения к элементу при клике по нему со вращением всеё страницы - это очень круто. В общем, всё сами сможете увидеть в демонстрациях

Для начала посмотрите ДЕМО

И моё тестирование в фидле: КЛИК

Установка:

После < /head > на нужных страницах вставляйте:
Код
<script type="text/javascript" src="/js/jquery.zoomooz-helpers.js"></script>  
  <script type="text/javascript" src="/js/jquery.zoomooz-anim.js"></script>  
  <script type="text/javascript" src="/js/jquery.zoomooz-core.js"></script>  
  <script type="text/javascript" src="/js/jquery.zoomooz-zoomTarget.js"></script>  
  <script type="text/javascript" src="/js/jquery.zoomooz-zoomButton.js"></script>  
  <script type="text/javascript" src="/js/jquery.zoomooz-zoomContainer.js"></script>  
  <script type="text/javascript" src="/js/purecssmatrix.js"></script>  
  <script type="text/javascript" src="/js/sylvester.src.stripped.js"></script>


Далее оформим наши искривлённые блоки. Для этого в самый низ вашего css вставляйте:
Код
.shape {  
float:left;  
width:80px;  
height:80px;  
text-align:center;  
color:white;  
font-weight:500;  
line-height:70px;  
border-radius:3px;  
margin-bottom:40px;  
  }  

  .shape-skew {  
background-color:#090;  
-webkit-transform:skewX(15deg) skewY(10deg);  
-moz-transform:skewX(15deg) skewY(10deg);  
-ms-transform:skewX(15deg) skewY(10deg);  
-o-transform:skewX(15deg) skewY(10deg);  
margin-right:55px;  
  }  

  .shape-skew:hover {  
background-color:#0b0;  
  }  

  .shape-skew.selectedZoomTarget:hover {  
background-color:#090;  
  }  

  .shape-scale {  
-webkit-transform:scaleX(0.7) translateY(0px);  
-moz-transform:scaleX(0.7) translateY(0px);  
-ms-transform:scaleX(0.7) translateY(0px);  
-o-transform:scaleX(0.7) translateY(0px);  
background-color:#27c;  
margin-right:50px;  
  }  

  .shape-scale:hover {  
background-color:#49e;  
  }  

  .shape-scale.selectedZoomTarget:hover {  
background-color:#27c;  
  }  

  .shape-rotation {  
background-color:#c43;  
-webkit-transform: rotate(-50deg) translateX(-60px);  
-moz-transform:rotate(-50deg) translateX(-60px);  
-ms-transform:rotate(-50deg) translateX(-60px);  
-o-transform:rotate(-50deg) translateX(-60px);  
  }  

  .shape-rotation:hover {  
background-color:#e64433;  
  }  

  .shape-rotation.selectedZoomTarget:hover {  
background-color:#c43;  
  }


В то место, где должны быть блоки, по которым будем кликать для просмотра эффекта, вставляйте:
Код
<div class="shape shape-skew zoomTarget" data-targetsize="0.45" data-duration="600">Skew</div>  
  <div class="shape shape-scale zoomTarget" data-targetsize="0.45" data-duration="600">Scale</div>  
  <div class="shape shape-rotation zoomTarget" data-targetsize="0.45" data-duration="600">Rotate</div>


Другие примеры использования можете найти на страничке первой демонстрации

Все скрипты из прикреплённого архива залейте в папку js

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: Zoomooz, НИМ, клике, при, Через, элементам, ПО, плагин, Эффектное, Приближение
Просмотров: 510 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: