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

Оживляем картинки (Придаём динамику) через плагин Smart3D на jQuery
23.06.14, 08:29:12

Скачать файл




Данный плагин реализует интересный эффект. Если мы проводим курсором по картинке, она начинает двигаться за курсором (Точнее, там используются две картинки - передний и задний план). Передний план двигается быстрее заднего. Замечательный скрипт для создания креативных логотипов и шапок для вашего сайта

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

Установка:

После /head на нужных вам страницах вставляйте:
Код
<script type="text/javascript" src="/js/jquery.smart3d.js"></script>  

  <style type="text/css">  
  #mindscape {  
  width: 750px;  
  height: 174px;  
  overflow: hidden;  
  }  
  </style>  

  <script type="text/javascript">  
  $(function() {  
  $('#mindscape').smart3d(850);  
  });  
  </script>


Заметьте, что для данного "лого" мы в css прописали ширину 750 и высоту 174

Далее в то место, где должен быть данный эффект:
Код
<ul id="mindscape">  
  <li><img src="Ссылка на картинку заднего плана" /></li>  
  <li><img src="Ссылка на картинку переднего плана" /></li>  
  </ul>


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

Сразу предупрежу, что ширина картинки для заднего плана должна быть шире параметров, прописываемых в css, картинка же переднего плана должна быть прозрачной по краям, дабы всё это чудо красиво смотрелось smile

Материал подготовил Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: Оживляем, Через, на, плагин, JQuery, Smart3D, картинки, динамику), (Придаём
Просмотров: 285 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: