Как сделать снегопад на сайте?

Как сделать снегопад на сайте?В продолжение новогодней темы предлагаю вам создать праздничный настрой на сайте.

В этом уроке мы рассмотрим с вами установку падающих снежинок на сайте.

Даже не снижинок, мы сделаем на настоящий снегопад на сайте!

И так, давайте приступим к созданию снегопада на нашем сайте:

Шаг 1. Качаем архив со скриптом отсюда. Извлекаем его из архива в отдельную папку.

Шаг 2. Эту папку закачиваем в корневую папку сайта.

Шаг 3. Открываем индексный файл и в теге <body> … </body> вставляем следующий скрипт:

Тренинг по вёрстке сайта на HTML5 и CSS3

[sbox id="info" big="true"]<script type="text/javascript">

sitePath = "/";

sflakesMax = 64;

sflakesMaxActive = 64;

svMaxX = 3;

svMaxY = 3;

ssnowStick = 1;

sfollowMouse = 1;

</script>

<script type="text/javascript" src="/snow/snow.js"></script>[/sbox]

В поле sitePath указываем путь к нашему сайту.

Зеленым цветом указываем путь к самому скрипту.

Снежинки отображаются при помощи рисунков .png. Поэтому в браузерах со старой версией (IE6, IE7) могут отображаться неправильно. Что бы они там хорошо отображались, если для вас это столь важно, просто перекомпилируйте эти рисунки в формат GIF.

Для пользователей CMS MaxSite снегопад на сайте будет устроить куда проще.

Я бегло натарабанил плагин под названием snow.

Поэтому, вам надо всего лишь скачать этот плагин и установить его на ваш сайт. И тем самым спровоцировать снегопад.

Скачать плагин snow.

Спасибо за внимание. Еще раз с наступающим.

Надеюсь на вашем сайте, снегопад будет - что надо smile

PS: в браузерах IE, из за настроек безопасности, скрипт снегопада на сайте может не работать.

PSS: прикольно получилось, но сегодня похожий плагин натарабанил и сам разработчик этой системы - Максим smile

Скачать его вы можете здесь.

Комментариев: 63 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Комментариев: 63
  •  Александр | 15 декабря 2010 в 22:38:53

    А где сугробы??tongue rolleye

  •  Alexzys | 16 декабря 2010 в 03:55:48

    а че через локал хос не пашет ?* , вернее кртинки не отображаються ((

  •  Alexzys | 16 декабря 2010 в 04:25:46

    Регаюсь...

  •  Alexzys | 16 декабря 2010 в 04:39:59

    хоть убейся не пашет , без http сервера (движка) , черт так не должно быть...long face

  •  Alexzys | 16 декабря 2010 в 04:47:31

    раньше все проверял под //:localhost , и все замечательно работало , теперь же полная лажа... , или всетаки у меня руки кривые...

  •  Alexzys | 16 декабря 2010 в 05:18:16

    поставил свой скрипт , прекрасно работает , значит у вас косяки какие то...

  •  Серёга | 16 декабря 2010 в 09:05:05

    Здорова.

    Так я этот плагин и создавал на локалхосте.

    У меня работает без проблем. И там, и тут...

  •  Серёга | 16 декабря 2010 в 09:13:01

    Или вы ставили сам скрипт отдельно?

  •  johnysp | 22 декабря 2010 в 13:25:23

    Сергей, спасибо за скриптик, отлично встает на DLE.

    Правда пошел другим путем - не засовывал целый код в main.tpl шаба (кто не знает, в DLE именно туда его и надо запульнуть), а через админку зашел в "рекламные материалы", создал там новый баннер (не знаю почему так назвали, ведь туда можно запульнуть любой код, подобие как в CMS MaxSite - ушки) и вставил весь код туда.

    И после уже в main.tpl вставил коротенький тэг на этот баннер.

    Почему таким путем? Всё просто: как закончится зима - ничего удалять не надо, просто останавливаем показ баннера и всё. Лишнего кода на сайте не будет! А уже следующей зимой - включаем обратно cool smile

  •  Серёга | 22 декабря 2010 в 13:28:24

    Так и я для макссайт не засовывал целый код.

    Все сделано через плагин.

    Включил - пошел снег - выключил - снег исчез smile

    И код самой CMS не изменялся.

  •  johnysp | 22 декабря 2010 в 13:31:39

    Сергей, и в МаксСайт я его тоже запульнул LOL уже через плагин

  •  svan2009 | 23 декабря 2010 в 20:49:39

    а у меня что-то не получилось :( Под Wordpress/

    Закачал папку в public.htm и код вставил в heder после bodi, а снега нет :(. Пач как правильно писать? и путь к папке?

  •  Серёга | 23 декабря 2010 в 21:09:48

    Скажу честно, вордпресс - это было сто лет назад.

    Так что путного совета, боюсь, не смогу дать, уже давно все забыто и голова забита другой CMSsmile

    Скорее в сего с путями что то намудрили.

    Попробуйте указать там где зелененький путь - полный путь к скрипту.

  •  svan2009 | 23 декабря 2010 в 21:37:44

    Спасибо, вроде само пошло, с опоздапнием. Видимо сервер долго обрабатывал. Вот только вместо снежинок - буквы :(. Как это перекомпилировать?

  •  svan2009 | 23 декабря 2010 в 21:42:32

    Короче, попробовал в Пейнте открыть и сохранить как gif. Сейчас посмотрю что вышло smile.

  •  Серёга | 23 декабря 2010 в 21:46:01

    БУКВЫ surprised

    Там картинки png-шки должны быть.

    Может маленькие квадратики с надписью Изо.... бражениеsmile

    У меня картинки в одной папке со скриптом.

    Попробуйте там, где красный путь тоже указать полный путь к папке снегопада.

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

  •  svan2009 | 23 декабря 2010 в 22:00:52

    Что-то ничего не меняется :(. Неужели gif не воспроизводит?

  •  Александр | 23 декабря 2010 в 22:07:01

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

    Я когда первый раз вставлял забыл поставить в конце слешь (/) и у меня была таже проблема, тоесть sitePath примет вид sitePath= "http://сайт.ру/"

  •  Серёга | 23 декабря 2010 в 22:08:02

    Да не в формате дело, это ошибка пути к рисункам какая то, говорю вам - укажите путь к папке с папкой скрипта, там где красным слешем в тексте отмечено.

    А в зеленом поле - продолжите путь.

    Вот например как я делал это в плагине:

    if (!$snow_js)

    echo ' ';

    echo ' sitePath = "' . getinfo('plugins_url') . '";';

    echo ' sflakesMax = 64;';

    echo ' sflakesMaxActive = 64;';

    echo ' svMaxX = 3;';

    echo ' svMaxY = 3;';

    echo ' ssnowStick = 1;';

    echo ' sfollowMouse = 1;';

    echo ' ';

  •  Серёга | 23 декабря 2010 в 22:13:04

    Блин, сделал атаку на свой сайт, я прям хакерsnake grin

    Короче в комментах отобразить не получится.

    Но смотри, в поле: sitePath = "Мой сайт/ плагины";

    Я указал путь к папке с плагинами.

    А вот в поле: type="text/javascript" src="мой сайт/плагины/snow/snow.js;">

    Я указал полный путь к скрипту.

  •  svan2009 | 23 декабря 2010 в 22:44:27

    Да, именно кватратики с надписью Изо. Картинки тоже в одной папке со скриптом. Указал полный путь в обоих случаях кода. Результат тот же. :( Черт, не программер я, однако. smile

  •  Александр | 23 декабря 2010 в 22:45:40

    Покажи код, который ты вставляешь.

  •  svan2009 | 23 декабря 2010 в 22:48:00

    А в Мозиле вообще начал дергаться сайт. Эх...Не судьба...

  •  svan2009 | 23 декабря 2010 в 22:52:13

    sitePath = "http://svstudio.biz/";

    sflakesMax = 64;

    sflakesMaxActive = 64;

    svMaxX = 3;

    svMaxY = 3;

    ssnowStick = 1;

    sfollowMouse = 1;

  •  svan2009 | 23 декабря 2010 в 22:53:01

    Продолжение:

  •  svan2009 | 23 декабря 2010 в 22:53:57

    Хм... Обрезает последние строки.

  •  Серёга | 23 декабря 2010 в 22:59:28

    Вы лучше мылом обменяйтесь и он тебе поможет.

    Это, создал новый пост, там рассказываю как клавиши нарисовать на сайте при помощи только CSS.

  •  Александр | 23 декабря 2010 в 23:01:57

    моё мыло: zevs_olimp_пятьпятьпять@mail.ru

    ник в скайпе: zevs_olimp_пятьпятьпять

  •  Серёга | 23 декабря 2010 в 23:05:04

    Санек, ну ты прям награда для спаммеров grin

    Взял и выставил открытые данные, позаменяй собаки и цифры на слова.

  •  svan2009 | 23 декабря 2010 в 23:07:46

    Хорошо!

    svanдванольнольдевять@gmail.com

    Сегодня уже не хочу заниматься. После переноса вообще всё исчезло.

    http://svstudio.biz

  •  Серёга | 24 декабря 2010 в 10:09:22

    Еще один светилоgrin

    Не выставляйте открытые адреса почты, так как задалбетесь удалять спам!

    svan2009 - чуть чуть видоизменил ваш адрес почты.

  •  Ольга | 25 декабря 2010 в 14:21:38

    Подскажите пожалуйста, что я неправильно делаю. Вместо пути ставлю sitePath = "E://SAIT/DOMEN/"

    в src="E://SAIT/DOMEN/snow/snow.js"

    Папку snow скопировала в корень DOMEN

  •  Серёга | 25 декабря 2010 в 14:37:16

    Попробуйте поставить один слэш перед диском E

  •  Серёга | 25 декабря 2010 в 14:38:05

    И попробуйте стандартный значок для дисков на компьютере \

  •  johnysp | 25 декабря 2010 в 15:32:22
    Подскажите пожалуйста, что я неправильно делаю. Вместо пути ставлю
    sitePath = "E://SAIT/DOMEN/"
    в src="E://SAIT/DOMEN/snow/snow.js"
    Папку snow скопировала в корень DOMEN

    sitePath = "/SAIT/DOMEN/"

    в src="/SAIT/DOMEN/snow/snow.js"

    Наверное так, а не с диском Е, это же то виртуалка, где денвер делает свою работу, на фига его писать

  •  Серёга | 25 декабря 2010 в 15:39:08

    Все зависит от того, где находится сама страница с подключаемым снегом.

    ЗЫ: а с чего ты взял что используется денвер???

  •  johnysp | 25 декабря 2010 в 15:44:54

    Сергей, стандарт grin Вроде никто не ухищряется и пользуется самой распространенной прогой.

  •  Серёга | 25 декабря 2010 в 15:47:32

    Это ты так думаешь wink

    А многие про нее вообще не слышали.

  •  johnysp | 25 декабря 2010 в 16:01:17

    Кстати, хотел спросить - а снежинки нормально в IE отображаются? Просто я никогда не пользуюсь этим замечательным браузером (даже когда надо проверить что-то), а тут решил зайти под ним... и везде (на всех сайтах, не только на моих) - отображаются в виде прозрачных квадратиков.

    P.S. IE 8

  •  Ольга | 25 декабря 2010 в 22:12:58

    Спасибо за советы, но ничего не помогло со слешами.

    Сама страница со снегом находится в папке E://SAIT/DOMEN/ в этой же папке и каталог snow разместила. Денвер не использую. Файл в формате 1.html

  •  Серёга | 25 декабря 2010 в 22:23:46

    Хех smile

    Так тебе Оля, тогда вообще пути прописывать не надо.grin

    в src="E://SAIT/DOMEN/snow/snow.js"

    Просто напиши название скрипта в каталоге - и всеwink

    Т.е. так - src="snow/snow.js"

  •  Серёга | 25 декабря 2010 в 22:24:35

    Путь надо прописывать, когда на компьютере делаешь - отталкиваясь от файла, в котором размещен скрипт.

  •  Ольга | 26 декабря 2010 в 11:42:43

    Спасибо огромное. Получилось kiss

  •  Серёга | 26 декабря 2010 в 11:48:29

    Так держать!cool smile

  •  Александр | 29 декабря 2010 в 16:11:13
    стандарт Вроде никто не ухищряется и пользуется самой распространенной прогой.

    Я походу уникум, я юзаю AppServ wink

  •  johnysp | 30 декабря 2010 в 02:30:06
    Я походу уникум, я юзаю AppServ wink

    Нет, просто выходишь за рамки стандарта wink Я, например, все на хостинге сразу делаю. Денвер для меня - поюзать скриптики плюс понадобился когда курс Сергея изучал.rolleyes

  •  Людмила | 7 января 2011 в 21:08:17

    Сергей, спасибо за снегопад! )) Использовала в открытке.

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

  •  Серёга | 7 января 2011 в 23:30:44

    Привет Людмила.

    Честно говоря, в скриптах я еще сам пока не очень.

    Но, судя по вашей проблеме - попробуйте обновить браузер.yes

  •  johnysp | 8 января 2011 в 20:37:34

    Сергей, наверное чтобы убрать дёргание, надо отключить функцию, где он (снегопад) ложиться внизу. Чтобы просто летел, без создания "сугробов" в подвале.

  •  Александр | 8 января 2011 в 21:25:59
    Чтобы просто летел, без создания "сугробов" в подвале.

    А что бы это сделать в скрипте в параметре ssnowStick = 1; , единицу заменяем на 0. Тоесть получится вот так ssnowStick = 0;

    Теперь снег не будет скапливаться внизу экрана.

  •  Серёга | 9 января 2011 в 01:15:25

    Вот и разобрались smile

    Так что, у меня одного дерганья не было???surprised

  •  Александр | 9 января 2011 в 01:23:33
    Так что, у меня одного дерганья не было???

    Да не, у меня тоже вроде не дёргалосьclap

  •  don | 13 января 2011 в 14:52:33

    Всех с Старым Новым Годом! Успехов во всех начинаниях и побольше денег!

  •  GennadijOrlov27 | 5 июня 2011 в 19:21:16

    Предоставляем продвижение сайта

  •  as_stiler | 15 декабря 2011 в 20:47:52

    автору спс вс понятно обьяснил!

  •  HracH | 23 декабря 2011 в 11:01:57

    Привет всем у меня такая проблемма я сделал все но вместо снежков падают кубики))

    •  Серёга | 24 декабря 2011 в 07:10:35

      Проверяй путь к картинкам снежинок.

      Да и еще, посмотри или нет в комплекте поставки макса плагина со снежинками.

      Кто то его тоже делал.

  •  Evgeniy | 19 декабря 2012 в 12:34:23

    лучше бы конечно было видео инструкцию подробную выложить))) как путь к картинкам менять и все такое

  •  Murrzik777 | 6 января 2013 в 01:50:57

    Работает!!! Заходите, любуйтесь wink

    Вопросик ещё: есть возможность сделать кнопку вкл/выкл для простого html сайта?

    СПАСИБО! dance

  •  Серёга | 6 января 2013 в 14:51:10

    Даже не знаю. Если честно. В любом случае - когда отпадет надобность - лучше его вообще отключить. Что бы не грузился лишний раз.

  •  Нина | 4 октября 2013 в 12:26:50

    У меня что-то не работает в браузере отображаеться

    [sbox id="blue" big="true"] [/sbox]