К основному контенту

Снег кружится..прямо в блоге. Блоговедение для чайников №4.





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

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

<script type="text/javascript">

  
  //Configure below to change URL path to the snow image
  var snowsrc="http://2.bp.blogspot.com/-Tl7oBVB9KxY/TvzjTo0RU4I/AAAAAAAABrc/9Dk58kOAOSM/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)? "http://2.bp.blogspot.com/-Tl7oBVB9KxY/TvzjTo0RU4I/AAAAAAAABrc/9Dk58kOAOSM/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. мы успели поспорить с сестрой о целесообразности сего гаджета. Сестренка сказала, что встречала подобное, но оно ее отвлекает...Впрочем, именно этот вариант удобен тем, что снег падает только сверху и только на первое фото, не отвлекая от текста и не искажая остальные фотографии


Комментарии

  1. Минус еще и в том, что каждый гаджет утяжеляет страницу, она начинает долго грузиться и подтормаживать) Хотя смотрится красиво:)

    И, кстати, получите-распишитесь: http://valeryka.blogspot.ru/2012/12/liebster-blog-award.html

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

      За награду спасибо огромное! А вот за вопросы...тебе не жаль мозг номинантов?

      Удалить
    2. НЕЕЕЕТ! *зловещий смех*
      =)))

      Удалить
  2. Ответы
    1. Это я проверяла, работают ли тэги в комментах))

      Удалить
  3. Я наверное еще после работы не пришла в себя, думала,что у меня мельтешит перед глазами:)

    ОтветитьУдалить
    Ответы
    1. Пусть до Нового года снег кружится, потом уберу и начну дать весну.

      Удалить
  4. В любом случае рубрика классная у тебя! Продолжай так или иначе, а остальное - дело вкуса!

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

      Удалить
  5. Урааа-уррраа! это как раз для меня - для чайника :)
    А мне нравятся падающие снежинки, очень по новогоднему смотрится )
    Спасибо!

    ОтветитьУдалить
    Ответы
    1. Очень приятно доставлять радость! Спасибо за такие эмоции!!!Я еще не разбалована комментариями)))

      Ничего,если я тут продолжу тему поста? Когда я снежинки опробовала, снег совсем не падал на текст и не отвлекал. В этом же посте при первоначальном просмотре, снежинки кружились и по тексту...Что я предприняла? Фото поста спустила ниже на пару строк и сам текст тоже спустила пониже. Итог меня устроил: смотрится все достаточно гармонично и ничего не мешает)))

      Удалить

Отправить комментарий

Популярные сообщения из этого блога

Антицеллюлитный крем или ААААААА, как все горит!!!!!!

История эта произошла не вчера и даже не в прошлом году, но до сих пор вызывает улыбку, а то и смех. Не подумайте, что мой блог сменил направление в сторону бьюти, нет. Но речь пойдет о креме. Точнее, об антицеллюлитном креме. Это не реклама, а прикольная история, как мы тестировали чудо крем.
В то время у меня был свой небольшой магазинчик, который приносил не только деньги, но и моральное удовлетворение. Я всегда прислушивалась к словам, просьбам и советам покупателей, всегда старалась найти для них то, что просят, удивить новеньким и просто любила с ними поболтать. Столько лет прошло, а со мной до сих пор здороваются и улыбаются мне.
Так вот однажды мое внимание привлек спрос на один крем. Я никогда не верила, что крем может помочь похудеть. В этом вопросе спорт зал справится в разы лучше, поэтому и покупателям никогда не "втирала" про чудодейственные средства. Но этот крем пришлось заказывать много, так как его отлично покупали без моих рекомендаций. Зацепило! Я начала …

Хотите, чтобы ваши интересные фотографии отображались в поисковиках? Читаем как это сделать.

Неожиданно новая рубрика по ведению блога принесла мне новых читателей. И хотя такой цели у меня не было, тем не менее я рада, тем более, что читатели и сами очень интересно пишут. Так как мой компьютер чудесным образом не поправился, посты про наши интересные каникулы отменяются. НО! Я нашла новые интересности из мира блоговедения.
Что Вы делаете, если нужно найти картинку на конкретную тему? Я обращаюсь в поисковик и выбираю в открывшемся разнообразии понравившийся вариант. Думаю, что Вы поступаете так же. А хотите, чтобы сделанные Вами интересные, яркие и уникальные фотографии тоже выдавал поисковик ? Легко! Будем учить новые слова))) (прежде чем пугаться,дочитайте до конца, и Вы поймете, что все очень даже просто)

Голова болит или супер секс с женой (своей)

Улыбнуло! Еще больше меня смешит миф о том, что жены отказываются от секса как в целом, так и в частности под предлогом ГОЛОВА БОЛИТ. 
Пусть мой блог мужчины и не читают, но мне понравилась небольшая статейка из инета (простите, но автора не знаю, сохраняла давно). 
Супер-секс с женой (своей)
Текст прислан: Я Осень...
Братья по разуму! Я обращаюсь к вам. То есть к мужчинам. Многие из вас женаты. Женаты давно и уже, видимо, навсегда. И у многих есть одна и та же проблема - секс. Жена не хочет заниматься с вами сексом так часто, как хочется вам? У нее перманентные головные боли, недосыпание, критические дни? Она холодна в постели, не проявляет инициативу, уклоняется от исполнения супружеского долга? Какая подлость!
Несомненно, это следствие ее стервозной натуры. И что же делать? Как изменить ситуацию, превратить эту "снежную королеву" в горячую штучку, похотливую нимфу, ненасытную развратницу? Очень просто, скажу я вам. Нужно лишь использовать несколько нехитрых приемов, о которых …