Добрый день, дорогие читатели! Сегодня рассмотрим скрипт воздушных шариков для сайта. Этот скрипт не использует никаких фреймворков и работает на чистом JavaScript. Внешний вид воздушных шариков задается изображениями, поэтому у вас будет полная свобода выбора.
И так, начнем. Скрипт состоит из единственного кода, который лучше размещать перед закрывающим тегом BODY внизу сайта. Это уменьшит нагрузку на страницу и воздушные шарики начнут подниматься уже после загрузки контента сайта. Код выглядит следующим образом:
Code
<script type="text/javascript"><!--
// Количество воздушных шариков (не ставьте слишком много - может затормозить браузер)
var ballmax = 50;
// Разность скорости слоев (рекомендуется от 0.3 до 2)
var sinkspeed = 0.6;
// Максимальный размер воздушных шариков (пиксели)
var ballmaxsize = 40;
// Минимальный размер воздушных шариков (пиксели)
var ballminsize = 10;
// Скорость полета воздушных шариков (мс)
var ballspeed = 20;
// Зона подъема воздушных шариков
// 1 - подъем воздушных шариков на всем пространстве
// 2 - подъем воздушных шариков в левой части
// 3 - подъем воздушных шариков по центру
// 4 - подъем воздушных шариков в правой части
// больше или равно 100 - подъем воздушных шариков по краям.
// Указанное число освободит место в пикселях от воздушных шариков в пикселях по-центру
var ballingzone = 1;
// Пошатывание воздушнвх шариков влево-вправо
// true - пошатываться
// false - не пошатываться
var ballreverb = true;
// Не редактировать ничего ниже этой линии
var ball = new Array();
var marginbottom;
var marginright;
var timer;
var i_ball = 0;
var x_mv = new Array();
var crds = new Array();
var lftrght = new Array();
var browserinfos = navigator.userAgent;
var ie5 = document.all&&document.getElementById&&!browserinfos.match(/Opera/);
var ns6 = document.getElementById&&!document.all;
var opera = browserinfos.match(/Opera/);
var browserok = ie5||ns6||opera;
function randommaker(range){
rand=Math.floor(range*Math.random());
return rand;
}
function randoms(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
};
function preloadimages(img){
image = new Image();
for(var i = 0; i < img.length; i++) image.src = img[i];
}
Все параметры скрипта описаны в коде. Не меняйте ничего ниже линии с текстом "Не редактировать ничего ниже этой линии". Количество возможных воздушных шариков не ограничены. Постарайтесь выбирать картинки с прозрачностью. Лучше всего для этого подойдут GIF-файлы. Также, лучше выбирать картинки с равным значением ширины и высоты. Тогда воздушные шарики не будут деформироваться.
Если во время работы скрипта внизу браузера появляется полоса прокрутки, которобыть не должно, тогда пропишите в теле HEAD страницы следующий код:
Code
<style type="text/css">
body { overflow-x: hidden; }
</style>
Вместо воздушных шариков можно поставить и другие изображения. Например, организовать на сайте полет драконов. Ниже представлю несколько картинок, которые вы можете использовать вместо воздушных шариков.
Если будут вопросы - пишите. Как всегда отвечу и помогу. Рабочий пример скрипта воздушных шариков, как всегда, на странице.
На этом все. Подписывайтесь! Ставьте звездочки! Удачи в свершениях!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
Здравствуйте! Скрипт отличный, работает идеально. Хотелось бы узнать что надо изменить в скрипте что бы движение картинок было не снизу вверх а с верху вниз? Это для того что бы можно было его использовать к примеру для дождя, снега или осенних листьев.