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

Движущаяся шапка эффект 3D by jquery.com для uCoz
24.06.14, 10:14:07

Скачать файл





На мой взгляд данная технология не требует сверх естественного описания. Движущаяся шапка, эффект 3D (jQuery Smart3D) - и не более того..
Предлагаю взглянуть на ДЕМО

Как пример, взял фон старого apo, для креативности

Установка:
Шаг-1 JS:

Давайте установим после тега следующие скрипты:
Код
<script type="text/javascript" src="/Smart3D/jquery.smart3d.js"></script>  
  <script type="text/javascript">  
  $(function() {  
  $('#mindscape').smart3d(500);  
  $('#monsteck_variketch').smart3d(500);  
  });  
  </script>

Многие могли догадаться, что значение 500 - это ширина нашей с вами шапки, поэтому не забываем их менять, когда будете устанавливать свою шапку для блога.

Шаг-2 HTML:

Тут всё просто, мы будем использовать списки в которые поместим ссылку на графическое изображение шапки, основного фона и фона с движущимся персонажем в моём случае:
Код
<ul id="mindscape">  
  <li><img src="fon_1.jpg" /></li>  
  <li><img src="fon_2.png" /></li>  
  </ul>


Шаг-3 CSS:

в css стилях, мы прописываем размер фона нашей шапки, обратите внимание, что размер ширины меньше на 100 пикселей, делается это для того, чтобы наши с вами изображения реагировали на движения стрелки мыши и прописываем overflow: hidden;
Код
#mindscape {  
  width: 400px;  
  height: 225px;  
  overflow: hidden;  
  }  

  #monsteck_variketch {  
  width: 400px;  
  height: 225px;  
  overflow: hidden;  
  }


На этом всё..

Материал подготовлен: GrandDooM
Источник: http://jquery.com/
Категория: jQuery | Добавил: Apocalypse | Теги: эффект, Шапка, ucoz, Движущаяся, by, jquery.com, для, 3D
Просмотров: 498 | Загрузок: 0 | Комментарии: 8 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: