Главная » Файлы » Прочие скрипты » jQuery

3D Эффект при перемещении курсора через плагин levitation на jQuery
23.06.14, 09:33:22

Скачать файл




Данный плагин создаёт эффект 3D смещения картинок, когда курсор находится в нужной области

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

Установка:

После /head на страницах, где будет использован данный плагин, вставляйте:
Код
<script type="text/javascript" src="/js/jquery.levitation.js"></script>

<style>
  #example {position: relative; overflow: hidden; width:600px; height:400px;}  
  #sprite1 {width:140px;}  
  #sprite2 {width:240px;}  
  #sprite3 {width:100px;}  
  #sprite4 {width:140px;}  
  #sprite5 {width:340px;}  
</style>

<script>
  $(document).ready(function(){  
$('#space').levitation(-150,-150, -130);  
$('#sprite1').levitation(320, 100, 20);  
$('#sprite2').levitation(330, 120, 130);  
$('#sprite3').levitation(80, 70, -40);  
$('#sprite4').levitation(180, 130, 40);  
$('#sprite5').levitation(10, 180, 180);  
  });
</script>


Следующий код в то место, где будет сам блок с 3D:
Код
<div id="example">
<img id="space" src="/images/space.jpg">
<img id="sprite1" src="/images/x-wing.png">
<img id="sprite2" src="/images/x-wing.png">
<img id="sprite3" src="/images/x-wing.png">
<img id="sprite4" src="/images/t-fighter.png">
<img id="sprite5" src="/images/t-fighter.png">
</div>


Осталось лишь залить скрипт из прикреплённого архива в папку js и три картинки в папку images

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: эффект, при, levitation, Через, курсора, на, плагин, JQuery, 3D, перемещении
Просмотров: 473 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: