3D эффект для сайта ucoz
827материалов
228тем на форуме
3003комментария
6152пользователя

3D эффект для сайта ucoz

Может быть, раньше вы видели сайты, где шапкой можно было "управлять", т.е. гонять изображение в ней в разные стороны. И вы, скорее всего, думали, что без помощи flash такого не сотворить, но на самом деле все гениальное - просто. И здесь мы справимся всего лишь при помощи JavaScript и CSS

Это расширение будет смотреться на вашем сайте очень необычно и по новому, т.к. сайтов с хорошей графикой, а тем более "3D" графикой очень мало. И при помощи него вы сможете воплотить свои самые необычные идеи. 3D эффект отлично подойдет для сайта, например, мультипликационного персонажа или сайта посвященному чему-нибудь продвинутому. 

Шаг 1:

Устанавливаем скрипты после тега <body>:
JS
Код
<script type="text/javascript" src="http://yraaa.ru/test/24/jquery.js"></script>  
  <script type="text/javascript" src="http://yraaa.ru/test/24/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 стиле, прописываем размер фона шапки, обратите внимание, что размер ширины меньше на 100 пикселей, делается это для того, чтобы изображения реагировали на движения стрелки мыши и прописываем overflow: hidden;
CSS
Код
<style>
  #mindscape {  
  width: 400px;  
  height: 225px;  
  overflow: hidden;  
  }  

  #monsteck_variketch {  
  width: 400px;  
  height: 225px;  
  overflow: hidden;  
  }  
  </style>

Вот и все! Вы можете сделать оригинальную шапку на своем сайте, поместив туда, например, горы, а можете поместить свою фотографию с логотипом. У данного скрипта существует один большой минус, если первое изображение фона можно обработать в графическом и сжать его размеры, то вот второе изображение фона, должно иметь прозрачность PNG24, из-за чего, данное изображение будет иметь большой вес.

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 04.04.2014 в 22:50
Материал просмотрен: 1289 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта