BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Эффекты для сайта » Эффект падающего снега

Эффект падающего снега

2012-12-15 / Вр:18:12 / просмотров: 13002

Вот сижу на работе и думаю, скоро приближается Новый Год и наверняка веб-мастеру захочется установить на сайт красивый эффект падающего снега для сайта, это же будет в тему. Эффект работает с помощью HTML+JavaScript. Те, кто разбирается хоть немного в HTML, смогут установить эффект падающего снега и на движки CMS (WordPress, Joomla). Если возникнут трудности, пишите в комментариях, буду рад ответить. Вы уже хотите приступить к теме? Имейте терпение, не все сразу, я хочу немного выговориться. Если вам нравится тема «эффекты для сайта», подписывайтесь на RSS – ленту и будете всегда в курсе обновлений новостей. Вот, теперь приступим к эффекту «падающий снег».

Красивый эффект падающих снежинок для сайтов HTML+JavaScript.

Эффект падающего снега


<script language="JavaScript1.2">
 grphcs=new Array(6);
 Image0=new Image();
 Image0.src=grphcs[0]="images/snow1.gif";
 Image1=new Image();
 Image1.src=grphcs[1]="images/snow.gif";
 Image2=new Image();
 Image2.src=grphcs[2]="images/snow2.gif";
 Image3=new Image();
 Image3.src=grphcs[3]="images/snow3.gif";
 Image4=new Image();
 Image4.src=grphcs[4]="images/snow4.gif";
 Image5=new Image();
 Image5.src=grphcs[5]="images/snow5.gif";
 Image6=new Image();
 Image6.src=grphcs[6]="images/snow.gif";
 Amount=15;
 Ypos=new Array();
 Xpos=new Array();
 Speed=new Array();
 Step=new Array();
 Cstep=new Array();
 ns=(document.layers)?1:0;
 ns6=(document.getElementById&&!document.all)?1:0;
 if (ns){
 for (i = 0; i < Amount; i++){
 var P=Math.floor(Math.random()*grphcs.length);
 rndPic=grphcs[P];
 document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
 }
 }
 else{
 document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
 for (i = 0; i < Amount; i++){
 var P=Math.floor(Math.random()*grphcs.length);
 rndPic=grphcs[P];//osw
 document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
 }
 document.write('</div></div>');
 }
 WinHeight=600;
 WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
 for (i=0; i < Amount; i++){
 Ypos[i] = Math.round(Math.random()*WinHeight);
 Xpos[i] = Math.round(Math.random()*WinWidth);
 Speed[i]= 1.2;
 Cstep[i]=0;
 Step[i]=Math.random()*0.1+0.2;
 }
 function fall(){
 var WinHeight=600;
 var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
 var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;
 var wscrll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft;
 for (i=0; i < Amount; i++){
 sy = Speed[i]*Math.sin(90*Math.PI/180);
 sx = Speed[i]*Math.cos(Cstep[i]);
 Ypos[i]+=sy;
 Xpos[i]+=sx;
 if (Ypos[i] > WinHeight){
 Ypos[i]=-60;
 Xpos[i]=Math.round(Math.random()*WinWidth);
 Speed[i]=1;
 }
 if (ns){
 document.layers['sn'+i].left=Xpos[i];
 document.layers['sn'+i].top=Ypos[i]+hscrll;
 }
 else if (ns6){
 document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]);
 document.getElementById("si"+i).style.top=Ypos[i]+hscrll;
 }
 else{
 eval("document.all.si"+i).style.left=Xpos[i];
 eval("document.all.si"+i).style.top=Ypos[i]+hscrll;
 }
 Cstep[i]+=Step[i];
 }
 setTimeout('fall()',40);
 }
 window.onload=fall
 //-->
 </script>

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 <title>Эффект падающего снега</title>
 </head>
 <body bgcolor="000000">
 </body>
 </html>

Скачать форму поиска.Эффект падающего снегаПросмотреть пример. Эффект падающего снега

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

Эффект падающего снега

<html>
 <title>
 Эффект падающего снега
 </title>
 <head>

<SCRIPT type="text/javascript">
 // Количество снежинок на странице (Ставьте в границах 30-40, больше не рекомендую)
 var snowmax=35;

// Установите цвет снега, добавьте столько цветов сколько пожелаете
 var snowcolor=new Array("#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF","#FFFFFF","#EFF5FF")

// Поставьте шрифты из которых будет создана снежинка ставьте столько шрифтом сколько хотите
 var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS");

// Символ из какого будут сделаны снежинки (по умолчанию * )
 var snowletter="*";

// Скорость падения снега (рекомендую в границах от 0.3 до 2)
 var sinkspeed=0.3;

// Максимальный размер снежинки
 var snowmaxsize=42;

// Установите минимальный размер снежинки
 var snowminsize=8;

// Устанавливаем положение снега
 // Впишите 1 чтобы снег был по всему сайту, 2 только слева
 // 3 только по центру, 4 снег справа
 var snowingzone=1;

/*
 // * ПОСЛЕ ЭТОЙ ФРАЗЫ БОЛЬШЕ НЕТ КОНФИГУРАЦИИ*
 */

// НИЧЕГО НЕ ИЗМЕНЯТЬ

var snow=new Array();
 var marginbottom;
 var marginright;
 var timer;
 var i_snow=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 initsnow() {
 if (ie5 || opera) {
 marginbottom=document.body.clientHeight;
 marginright=document.body.clientWidth;
 }
 else if (ns6) {
 marginbottom=window.innerHeight;
 marginright=window.innerWidth;
 }
 var snowsizerange=snowmaxsize-snowminsize;
 for (i=0;i<=snowmax;i++) {
 crds[i]=0;
 lftrght[i]=Math.random()*15;
 x_mv[i]=0.03+Math.random()/10;
 snow[i]=document.getElementById("s"+i);
 snow[i].style.fontFamily=snowtype[randommaker(snowtype/length)];
 snow[i].size=randommaker(snowsizerange)+snowminsize;
 snow[i].style.fontSize=snow[i].size+"px";
 snow[i].style.color=snowcolor[randommaker(snowcolor.length)];
 snow[i].sink=sinkspeed*snow[i].size/5;
 if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
 if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
 if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
 if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
 snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size);
 snow[i].style.left=snow[i].posx+"px";
 snow[i].style.top=snow[i].posy+"px";
 }
 movesnow();
 }
 function movesnow() {
 for(i=0;i<=snowmax;i++) {
 crds[i]+=x_mv[i];
 snow[i].posy+=snow[i].sink;
 snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+"px";
 snow[i].style.top=snow[i].posy+"px";
 if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])) {
 if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
 if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
 if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
 if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
 snow[i].posy=0;
 }
 }
 var timer=setTimeout("movesnow()",50);
 }
 for (i=0;i<=snowmax;i++) {
 document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"px;'>"+snowletter+"</span>");
 }
 if (browserok) {
 window.onload=initsnow;
 }
 </SCRIPT>
 </head>
 <body bgcolor="#000">
 <p><font face="arial, helvetica" size="-2"><a href="http://bloggood.ru/">Снег Powered by bloggood </a></font></p>
 </body>
 </html>

Просмотреть пример. Эффект падающего снега

Вот и все. Рад был помочь с эффектом падающего снега. Если вы используете WordPress и вовсе не разбираетесь в кодировках сайта, могу вам посоветовать плагины с эффектом падающего снега. Заходим и читаем статью "плагины для WordPress с эффектом падающего снега".

Если вы используете Joomla, могу вам предложить модуль с эффектом падающего снега. Читаете про это здесь.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

13 Ответов на комментарий - Эффект падающего снега

  1. Стас

    Это конечно хорошо, а можно “Эффект падающего снега” для WordPress. Я просто чайник и не знаю что делать и куда вставлять “я про код говорю” :oops:
    Буду признателен, если вы расскажете как сделать “Эффект падающего снега” на WordPress. Все готов записывать :idea:
    Спасибо!!! :arrow:

    Ответить

    Степан => автор блога

    ☼Степан ☼ автор блога отвечает:

    Стас,я постараюсь успеть до Нового Года написать про «Эффект падающего снега» для WordPress”.

    Ответить

  2. Дима

    Большое спасибо, всё работает, вашу ссылку оставил

    Ответить

  3. Эффект конечно классный, только вот одного кода джава куча. Можно такой же эффект сделать на CSS и будет не хуже чем этот. Конечно для тех кому поровну какой код ставить, лишь бы снежинки шли, то пусть ставят. Но все же этого кожа слишком много для падающих снежинок. На CSS намного меньше кода. А так эффект симпотичный

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Если не сложно, выложите код снежинок на CSS. Тяжело представить, что в стилях код будет меньше.

    Ответить

    Александр отвечает:

    Степан, вот сюда пройдите
    freeacces.ru/sait/novogodniy-snegopad-dlya-vashego-bloga.html и посмотрите эффект снега на CSS. сам лично писал этот пост и те снежинки которые идут на блоге, как раз на CSS.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Классно получилось!

    Ответить

    Александр отвечает:

    Кстати, хочу поинтересоваться, вы когда зашли на мой блог, всплывающее окно появилось или нет ?

    Степан => автор блога

    Степан => автор блога отвечает:

    Да, с каждым переходом или обновлением всплывающее окно появилось

  4. Почему интересуюсь про всплывающее окно, просто я к нему привязал куки на две минуты. У себя когда проверяю в хроме работает, то есть появилось окно, закрыл его, а через минуту обновляю страницу и окно не появляется, а через пару минут при переходе и обновлении страницы появляется. А как зайду в админку так оно мне вообще не показывается.
    Приходится проверять в других браузерах или кого просить чтоб глянули. Вот сейчас поменял куки на 5 минут, а то 2 мин по моему мало. Вообще куки классная вещь, некоторых раздражает когда оно появляется постоянно при переходах. Меня тоже нервирует когда при переходах постоянно появляется всплывающее окошко. Кое как я эти куки прикрутил к окну, опять пришлось доставать бубны и танцевать целые сутки, чтоб начало нормально работать

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    было бы классно сделать, чтобы всплывающее окно появлялся для одного чел. раз в сутки.

    Ответить

    Александр отвечает:

    С этим проблем нет. Но есть разные модальные окна. Вот к примеру для FancyBOX надо по своему привязывать куки, как раз у меня стоит FancyBOX. А если использовать модальное окно на чистом CSS то там по другому надо привязывать куки. Да и сам автозапуск этих модальных окон прописывается по разному. К окну на CSS привязать не проблема, а вот к FancyBOX проблема. На форумах не все корректно отвечают. В основном дают код с куками такой, что один человек зашел увидел окошко и записались куки, но второй заходит и ему не показывается окно, типа одна кука для всех. Но так же не катит, нужно чтоб для каждого было отдельно, вот в этом то и проблема. Я скоро напишу пост на эту тему и вам, Степан, в личку отпишу. Вообще сегодня хотел выложить пост про легковесный скрипт увеличения картинок, а тут комментарии да комментарии.
    А вообще давайте дружить, как вам такое предложение?
    Мне кстати интересно гулять у вас на блоге, много полезного написано, но вот конечно не все новички могут проделать такие приемы. Но как говорил наш дядюшка Ленин: “Учиться, учиться и еще раз учиться”. И я думаю что без этого не куда, тем более если решил делать свой блог или сайт.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Давайте дружить. Добавляйтесь ко мне в друзья https://vk.com/bloggood.

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , , ,

Мои цели на 2016 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 669
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3663