[X] Помощник

[kismedia Topic Starter]

Зима - Новый Год. Многие хозяева сайтов хотят как-то украсить своё творение на новогодние праздники.
Одним из самых популярных способов является добавление на сайт анимации падающего снега.
Решений, скриптов реализующих эту возможность достаточно много , но мне больше всего понравился этот "Падающий снег на сайт на JQuery".
В этой анимации будет участвовать несколько видов различных снежинок, которые будут перемешиваться случайным образом, в результате чего, выглядеть будет все более эффектно.
Создание анимации ,как Вы поняли, будет реализовано по средствам библиотеки JQuery.

Пример этой анимации снега на моем сайте.

Для работы скрипта необходима библиотека Jquery практически любой версии, png-fix для IE6, сам скрипт и несколько картинок снежинок. Те снежинки, что лежат в архиве, не имеют полупрозрачности, соответственно не очень красиво будут отображаться в браузере поверх небелых элементов. Тут уже каждый сам для себя решит, что ему важнее. Если захотите использовать png24 с полупрозрачностью, то проблем не возникнет. Даже IE6 воспримет это нормально.

А вот и код самого скрипта падающих снежинок:

<link rel="stylesheet" type="text/css" href="Ваш путь до файла index.css" />
<script type="text/javascript" src="Ваш путь до файла jquery.js"></script>

<script type="text/javascript">
    snow_intensive=400;
    snow_speed=20000;
    snow_src=new Array('sneg1.gif','sneg2.gif','sneg3.gif','sneg4.png');

    $(document).ready(snow_start);

    function snow_start() {
        snow_id=1;
        snow_y=$("#container").height()-30;
        setInterval(function() {
            snow_x=Math.random()*document.body.offsetWidth-100;
            snow_img=(snow_src instanceof Array ? snow_src[Math.floor(Math.random()*snow_src.length)] : snow_src);
            snow_elem='<img class="png" id="snow'+snow_id+'" style="position:absolute; left:'+snow_x+'px; top:0;z-index:10000" src="'+snow_img+'"/>';
            $("#container").append(snow_elem);
            snow_move(snow_id);
            snow_id++;
        },snow_intensive);
    }

    function snow_move(id) {
        $('#snow'+id).animate({top:snow_y,left:"+="+Math.random()*100},snow_speed,function() {
        $(this).empty().remove();
    });}
</script>

Скрипт имеет несколько настроек:

container='container';
snow_intensive=400;
snow_speed=20000;
snow_src='sneg1.gif';

где:

- container – id блока, внутри которого будет идти снег. в моем примере по ссылке ниже указан айди основного контейнера сайта. то есть снег будет идти по всей площади окна браузера.
- snow_intensive – отвечает за интенсивность снега, чем меньше число, тем интенсивнее будет идти снег (не ставьте слишком маленькое значение, повесите слабые компьютеры пользователей, да и вообще рябить будет в глазах) .
- snow_speed – скорость снега (чем меньше число, тем быстрее будут падать снежинки) .
- snow_src – изображение снежинки, можно задать как одну картинку, так и в виде массива – тогда снежинки будут случайным образом перемешиваться.
Пример: snow_src=new Array(‘snow1.png’,'snow2.png’,'snow3.gif’);

Подробнее на сайте разработчика.

Скачать архив, включающий в себя всё необходимое для его работы можно по этой ссылке.

[TiP-A-ToP]

я тож знаю кул скрипт для падающего снега, поставил на своем сайте
вот код

<style>b{color:darkblue}</style>
<script>
// CREDITS:
// Snowmaker Copyright © 2003 Alexandr Strichotskiy. All rights reserved.
// Modified © 2005, Pavel Voronov, Nickname: 12345c
// Distributed by [url="http://www.masterwebs.ru/go.php?url=http://astoria-kas.com"]Astoria-KAS;[/url]
// Permission given to use the script provided that this notice remains as is.
var snowmax=25 // Set the number of snowflakes (more than 30 - 40 not recommended)
var snowcolor=["#c4bbcc","#ccddFF","#ccd6DD"]
// Set the colors for the snow. Add as many colors as you like
var snowtype=["Arial Black","Arial Narrow","Times","Comic Sans MS"]
// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowletter=["*","<img src=http://astoria-kas.com/snow/snow.gif>","<img src=http://astoria-kas.com/snow/snow21.gif>"];
// Set the letter that creates your snowflake (recommended:*)
var sinkspeed=0.6 // Set the speed of sinking (recommended values range from 0.3 to 2)
var snowmaxsize=45 // Set the maximal-size of your snowflaxes
var snowminsize=18 // Set the minimal-size of your snowflaxes
var snowsizerange=snowmaxsize-snowminsize
// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingleft=0.0 //левая граница присутствия снега
var snowingwidth=1.0 //ширина присутствия снега в окне
var opac=0.35 //непрозрачность снега (0.0-1.0), при 1.0 в 2 раза быстрее работает.
var stepTime=120 //шаг покадровой анимации (мсек). При менее 100 сильно нагружает процессор
var snow=new Array()
var marginbottom
var marginright
var timer
var x_mv=new Array(); var crds=new Array(); var lftrght=new Array();
var browserinfos=navigator.userAgent
d=document
var isOpera=self.opera
var ie5=d.all&&d.getElementById&&!isOpera
var ns6=d.getElementById&&!d.all
var browserok=ie5||ns6||isOpera

function randommaker(range){return Math.floor(range*Math.random())}

function botRight()
{
if(ie5||isOpera)
{
marginbottom=d.body.clientHeight;
marginright=d.body.clientWidth;
}
else
if(ns6)
{
marginbottom=innerHeight; marginright=innerWidth;
}
}

function checkPgDn()
{
scrltop=ns6?pageYOffset:document.body.scrollTop;
}

function initsnow()
{
checkPgDn();if(ns6)setInterval("checkPgDn()",999);
botRight();
for (i=0;i<=snowmax;i++)
{
crds[i] = 0;
lftrght[i] = Math.random()*20;
x_mv[i] = 0.03 + Math.random()/10;
snow[i]=d.getElementById("s"+i)
snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
snow[i].style.fontSize=snow[i].size=randommaker(snowsizerange)+snowminsize
snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
snow[i].sink=sinkspeed*snow[i].size/5
newPosSnow(randommaker(marginbottom-3*snow[i].size));
}
movesnow();
}

function newPosSnow(y)
{
var o;
snow[i].posx=randommaker(marginright*snowingwidth-2*snow[i].size)+marginright*snowingleft
snow[i].posy=y+(ns6?pageYOffset:d.body.scrollTop);
snow[i].size=randommaker(snowsizerange)+snowminsize;
if(snow[i].hasChildNodes()&&(o=snow[i].childNodes[0]).tagName=='IMG') o.width=o.height=randommaker(snowsizerange/1.6)+snowminsize;
}

function movesnow()
{
for (i=0;i<=snowmax;i++)
{
snow[i].style.top=snow[i].posy+=snow[i].sink+lftrght[i]*Math.sin(crds[i])/3;
crds[i] += x_mv[i];
snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
if(snow[i].posy>=marginbottom-3*snow[i].size+scrltop || parseInt(snow[i].style.left)>(marginright-3*lftrght[i]))newPosSnow(0);
}
var timer=setTimeout("movesnow()",stepTime)
}

for (i=0;i<=snowmax;i++)
{
d.write("<span id='s"+i+"' style='position:absolute;"+(opac<1?"-moz-opacity:"+opac+";filter:alpha(opacity="+(opac*100)+")":"")+";top:-"+snowmaxsize+"'>"
+snowletter[Math.floor(snowletter.length*Math.random())]+"</span>")
} //-moz-opacity:0.5;filter:alpha(opacity=50);

onload=function()
{
if(browserok)setTimeout("initsnow()",99);
}

onmousewheel = onscroll = function(){checkPgDn()}
onresize = function(){botRight();}
</script>

P.S. я ставил скрипт в шапку

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.