Скрипт воздушные шарики. Скрипты. Блог. Портал SzenProgs
 

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

Скрипты

Рисунок Скрипт воздушные шарики
Скрипт воздушные шарики Скрипт воздушные шарики
оценка: 4.2 из 5
оценок: 41, отзывов: 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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




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

rss
Категория:Скрипты
Просмотрено:9118
Рейтинг:4.2/41
Дата добавления: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:

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

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



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

Russellles
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz