Хаки и Скрипты Next Generation CMS

Падающий снег на сайт на css и js

irbees2008 irbees2008 Опубликовано - 29 - декабря CSS
4791 - 0
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Красивый падающий снег на ваш сайт,настройки простые .

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

Код:
<style type="text/css">
@font-face {
font-family: WWFlakes;
src: local("WWFlakes"),
url(http://ВАШСАЙТ/WWFlakes.ttf); /* Качаем данный шрифт и помещаем к вам указав сюда путь к файлу =) */
}
</style>
<script type="text/javascript">
// Количество снежинок на странице (Ставьте в границах 30-40, больше не рекомендую)
var snowmax=55;

// Установите цвет снега, добавьте столько цветов сколько пожелаете
var snowcolor=new Array("#0BBAFF","rgb(185, 196, 218)","#CCCCDD","#F3F3F3","#F0FFFF","rgb(185, 196, 218)","#EFF5FF")

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

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

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

// Установите минимальный размер снежинки
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].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;font-family: WWFlakes;'>"+snowletter+"</span>");
}
if (browserok) {
window.onload=initsnow;
}
</script>

Можешь почитать и вот эту статейку "Эффект для изображений Image Tilt Effect"

Опрос

Ваше мнение

Какие темы вам интереснее?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4426 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 665
  • Онлайн всего: [94]
  • Гости: [94]
  • Были сегодня : [2] Яндекс, Google
  • SQL запросов: 33
  • Генерация страницы: 0.309сек
  • Потребление памяти: 5.172 Mb 
  •   Яндекс.Метрика