|
Еще одна интересная фишка, которая засветилась на одном из сайтов 1 апреля. Думаю, Вы увидите эффект, дочитав до конца это предложение :) . Боковые элементы сайта начали стремительное падение и цепляние друг друга. Управляет этим делом физический движок box2d.
|
|
|
|
В шапке страницы подключаем необходимые файлы:
|
<script type = "text/javascript" src = "protoclass.js"></script>
<script type = "text/javascript" src = "box2d.js"></script>
<script type = "text/javascript" src = "Main.js"></script>
|
|
Файл box2d.js содержит все функции, необходимые для падения. Файл Main.js управляет процессом создания и запуском в действие. Скажу сразу - код не мой, а найден на просторах великой и могучей сети Интернет.
|
|
Для начала нужно указать, в какой области будет происходить "движение". Скрипт ищет область по id = "canvas". Поэтому код страницы немного изменился:
|
|
|
<div class = "body_div" id = "canvas">
|
|
А дальше, для каждого элемента, который должен падать, перед названием класса (если такой имеется) дописываем "box2d"
|
|
|
<div class = "box2d column_head">
<span class = "box2d">
|
|
В файле Main.js опишу функции, которые запускают падение элементов. Как видно, после загрузки страницы, спустя 10 секунд инициализируется среда и запускается физическая модель:
|
|
|
function bodyOnload() {
jQuery('body').unbind('click'); init(); run();
}
jQuery(document).ready(function(){
setTimeout(bodyOnload, 10000);
});
|
Скачать файлы можно тут:
protoclass.js box2d.js Main.js
|