Главная » 2011 » Сентябрь » 30 » Paralax effect в шапке (Скрипты для ucoz)
30.09.2011, 16:41

Paralax effect в шапке



Очень интересный эффект, т.н. paralax effect для картинок.

Скрином это не покажешь, поэтому смотрите Demo

Что нам потребуется:

1) Подключить 2 скрипта после <body> на нужных страницах сайта:

Code
<script type="text/javascript" src="http://www.center-dm.ru/data/jQuery/Smart3D/jquery.smart3d.js"></script>  
  <script type="text/javascript">  
  $(function() {  
  $('#mindscape').smart3d(500);  
  $('#monsteck_variketch').smart3d(500);  
  });  
  </script>


где 500 - это ширина вашей шапки.

2) Затем, пропишем html код нашей шапки в ПУ-->Управление дизайном-->Верхняя часть сайта.

Quote
<ul id="mindscape">
<li><img src="fon_1.jpg" /></li>
<li><img src="fon_2.png" /></li>
</ul>


Подразумевается, что наша шапка будет состоять из 2-х картинок: fon_1.jpg, fon_2.jpg, одна из которых, будет накладываться на другую.

3) В CSS мы пропишем это:

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

  #monsteck_variketch {  
  width: 400px;  
  height: 225px;  
  overflow: hidden;  
  }
Материал взят с сайта infoscript.ru
Теги: Скачать Paralax effect в шапке
Скачать "Paralax effect в шапке"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: center-dm.ru
Категория: Скрипты uCoz | Просмотров: 2044 | Добавил: antisept | Рейтинг: 4.6/9 |
Теги: Шапка, Effect, Paralax
Всего комментариев: 4
+1  
1 -=WaMpIr=-   (30.09.2011 17:00) [Материал]
Аватар пользователя
Воооо давно искал, никак не мог найти. Думал это реализуется только в флеш, а оказывается...=) Огромный респект и спасибо автору! smile

+1  
2 Victor   (30.09.2011 18:29) [Материал]
Аватар пользователя
Хорошая вещь!!! biggrin

0  
3 Voker -Infoscript Team-  (30.09.2011 19:00) [Материал]
Аватар пользователя
Нужно убдет испытать!

0  
4 Voker -Infoscript Team-  (30.09.2011 19:01) [Материал]
Аватар пользователя
будет*

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]