Данный материал предоставлен сайтом ProWebber.cc исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно Падающий снег на сайт (JQuery).
Скачать бесплатно Падающий снег на сайт (JQuery).
Для работы скрипта необходима библиотека Jquery практически любой версии, png-fix для IE6, сам скрипт и несколько картинок снежинок. Те снежинки, что лежат в архиве, не имеют полупрозрачности, соответственно не очень красиво будут отображаться в браузере поверх небелых элементов. Тут уже каждый сам для себя решит, что ему важнее. Если захотите использовать png24 с полупрозрачностью, то проблем не возникнет. Даже IE6 воспримет это нормально.
Демо страница: demo
А вот и код самого скрипта падающих снежинок:
<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’);
TO USER: Для DLE 9.0 подключать Jquery не нужно (он есть по дефолту).
Внимание! У Вас нет прав для просмотра скрытого текста.
Предыдущая Следующая