Онлайн всего: 1
Гостей: 1
Пользователей: 0


ДЕМО Скачать исходники



Эффект Паралакса с использованием мультфильма Спанч-Боб. На вид получилось неплохо. Для тех кто незнает что такое Паралакс - это движущееся картинка при наведении.

Установка:

1. Перед тегом </head> вставьте следующий код:
Code
<script type="text/javascript" src="http://ripbox.do.am/lesson/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://ripbox.do.am/lesson/jquery.jparallax.js"></script>
<link rel="stylesheet" type="text/css" href="http://ripbox.do.am/lesson/paralax.css">
<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery('#parallax').jparallax({});
});
</script>


2. Там где вы хотите видеть этот Паралакс вставьте этот код:
Code
<div id="parallax">
  <div style="width: 700px; height: 300px;">
  <img alt="" src="http://ripbox.do.am/lesson/nebo.png">
  </div>
  <div style="width: 750px; height: 280px;">
  <img style="position:absolute; top:0px; left:350px;" alt="" src="http://ripbox.do.am/lesson/th_jellyfish.gif">
  </div>
  <div style="width: 700px; height: 250px;">
  <img style="position:absolute; top:200px; left:0px;" alt="" src="http://ripbox.do.am/lesson/trava.png">
  </div>
  <div style="width: 900px; height: 260px;">
  <img style="position:absolute; top:100px; left:150px;" alt="" src="http://ripbox.do.am/lesson/pbob.png">
  </div>
  <div style="width: 900px; height: 260px;">
  <img style="position:absolute; top:100px; right:150px;" alt="" src="http://ripbox.do.am/lesson/patrik.png">
  </div>
  <div style="width: 800px; height: 250px;">
  <h1 style="position:absolute; top:100px; right:355px;">RIPBOX.DO.AM</h1>
  </div>
</div>


Желаю удачи. Если возникнут ошибки пишите их прямо в комментарий.





nbv | Комментарий № 1 | Дата: 27.01.2012Спам

классно получиЛОСЬ))_

Создать бесплатный сайт с uCoz