Регистрация    Войти
Авторизация

Движущаяся шапка блога эффект 3D для ucoz

Движущаяся шапка блога эффект 3D для ucoz

Движущаяся шапка блога эффект 3D для ucoz. В этом небольшом уроке, мы будем рассматривать пример того, как создать движущеюся шапку в блоге, из двух изображений или проще говоря эффект 3D для ucoz.
Шаг-1 JS:


Давайте установим после тега следующие скрипты:


<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:


Тут всё просто, мы будем использовать списки в которые поместим ссылку на графическое изображение шапки, основного фона и фона с движущимся персонажем в моём случае:


<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;
}


На этом всё, единственное, что хочу сказать от себя, так это то, что у данного решения существует один большой минус, если первое изображение фона можно обработать в Фотошопе и сжать его размеры, то вот второе изображение фона, должно иметь прозрачность PNG24, из-за чего, данное изображение будет иметь большой вес.

Внимание! У вас нет прав для просмотра скрытого текста.
Новые скрипты для ucoz

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  14-04-2011, 20:19   Просмотров: 5366   
эффект, шапка, блога, ucoz, Движущаяся
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Пользователь offline Andreshka 31 мая 2011 22:16
Пример реализации 3D шапки

          1

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.