четверг, 10 января 2013 г.

Снег кружится...прямо в блоге


Вчера лишилась дара речи: меня, того еще программера, попросили написать пост о том как сделать падающие снежинки в блоге. Сначала я рассмеялась от неожиданности: это меня надо всему учить...а потом задумалась и полезла ко всезнайке- в интернет. Нашла информацию сразу. Сразу же попыталась ее реализовать у себя в блоге, но не тут то было. То не могу поменять некрасивые звездочки на снежинки, то снежинка есть одна и никуда не падает, то вместе со снежинками присутствует звук (я против звуков в блоге: выбрать музыку,которая будет нравиться всем просто не реально и читателю легче закрыть этот блог, нежели искать способ отключить звук)..В общем получилось не сразу, но получилось..впрочем, Вы это уже сами заметили.
Прежде чем напишу как это сделать, сразу попрошу прощения за неудобства: скопировать у меня текст мышкой не получится, так как поставила когда то запрет на копирование. Но есть способ обойти его: код нужно выделить как обычно с помощью мышки, а вот клик правой клавиши заменить нажатием на клавиатуре ctrl+c. (Я не помню куда именно этот запрет сохранила, чтобы временно его отменить) и дальше как обычно работать мышкой.

К делу. Открываем ДИЗАЙН, кликаем ДОБАВИТЬ ГАДЖЕТ, выбираем в открывшемся окне 
HTML/JavaScript и вставляем вот этот самый код, который будете копировать с помощью мышки и клавиатуры.

Совет: дайте имя гаджету (я именовала Снежинки), чтобы весной знать, где этот снегопад отключить, иначе будете голову ломать.

<script type="text/javascript">

  

  //Configure below to change URL path to the snow image

  var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj73VR53SHbF3djYYkwDBpAE2w_tDUF8-T8S6zxcmDbOCent_LgAJzhtze5qYF0sD1pMCPRjilICtQyR6cT8j42cSnzKCODHk7yxY553s9o_11jQBlCN7poQYWdmkH32fzln7HgtqkjX_4/s1600/Cyt%253Bbyrf.png"
  // Configure below to change number of snow to render

  var no = 12;

  // Configure whether snow should disappear after x seconds (0=never):

  var hidesnowtime = 0;

  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
  var snowdistance = "pageheight";
///////////Stop Config//////////////////////////////////
  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 600;

  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }
  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();

  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj73VR53SHbF3djYYkwDBpAE2w_tDUF8-T8S6zxcmDbOCent_LgAJzhtze5qYF0sD1pMCPRjilICtQyR6cT8j42cSnzKCODHk7yxY553s9o_11jQBlCN7poQYWdmkH32fzln7HgtqkjX_4/s1600/Cyt%253Bbyrf.png" : snowsrc


  for (i = 0; i < no; ++ i) { 

    dx[i] = 0;                        // set coordinate variables

    xp[i] = Math.random()*(doc_width-50);  // set position variables

    yp[i] = Math.random()*doc_height;

    am[i] = Math.random()*20;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
        if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }
  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
        doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px"; 
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }
    function hidesnow(){
        if (window.snowtimer) clearTimeout(snowtimer)
        for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
    }   
if (ie4up||ns6up){
    snowIE_NS6();
        if (hidesnowtime>0)
        setTimeout("hidesnow()", hidesnowtime*1000)
        }
</script>



Заметили в коде цифру красного цвета? она отвечает за количество снежинок. Я заменила на 20. Теперь сохраняем. Перетаскиваем гаджет СНЕЖИНКИ на самый верх и растягиваем по ширине. Сохраняем расположение и любуемся результатом. 

Самым внимательным поясняю, что выделенное жирным шрифтом это не что иное как URL картинки. То есть осенью замените снежинку на кленовый лист и получите листопад.
Марина, спасибо за оказанное доверие! Очень надеюсь, что тебе понравился этот вариант снежинок. 

Примечание: на фоне сочных цветов снежинки лучше видны. 

P.S. мы успели поспорить с сестрой о целесообразности сего гаджета. Сестренка сказала, что встречала подобное, но оно ее отвлекает...Впрочем, именно этот вариант удобен тем, что снег падает только сверху и только на первое фото, не отвлекая от текста и не искажая остальные фотографии

6 комментариев:

  1. Здравствуйте. Когда добавила этот скрипт себе на блог, у меня google заблокировал мою страницу. Написало, что у меня есть ссылка на вредоносный сайт. Удалила гаджет - все нормально. Обидно. Хотелось снежинок.

    ОтветитьУдалить
  2. Google Chrome заблокировал доступ к этой странице на сайте myblogdvn.blogspot.com.
    Эта страница содержит контент с сайта www.dwebresources.com, который был замечен в распространении вредоносного ПО. Ее посещение может привести к заражению вашего компьютера.

    ОтветитьУдалить
    Ответы
    1. Странно. Прошлой зимой у меня и моих читателей тот снег кружился и не было никаких проблем.

      Удалить
    2. На следующий день зашла - снег кружится и ошибку не выдает. Странно. Спасибо за скрипт ))) Как сделать чтобы листья падали вместо снежинок? Понимаю, что нужно взять картинку листьев, но какой размер и анимирована ли картинка ,?

      Удалить

Дорогой мой читатель, если Вам понравилась статья, то напишите отзыв, мне очень приятно читать комментарии. А если Вы посчитаете, что статья достойна того, чтобы ее порекомендовать остальным, нажмите на +1.

Хотите сохранить полезную информацию в соц.сетях? Выбираем и сохраняем!

LinkWithin

Related Posts Plugin for WordPress, Blogger...