Поиск по сайту


Авторизация




 

Опрос

Перевод времени


 
 

Новости партнеров

Реклама







Как сделать падающий снег на сайте

мысли / полезное 19 декабря 2007 60 845 

Реклама на сайте

Как сделать падающий снег на сайте


Как сделать падающий снег на сайте.

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

Собственно все элементарно! В тело html-страницы вставляем Ява-скрипт и на сайте уже падает снег.
Но я предлагаю более изящное решения для сайтов на основе движка DLE.
Для начала, переходим в админку, в ней находим раздел «Рекламные материалы».

Как сделать падающий снег на сайте


В нем создаем новый баннер.
Название баннерного поля: пишем sneg.
Описание баннера: например, «падающие снежинки».

Как сделать падающий снег на сайте


В тело баннера вводим код:
<script>
<!-- Begin
// требования: только поддержка JAVA и все.
// скрипт всегда должен вставлятся сразуже после тега body иначе он не будет работать.
//создайте обязательно самостоятельно рисунок (sneg.gif)или пропишите путь ниже.
// если Вы хотите преукрасить свой сайт то это то что нужно:
var no = 20; // [b]количество снежинок[/b]
var speed = 20; // [b]скорость снежинок[/b]
var snowflake = "sneg.gif"; //[b]рисунок, который будет падать[/b]

var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ns4up) {
if (i == 0) {
document.write("<layer name="dot"+ i +"" left="25" ");
document.write("top="25" visibility="show"><img src="");
document.write(snowflake + "" border="0"></layer>");
} else {
document.write("<layer name="dot"+ i +"" left="25" ");
document.write("top="25" visibility="show"><img src="");
document.write(snowflake + "" border="0"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id="dot"+ i +"" style="POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 25px; LEFT: 25px;"><img src="");
document.write(snowflake + "" border="0"></div>");
} else {
document.write("<div id="dot"+ i +"" style="POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 25px; LEFT: 25px;"><img src="");
document.write(snowflake + "" border="0"></div>");
}
}
}
function snowNS() {
for (i = 0; i < no; ++ i) {
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();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}
function snowIE() {
for (i = 0; i < no; ++ i) {
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();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// End -->
</script>


В корень нашего сайта записываем картинку со снежинкой, на мой взгляд, оптимальный размер 15х15 пикселей.
Имя файла должн быть sneg.gif

Далее полученый нами тег баннера в виде {banner_sneg} нам необходимо добавить в наш шаблон основной страницы сайта.

Как сделать падающий снег на сайте


В основном разделе админки выбираем Шаблоны сайта.
В данном разделе находим Общий макет страницы.

Как сделать падающий снег на сайте


в нем ищем тег body
<body>
{AJAX}
{banner_sneg}

и сразу после тега AJAX прописываем свой тег баннера со снегом.

Как сделать падающий снег на сайте


Сохраняем изменения в шаблоне.

Теперь, если вы все сделали правильно, у вас при заходе на главную страницу сайта будет идти снег :))
Настройки по умолчанию показывают 20 снежинок, которые падают с высоты 600 пикселей (т.е. в среднем на высоту одного экрана браузера)

Как сделать падающий снег на сайте в качестве исходной снежинки для заливки на свой сайт можно использовать нашу.
или Как сделать падающий снег на сайтеКак сделать падающий снег на сайтеКак сделать падающий снег на сайте

Кстати, если снежинки надоедят, Вам никто не мешает скажем осенью заменить снежинку на желтый лист :-) будет листопад.

Если снежинки надоели, достаточно в разделе сайта "Управление рекламой" отключить отображение банера sneg

PS: работающие снежинки можно посмотреть на проекте Ana-sm.ru

(C) оригинал статьи TCSE-cms.com

ВНИМАНИЕ! Этот скрипт в этом (2008 году) работает только в браузере IE, в других браузерах советую использовать второй вариант скрипта .


Похожие публикации



Первый в этом году снег

Первый в этом году снег

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

подробнее »

Первый в этом году снег

Первый в этом году снег

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

подробнее »

Первый в этом году снег

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

подробнее »



Первый снег

Первый снег

Вот и выпал первый снег. Валил от души. Это зрелище было завораживающим. Смотришь в окно, а там ОН - падает и кружится. Потихоньку все вокруг становится белым. Красиво. Уже (или ещё) непривычно. Чарующе. Не хочется думать, как там - внизу... Здесь - красиво... за стеклом тепло и уютно наблюдать....

подробнее »

Первый снег

Первый снег

Вот и выпал первый снег. Валил от души. Это зрелище было завораживающим. Смотришь в окно, а там ОН - падает и кружится. Потихоньку все вокруг становится белым. Красиво. Уже (или ещё) непривычно. Чарующе. Не хочется думать, как там - внизу... Здесь - красиво... за стеклом тепло и уютно наблюдать....

подробнее »

Первый снег

Вот и выпал первый снег. Валил от души. Это зрелище было завораживающим. Смотришь в окно, а там ОН - падает и кружится. Потихоньку все вокруг становится белым. Красиво. Уже (или ещё) непривычно. Чарующе. Не хочется думать, как там - внизу... Здесь - красиво... за стеклом тепло и уютно наблюдать....

подробнее »



Хочу свой сайт. Часть вторая. Создаем сайт.

Хочу свой сайт. Часть вторая. Создаем сайт.

Итак, обсудив в прошлый раз вопрос о том, что надо сделать первым делом, если вы созрели для создания своего собственного сайта, но не знаете, как к этому делу подступиться, переходим к следующему. Теперь у вас уже есть свой домен и площадка под сайт (хостинг). Сегодня мы поговорим непосредственно...

подробнее »

Хочу свой сайт. Часть вторая. Создаем сайт.

Хочу свой сайт. Часть вторая. Создаем сайт.

Итак, обсудив в прошлый раз вопрос о том, что надо сделать первым делом, если вы созрели для создания своего собственного сайта, но не знаете, как к этому делу подступиться, переходим к следующему. Теперь у вас уже есть свой домен и площадка под сайт (хостинг). Сегодня мы поговорим непосредственно...

подробнее »

Хочу свой сайт. Часть вторая. Создаем сайт.

Итак, обсудив в прошлый раз вопрос о том, что надо сделать первым делом, если вы созрели для создания своего собственного сайта, но не знаете, как к этому делу подступиться, переходим к следующему. Теперь у вас уже есть свой домен и площадка под сайт (хостинг). Сегодня мы поговорим непосредственно...

подробнее »



Быстрый поиск на любом сайте с помощью браузера Opera

Быстрый поиск на любом сайте с помощью браузера Opera

Как известно не Гуглом единым жив интернет-пользователь, и даже не Яндексом там или Рамблером каким-нить до кучи. Ну а тем более если пользователь уже опытный, то скорее он будет искать необходимую информацию не на глобальных поисковиках, а на крупных интернет-сайтах или специализированных...

подробнее »

Быстрый поиск на любом сайте с помощью браузера Opera

Быстрый поиск на любом сайте с помощью браузера Opera

Как известно не Гуглом единым жив интернет-пользователь, и даже не Яндексом там или Рамблером каким-нить до кучи. Ну а тем более если пользователь уже опытный, то скорее он будет искать необходимую информацию не на глобальных поисковиках, а на крупных интернет-сайтах или специализированных...

подробнее »

Быстрый поиск на любом сайте с помощью браузера Opera

Как известно не Гуглом единым жив интернет-пользователь, и даже не Яндексом там или Рамблером каким-нить до кучи. Ну а тем более если пользователь уже опытный, то скорее он будет искать необходимую информацию не на глобальных поисковиках, а на крупных интернет-сайтах или специализированных...

подробнее »



Небольшие интернет-работы для себя любимого

Небольшие интернет-работы для себя любимого

Вот уж не знаю, как у других, а у меня временами просыпается желание улучшить нечто в интернет-сервисах для самого себя. Скажем, я пользуюсь (иногда) RSS читалками, такими как, Гугл-Ридер, но блин, она такая неповоротливая, она не дает мне некоторых функций, которые, вероятно, нужны только мне...

подробнее »

Небольшие интернет-работы для себя любимого

Небольшие интернет-работы для себя любимого

Вот уж не знаю, как у других, а у меня временами просыпается желание улучшить нечто в интернет-сервисах для самого себя. Скажем, я пользуюсь (иногда) RSS читалками, такими как, Гугл-Ридер, но блин, она такая неповоротливая, она не дает мне некоторых функций, которые, вероятно, нужны только мне...

подробнее »

Небольшие интернет-работы для себя любимого

Вот уж не знаю, как у других, а у меня временами просыпается желание улучшить нечто в интернет-сервисах для самого себя. Скажем, я пользуюсь (иногда) RSS читалками, такими как, Гугл-Ридер, но блин, она такая неповоротливая, она не дает мне некоторых функций, которые, вероятно, нужны только мне...

подробнее »



Кпк-версия сайта и новостные виджеты

Кпк-версия сайта и новостные виджеты

Надеюсь, многие из посетителей сайта заметили новую ссылку внизу страницы, а именно «КПК-версия»; о том, для чего это сделано и какую пользу может принести именно вам пойдет речь ниже. Все чаще можно встретить людей, активно использующих свой мобильный телефон для доступа в Интернет, обычно для...

подробнее »

Кпк-версия сайта и новостные виджеты

Кпк-версия сайта и новостные виджеты

Надеюсь, многие из посетителей сайта заметили новую ссылку внизу страницы, а именно «КПК-версия»; о том, для чего это сделано и какую пользу может принести именно вам пойдет речь ниже. Все чаще можно встретить людей, активно использующих свой мобильный телефон для доступа в Интернет, обычно для...

подробнее »

Кпк-версия сайта и новостные виджеты

Надеюсь, многие из посетителей сайта заметили новую ссылку внизу страницы, а именно «КПК-версия»; о том, для чего это сделано и какую пользу может принести именно вам пойдет речь ниже. Все чаще можно встретить людей, активно использующих свой мобильный телефон для доступа в Интернет, обычно для...

подробнее »

Вы не авторизованы!

Обратите внимание, если вы не авторизуетесь, то Ваш комментарий перед публикацией обязательно будет отправлен на модерацию.
Рекомендуем вам войти под своим логином
Или используйте авторизацию через соц.сети
Вконтакте


Написать



#1 написал: CrazyWM
Группа: Гости
23 декабря 2007 22:49

Эх... хожу по инету уже второй день. Хочу найти таки хороший скрипт снежинок.
Нашел уже несколько. Но все они реально грузят проц.
Из тех, смотрел, понравился, кстати, этот.
Он не так нагружает процессор, но он не на всю страницу, а в блоке сделан am

Вылетел в Вам на сайт из поиска яндекса. Обрадовался wink но и этот скрипт грузит у меня сейчас проц на 70% recourse
Но все-равно спасибо за скриптец.

Кстати, если не для DLE, то можно просто содержимое скрипта записать во внешний файл и подключать тэгом script smile

Вобщем, еще раз спасибо за интересный скрипт.

            




#2 написал: Talik
Группа: Гости
23 декабря 2007 23:17

CrazyWM, данный скрипт можно просто прикрутить в тело html страницы без каких либо-парягов.
еще вариант скрипта описан тут ну а то, что касается нагрузки на процессор компьютера....

в этом и есть основное отличие Ява-скриптов от скажем php-скриптов
Ява - она компьютером обраатывается (и тут уже дело в ява-машине которая к вашему браузеру подключена)
ну а PHP тем и хорошо, что браузеру пользователя выдает разжеванный как-бы html бери и кушай :-)

а за ссылку спасибо - любопытно почитать.

            




#3 написал: мила
Группа: Гости
31 декабря 2007 11:44

laughing smile wink lol laughing я сех вообще люблю в этом мире

            




#4 написал: AnaSm
Группа: Администраторы
31 декабря 2007 16:08

мила, wink fellow


--------------------
трудно быть ангелом, но надо

            




#5 написал: КолЮня
Группа: Гости
15 апреля 2008 22:54

Пасибаа!! Давно искал!!

            




#6 написал: Sergoff
Группа: Гости
1 августа 2008 16:08

А меня подобные снежинки на сайтах раздражают no

            




#7 написал: DETOX
Группа: Гости
15 августа 2008 20:10

Спасибо, очень нужный скрипт, особенно в предверии Нового года laughing

            




#8 написал: Pavlik-jugend
Группа: Гости
17 декабря 2008 16:07

Анастасия
Вы лукавите, ведь у вас на странице используется другой скрипт?

            




#9 написал: AnaSm
Группа: Администраторы
17 декабря 2008 16:50

Pavlik-jugend, описанный выше скрипт использовался в прошлом году (тогда статья и была написана), в этом же он "отказался" работать везде, кроме IE, поэтому был заменен на другой
Как сделать падающий снег на сайте (вариант 2)


--------------------
трудно быть ангелом, но надо

            




#10 написал: Pavlik-jugend
Группа: Гости
17 декабря 2008 17:20

Анастасия, благодарю за беспокойство (снег я сделал, с определенными доработками).
Но я бы на вашем месте изменил бы статью или указал, что скрип ""отказался" работать везде, кроме IE"



            




#11 написал: Женечка
Группа: Гости
18 декабря 2008 16:04

А у меня в IE не 1 не 2 версия не работает sad

            




#12 написал: dan
Группа: Гости
22 декабря 2008 19:15

Я тупой юзер,не могу сообразить,что надо делать. ВСТАВЛЯЮ В ВЕБ КОНСТРУКТОРЕ САЙТА В РЕЖИМЕ HTML СКРИПТ(ВЕРСИЯ 2) JAVA. в ИТОГЕ ЭТОТ СКРИПТ ОТОБРАЖАЕТЬСЯ НА САЙИТЕ ТЕКСТОМ(КОД НА СТРАНИЦЕ ПОКАЗЫВАЕТЬСЯ), в ОБЩЕМ ПРОШУ РАЗЖЕВАТЬ ЕЩЕ БОЛЬШЕ,ХОТЯ ПОНИМАЮ,ЧТО РАЗЖЕВАНО УЖЕ БОЛЬШЕ НЕКУДА).

            




#13 написал: Talik
Группа: Гости
23 декабря 2008 10:24

Цитата: dan
ВСТАВЛЯЮ В ВЕБ КОНСТРУКТОРЕ САЙТА В РЕЖИМЕ HTML СКРИПТ(ВЕРСИЯ 2) JAVA. в ИТОГЕ ЭТОТ СКРИПТ ОТОБРАЖАЕТЬСЯ НА САЙИТЕ ТЕКСТОМ(КОД НА СТРАНИЦЕ ПОКАЗЫВАЕТЬСЯ


по всей видимости визуальный редактор вашего сайта либо полностью игнорирует любой ява-скрипт (например запрешено хостинг-провайдером)
либо Вы вставляете код как текст, а не как элемент HTML
Во вногих визуальных редакторах есть отдельная кнопка для вставки html кода.

            




#14 написал: Гарик
Группа: Гости
27 декабря 2008 00:58

Можно вопрос? А что нужно прописать, чтобы снег летел не сверху вниз, а наоборот?

У мну просто проблема: с этого сайта по неизвестным причинам у мну скрипт не пашет. Скачал с другого - запахал, вот только снег там идет снизу вверх. Не особо красиво. Если не сложно, напишите параметр, который нуно поменять. Заранее спс за помощь

            




#15 написал: AnaSm
Группа: Администраторы
28 декабря 2008 11:49

Гарик, к сожалению, ничем помочь не могу - незнаю как и что recourse


--------------------
трудно быть ангелом, но надо

            




#16 написал: Алексей
Группа: Гости
30 декабря 2008 17:49

кроче ничо непонял и запорол дизайн сайта

            




#17 написал: Vincent
Группа: Гости
10 декабря 2009 16:10

            




comments powered by Disqus