Скрипт воздушные шарики

Скрипты

Рисунок Скрипт воздушные шарики
x;z-index:1 }
Скрипт воздушные шарики Скрипт воздушные шарики
оценка: 4.2 из 5
оценок: 55, отзывов: 9

Добрый день, дорогие читатели! Сегодня рассмотрим скрипт воздушных шариков для сайта. Этот скрипт не использует никаких фреймворков и работает на чистом 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 i = 0;
  grphcs = new Array();

  // Список ссылок к картинкам воздушных шариков
  grphcs[i++] = 'http://szenprogs.ru/img/posts/003/balloon01.gif';
  grphcs[i++] = 'http://szenprogs.ru/img/posts/003/balloon02.gif';
  grphcs[i++] = 'http://szenprogs.ru/img/posts/003/balloon03.gif';
  grphcs[i++] = 'http://szenprogs.ru/img/posts/003/balloon04.gif';
  grphcs[i++] = 'http://szenprogs.ru/img/posts/003/balloon05.gif';
  grphcs[i++] = 'http://szenprogs.ru/img/posts/003/balloon06.gif';
  grphcs[i++] = 'http://szenprogs.ru/img/posts/003/balloon07.gif';
  grphcs[i++] = 'http://szenprogs.ru/img/posts/003/balloon08.gif';

  // Не редактировать ничего ниже этой линии
  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];
  }
  
  function getBallXPos(oball){
    if(ballingzone == 1){return randommaker(marginright - oball.size)}
    if(ballingzone == 2){return randommaker(marginright / 2 - oball.size)}
    if(ballingzone == 3){return randommaker(marginright / 2 - oball.size) + marginright / 4}
    if(ballingzone == 4){return randommaker(marginright / 2 - oball.size) + marginright / 2}
    if(ballingzone >= 100){return (randoms(0,1) == 0)?((randommaker(marginright / 2 - oball.size)) - ballingzone / 2):((randommaker(marginright / 2 - oball.size) + marginright / 2) + ballingzone / 2);}
    return 0;
  }

  function initball() {
    if (ie5 || opera) {
      marginbottom = document.body.scrollHeight;
      marginright = document.body.clientWidth - 15;
    }
    else if (ns6) {
      marginbottom = document.body.scrollHeight;
      marginright = window.innerWidth - 15;
    }
    var ballsizerange = ballmaxsize - ballminsize;
    for (var i = 0; i <= ballmax; i++) {
      crds[i] = 0;
      lftrght[i] = Math.random() * 15;
      x_mv[i] = 0.03 + Math.random() / 10;
      ball[i] = document.getElementById('s' + i);
      ball[i].onclick = function(){
        this.posx = getBallXPos(this);
        this.posy = marginbottom - 2 * this.size
      }
      ball[i].size = randommaker(ballsizerange) + ballminsize;
      ball[i].style.width = ball[i].size + 'px';
      ball[i].style.height = ball[i].size + 'px';
      ball[i].style.zIndex = 100 + ball[i].size;
      ball[i].sink = sinkspeed * ball[i].size / 5;
      
      ball[i].posx = getBallXPos(ball[i]);
      ball[i].posy = randommaker(2 * marginbottom - marginbottom - 2 * ball[i].size);
      ball[i].style.left = ball[i].posx + 'px';
      ball[i].style.top = ball[i].posy + 'px';
    }
    moveball();
  }

  function moveball(){
    for (var i = 0; i <= ballmax; i++){
      crds[i] += x_mv[i];
      ball[i].posy -= ball[i].sink;
      ball[i].style.left = (ballreverb)?(ball[i].posx + lftrght[i] * Math.sin(crds[i]) + 'px'):(ball[i].posx + lftrght[i] + 'px');
      ball[i].style.top = ball[i].posy + 'px';
      if(ball[i].posy < -ballmaxsize || parseInt(ball[i].style.left) > (marginright - 3 * lftrght[i])){
        ball[i].posx = getBallXPos(ball[i]);
        ball[i].posy = marginbottom - 2 * ball[i].size
      }
    }
    var timer = setTimeout('moveball()', ballspeed)
  }

  preloadimages(grphcs);

  for(var i = 0; i <= ballmax; i++){
    imgsrc = grphcs[randoms(0,grphcs.length-1)];
    document.write('<img src="' + imgsrc + '" id="s' + i + '" style="position:absolute;top:-' + ballmaxsize + '">');
  }
  
  if(browserok){
    window.onload = initball;
  }
//-->
</script>

Все параметры скрипта описаны в коде. Не меняйте ничего ниже линии с текстом "Не редактировать ничего ниже этой линии". Количество возможных воздушных шариков не ограничены. Постарайтесь выбирать картинки с прозрачностью. Лучше всего для этого подойдут GIF-файлы. Также, лучше выбирать картинки с равным значением ширины и высоты. Тогда воздушные шарики не будут деформироваться.

Если во время работы скрипта внизу браузера появляется полоса прокрутки, которобыть не должно, тогда пропишите в теле HEAD страницы следующий код:

Code
<style type="text/css">
body { overflow-x: hidden; }
</style>

Вместо воздушных шариков можно поставить и другие изображения. Например, организовать на сайте полет драконов. Ниже представлю несколько картинок, которые вы можете использовать вместо воздушных шариков.












Если будут вопросы - пишите. Как всегда отвечу и помогу. Рабочий пример скрипта воздушных шариков, как всегда, на странице.

На этом все. Подписывайтесь! Ставьте звездочки! Удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.

x;z-index:1 }


Скрипт воздушные шарики
Скрипты
Скрипты, инструкции, справочники

rss
Категория:Скрипты
Просмотрено:17596
Рейтинг:4.2/55
Дата добавления:2012-09-20 13:34, Четверг
Добавил:Szen
Теги:скрипт шариков, воздушные шарики, шарики

Мини-форум

№ 02012-09-20 13:34
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Скрипт воздушные шарики".
Гость
№ 1
2012-09-30 21:34
Домовой
Аватар участника Домовой
Здравствуйте!
Скрипт отличный, работает идеально.
Хотелось бы узнать что надо изменить в скрипте что бы движение картинок было не снизу вверх а с верху вниз?
Это для того что бы можно было его использовать к примеру для дождя, снега или осенних листьев.
Юрий
№ 2
2012-09-30 21:40
Домовой
Аватар участника Домовой
Хотя не надо, есть скрипт для снега, его можно переделать под дождь и прочее.
Спасибо.
Юрий
№ 3
2012-09-30 22:03
Szen
Аватар участника Szen
Домовой, этот скрипт и есть переработка скрипта падающего снега. Источник тут: скрипт снегопада с картинками.
Szen
№ 4
2012-10-01 22:47
Домовой
Аватар участника Домовой
Да я уже вкурил потом когда написал)))
Юрий
№ 5
2014-09-10 15:23
Кукл@
Аватар участника Кукл@
Доброго времени суток! А вот вместо шариком можно поставить пузыри например?
Нинелька
№ 6
2014-09-10 15:51
Szen
Аватар участника Szen
Кукл@, да запросто. Просто вместо картинок шариков исаользуете картинки пузырей.
Szen
№ 7
2014-09-11 13:05
Кукл@
Аватар участника Кукл@
Спасибки за ответ..
Нинелька
№ 8
2014-11-05 16:09
chameleon9
Аватар участника chameleon9
Подскажите, как сделать, при нажатии на шарик, переход по ссылке
Влдимир
№ 9
2015-05-11 10:17
Vitaly
Аватар участника Vitaly
подскажите, где найти gif картинки как у Вас со скриптами с шариками
Виталий
Учавствовать в обсуждении "Скрипт воздушные шарики" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Посетители
Зарегистрированных посетителей не было.
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Каким CMS вы пользуетесь?
Всего ответов: 246
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 3
Гостей: 3
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2024 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz