Если у вас нет времени, вы можете сразу скачать скрипт с падающими снежинками. Но, если вы хотите узнать, как установить скрипт со снежинками на ваш сайт или настроить его (хотя это и не обязательно, но такая возможность есть), то рекомендую продолжить чтение.
Вебмасетра украшают сайты
К концу каждого года веб-мастера и владельцы сайтов всячески стараются украсить свои сайты, используя новогоднюю тематику. Это хорошо, потому что создается праздничная обстановка и ощущение чего-то необычного.
Главное не перестараться
Эксперты юзабилити, предупреждают, что не стоит забывать, о том, что если кардинально поменять дизайн сайта, в данном случае под новогоднюю тематику, можно потерять клиентов. Об этом свидетельствует статистика.
Дело в том, что пользователям, привыкшим к дизайну вашего сайта, новшества могут просто не понравится или они не захотят тратить свое время на привыкание к новому интерфейсу и поэтому покинут сайт. Таким образом снизится конверсия посетителей в покупателей.
Как украсить сайт перед Новым годом
Наиболее простым и безболезненным изменением может быть вариант использования эффекта падающих снежинок.
Я потратил много времени, чтобы найти в интернете готовые скрипты падающих снежинок. Но, к сожалению, нашелся только один скрипт, о котором я хочу вам рассказать.
Потратив несколько часов на поиски, мне все-таки удалось найти очень даже симпатичный скрипт.
Скрипт «Падающие снежинки»
Чем же он отличается от других скриптов, генерирующих снежинки? Дело в том, что падающие снежинки не являются изображениями. Падающие снежинки — это обычные символы шрифта (звездочки «*») . То есть форма снежинок зависит от заданного в настройках шрифта. Вы можете выбрать любой другой стандартный шрифт и тогда снежинки будут другими.
Кроме формы снежинок, можно еще задавать цвет, размер, количество и скорость падения.
Настройки скрипта: цвет, форма, размер и количество снежинок
// Set the number of snowflakes (more than 30 - 40 not recommended)var snowmax=35// Set the colors for the snow. Add as many colors as you likevar snowcolor=new Array("#b9dff5","#b9dff5","#b9dff5","#b9dff5","#b9dff5")// Set the fonts, that create the snowflakes. Add as many fonts as you likevar snowtype=new Array("Times")// Set the letter that creates your snowflake (recommended: * )var snowletter="*"// Set the speed of sinking (recommended values range from 0.3 to 2)var sinkspeed=0.6// Set the maximum-size of your snowflakesvar snowmaxsize=35// Set the minimal-size of your snowflakesvar snowminsize=8// 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-snowingvar snowingzone=1
Скрипт буржуйский и пожтому комментарии на английском языке. Но программерам английский язык — родной. Надеюсь с этим сложностей не возникнет.
Известные проблемы со скриптом
Оригинальный скрипт не лишен недостатков. Но все они уже успешно устранены.
- На широкоформатном мониторе снежинки не заполняли всю доступную область. В ява скрипте я не особо разбираюсь. Поэтому исправить недочет в этом скрипте я попросил своего талантливого друга Дениса Балыкина, известного в сети под ником BaDeVlad. Он быстро разобрался в чужом коде и отредактировал его как надо.
- У скрипта был очень серьезный недочет. Скрипт не работал не только в
Doctype Strict, но и вообще не поддерживал веб-стандарты. Я перепроповал все доктайпы, — ни один из них не позволял появлению осадков в виде снега. Позже, в комментариях, Алексей Юдин дал рецепт от излечения этого тяжелого недуга. Нужно было указать единицы измерения, в конце некоторых строк добавив+'px';
Как подключить скрипт со снежинками
- Скачайте скрипт и разместите на своем хостинге.
- Укажите место, где находится скрипт следующей конструкцией
<script src="/путь_к_ скрипту _со_ снежинками /snow-fall.js" type="text/javascript"></script>
Например, если вы положите скрипт в папку js, которая находится в корне вашего сайта, тогда подключение скрипта будет таким:
<script src="/js/snow-fall.js" type="text/javascript"></script>Скачать скрипт
Сколько весит скрипт с бесконечно падающими снежинками? Всего 4,3 килобайта вместе с комментариями 
.
Скачать скрипт с падающими снежинками (исправленный и дополненный).
Привью реализовано прямо в этом посте. (Видите падающие снежинки на вашем мониторе?)
Больше снега!
Есть еще альтернативный вариант падающих снежинок, который реагирует на движение курсора. Он находится по адресу: http://www.schillmania.com/projects/snowstorm/
Если вы нашли другие хорошие скрипты со снежинками или с новогодней тематикой, можете поделиться ссылкой в комментариях.
***
Чтобы зарядиться хорошим настроеним, можете посмотреть красивую съемку езды на сноуборде по снежному лесу.
«
RSS записей
Было бы ещё неплохо описать процесс установки этого скрипта на WordPress.
Он ничем не отличается от обычного подключения ява скрипта.
Разобрался:
а у меня скрипт в мозилле не работает
Оксана, скорее всего браузер тут не причем. Я проверял и Firefox и Google Chrome, Opera и даже в Internet Explorer 6 скрипт работал. Похоже скрипт, кроме
Strict, еще не работает в< !DOCTYPE html>.У вас какой доктайп объявлен?
сколько непонятных слов, я вообще не спец, вот сайт stroydveriточкаru.
в мозиле в углу одна снежинка висит. и все
У вас объявлен
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">.Похоже, что этот скрипт вообще не поддерживает веб-стандарты
. У меня когда-то доктайп был объялен так
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">. Но это неправильное объявление, это все равно, что ничего не написать. Потому что в атрибутах отсутствует URL на документ.Чтобы снег шел
нужно заменить:
snow[i].style.left=(snow[i].posx+lftrght[i]*Math.sin(crds[i]))snow[i].style.top=snow[i].posyна
snow[i].style.left=(snow[i].posx+lftrght[i]*Math.sin(crds[i])) + 'px'snow[i].style.top=snow[i].posy + 'px'И по хорошему строки в коде нужно закрывать символом .
Закрывать символом
;(точка с запятой).И вот что еще, чтобы снежинки были разных размеров.
Строку
snow[i].style.fontSize=snow[i].sizeнужно заменить на
snow[i].style.fontSize=snow[i].size +'px'Спасибо, Алексей. Действительно заработало. Какой вы молодец! Такой скрипт реанимировали!
Удобный скрипт, но почемут грузит хост сильн..
Да, удобно, что никаких изображений не надо.
А по поводу нагрузки на хост — это вряд ли. При обращении к сайту, скрипт, как CSS и картинки, кешируются на строне клиента. И после этого обращений к серверу уже не требуется, снежинки генерируются локально на машине пользователя. При этом нагружается процессор и браузер.
На своей машине никаких тормозов не замечаю. А у вас какой компьютер и браузер?
мда
исправила как вы сказали, у меня снежинки ни в одном браузере не падают теперь, хотя раньше проблема только с мозиллой была
Оксана, а что вы исправляли?
да все те же строки, только + ‘px’
У меня работает. Только нужно использовать другие кавычки, чтобы не было синтаксической ошибки
+'px';. Попробуйте, должно получиться.Сейчас я выложу для скачивания исправленный скрипт.
да просто когда на сайте публикуется, то получаются такие кавычки, я конечно все исправляла. Фиг с этим скриптом. Пусть в мозилле не показывается. Надоело.
Оксана, я выложил обновленный скрипт. Попробуйте скачать — все должно работать.
Очень не хочется, чтобы вы расстраивались. Ведь вы приняли непосредственное участие в тестировании и выявлении ошибок.
что то ссылка нерабочая, 404 страница
Может я как раз в тот момент перезаливал файлик?
Ссылку проверил — ОК. Вот, адрес: http://www.fortress-design.com/download/js/snow-fall.rar
Ну что? Скачивается?
скачалось, можете заценить. Ничего не работает)))) у меня битрикс. может из за этого? ни в одном браузере не летают. Нафиг эти снежинки, мне они не нужны, ген директору понадобилось сайт украсить.
Поздравляю! Заходил на вас сайт — у вас все работает. Снежинки нежно летят себе
. Проверил в Internet Explorer, Google Chrome и Firefox.
Кстати, надо заметить, что в Google Chrome цвета выглядят посимпатичнее и браузер не подтормаживает вообще. В Мозилле, при загрузке, странице сначала тормозит, но потом работает нормально.
Ура!!!!!!!!!!!!!!!!!!!!!!!!! Победа. Снежинки работают. Спасибо огромное
Ну, слава Богу — теперь все довольны
так, в других заработало, в мозилле нет. может и кэш кстати. щас попробую почистить
*drink*
Спасибо. Отличный скриптик. Отличная работа.
Пожалуйста.
Добрый день!
Помогите, пожалуйста, разобраться со скриптом.
Я правильно понимаю, что нужно перейти по ссылке, скопировать скрипт и разместить уже у себя на сайте?
Или нужно что-то менять/настраивать?
Здравствуйте, Галина.
Совершенно верно, нужно скачать скрипт и разместить у себя на сайте. А потом добавить в шаблон страниц код
script src="/путь_к_скрипту_со_снежинками/snow-fall.js" type="text/javascript">с указанием пути к скрипту со снежинкками.
и что значит «подключение скрипта»?
спасибо заранее.
Подключить скрипт — это значит указать его размещение на сервере, соблюдая определенный синтаксис. В этом посте выше в разделе «Подключение скрипта со снежинками» написано какую строку надо написать.
т.е. на гл. странице (index) размещаем скрипт, а на др.страницах script src=»/путь_к_скрипту_со_снежинками/snow-fall.js» type=»text/javascript»>?или на всех страницах, включая index?
Разъясните на пальцах, что значит «путь_к_скрипту_со_снежинками»?
Создайте в корне своего сайта папку js.
Скопируйте в нее файл snow-fall.js.
В шаблоне сайта или на тех страницах где вы хотите показать снежинки напишите такую строчечку:
<script src="/js/snow-fall.js" type="text/javascript"></script>Обычно эта строка пишется в секции
<head></head>, но можно в любом месте страницы.спасибо.буду пытаться
Попробуйте сделать так как я вам написал.
все получилось, спасибо вам огромное)))
Супер! Молодец, Галина, что не сдались, а преодолели все трудности!
спасибо, симпатично
Да, снежок хорош
Вопрос: у меня снежинки в скрипте максимум долетают только до низа первого экрана страницы сайта. И если прокрутил ниже, то уже не летят и новые не генерируются.
На этой странице все летит до низа. Где нужно донастроить?
К сожалению, затрудняюсь ответить. Надо разбираться со скриптом.
У меня на странице, если прокрутить страницу вниз, снежинки тоже не будут «резко таять». Видимо скрипт сначала вычисляет размер экрана, а потом сыпет снежинки.
marginbottom = 1500соответственно это размер высоты — чем больше значение, тем ниже они падают.Вместо строк
Написать следующий код:
___________________________
58-66 строка
Ясно.
Мы задаем не фиксированную высоту, а скрипт сам вычисляет высоту видимой части сайта (экрана)
marginbottom = document.body.scrollHeightПробовал, к сожалению, не работает.
Было то же самое, пока не исправила 1500, снежинки лихорадочно перемещались по шапке, после 1500 стали падать.
Спасибо за скрипт, замечательный!
А в php добавить его можно? если да , то как?
Непонятно, зачем его внедрять в php? В результате ведь все равно будет сгенерирован html-код.
Java-скрипт можно вставить в заголовок или в любое место тела HTML-документа. В большинстве случаев местоположение скрипта никак не сказывается на рендеринг страницы.
Всё калассно работает. Спасибо.
Что я могу делать не так?
есть папка «js» с файлом snow-fall.js
пишу
и ничего, а если скрипт вставляю на страничку, то всё работает. почему не подключается
Комментарий съел ваш код и я нем могу посмотреть, что вы написали.
Создайте в корне своего сайта папку js.
Скопируйте в нее файл snow-fall.js.
В шаблон сайта или страницу вставьте строку:
<script src="/js/snow-fall.js" type="text/javascript"></script>Спасибо, отличный скрипт.
Но у меня один вопрос — при установке этого скрипта на страницу с, где уже установлен скрипт Карусели(вращающиеся картинки) эти картинки исчезают. В чем может быть заковыка? Устанавливал скрипт со снежинками в разные места страницы, смотрел в разных обозревателях — результат один: снег идет, но Карусели не видно.
ссылка на страницу моего сайта: http://www.vitservice.net.ua/index.htm
ссылка на страницу скрипта Карусели: http://diano4ka.ru/skr33.php#null
Не знаю, возможно скрипт со снежинками конфликтует с вашим скриптом. Чтобы найти причину, нужно разбираться, сравнивая каждую строку кода. Для этого надо хорошо разбираться в ява скрипте.
Подскажите. Можно ли использовать этот скрипт на форуме? Если да, то как. Спасибо.
Его можно везде использовать. Достаточно его подключить как это описано в посте.
Если честно, то как-то не люблю эти скрипты. Но на сам НГ вполне можно их повечить, но сразу после НГ их придётся убирать…
Ну, вообще снежинками любят украшать сайты до Нового года, и так они кружаться до самой весны
.
Кстати, ролик очень красивый. А вот снежинки у некоторых кружатся несколько лет, пока аренда домена не закончится…
fortresseo
Спасибо!)
Скажите, а возможен вариант, чтобы вместо снежинок летали сердечки? Очень актуально ко дню Св. Валентина)
Да, Екатерина. Вполне возможно, если вместо символа звездочки поставить символ сердечка. Осталось только узнать, есть ли символ сердечка в обычных шрифтах
.
Спасибо Вам огромное!
Всё работает — отлично!
А скрипта сугроба случайно нет, чтобы вниз страницы поставить?))
А то что-же это за зима такая, когда снег падает и тает
Скрпта сугроба?
Увы. И анимированного снеговика и Деда мороза на санях, пролетающих над заголовком H1…
А как сделать, чтобы снежинки падали не на всю страницу, а только в определенных ячейках таблицы?
Не знаю. Возможно надо создать див и ограничить его содержимое правилом кроп оверфлоу. Но это надо пробовать.
Скрипт поставил симпатичный! У меня ни на Опере, ни на Mozilla Firefox снежинки не падают! Падают только в Internet Explorer! Что сделать, чтобы на любом обозревателе шел снег? Спасибо!
Надо проверить, вроде таких проблем не было.
Спасибо огромное! Вы так понятно все описали, что не только чайники — такие мятые самовары в блоггинге, как я, смогли без проблем установить такой замечательно красивый скрипт!
Вот еще бы где взять красивый новогодний баннер! Не подскажете, где?
Спасибо, Надежда, за добрые слова. На счет баннера — мне проще, — я дизайнер
Вместо звездочки лучше использовать ❅ — снежинка.
Лучше? Чем?
сорри, код не видно, вместо него появилась снежинка.
❅
блин! & # 10053;
пробелы нужно удалить между символами
Не работает в браузере гугл хром, в чём заморочка?
Не знаю.
Спасибо. Всё работает, во всех браузерах: опера, FF, IE, хром
Отлично. Хотя некоторые пользователи пишут, что у них не во всех браузерах работает.
Может javascript отключен
Тоже вариант. Но в наше время отключать ява-скрипт, все равно что просматривать сайты с отключенными картинками
Друзья! Размер можете поменять прописав в скрипте:
function initsnow() {
if (ie5 || opera) {
marginbottom = 1500
marginright = document.body.clientWidth-15
}
else if (ns6) {
marginbottom = 1500
marginright = window.innerWidth-15
}
___________________
ВМЕСТО
function initsnow() {
if (ie5 || opera) {
marginbottom = document.body.scrollHeight
marginright = document.body.clientWidth-15
}
else if (ns6) {
marginbottom = document.body.scrollHeight
marginright = window.innerWidth-15
}
___________________________
58-66 строка
marginbottom = 1500 соответственно это размер высоты — чем больше значение тем ниже они падают
Спасибо, Влад за ценное дополнение.
это настройка высоты, если настроить высоту больше чем сама страница то внизу остается белое пространство….
вот я дописал скрипт,
— скрипт находит всю высоту страницы, и подставляет значение- так что снежинки будут падать точно от верху до низу независимо от высоты страницы….
нужно просто заменить часть скрипта
эту :
_______________________________
function initsnow() {
if (ie5 || opera) {
marginbottom = document.body.scrollHeight
marginright = document.body.clientWidth-15
}
else if (ns6) {
marginbottom = document.body.scrollHeight
marginright = window.innerWidth-15
}
_____________________________
на эту:
______________________________
function initsnow() {
var ua = navigator.userAgent.toLowerCase();
var isOpera = (ua.indexOf(‘opera’) > -1);
var isIE = (!isOpera && ua.indexOf(‘msie’) > -1);
var WinHeight = Math.max(document.compatMode != ‘CSS1Compat’ ? document.body.scrollHeight : document.documentElement.scrollHeight, getViewportHeight());
alert(WinHeight);
function getViewportHeight() {
return ((document.compatMode || isIE) && !isOpera) ? (document.compatMode == ‘CSS1Compat’) ? document.documentElement.clientHeight : document.body.clientHeight : (document.parentWindow || document.defaultView).innerHeight;
}
if (ie5 || opera) {
marginbottom = WinHeight
marginright = document.body.clientWidth-15
}
else if (ns6) {
marginbottom = WinHeight
marginright = window.innerWidth-15
}
_________________________
Спасибо, Влад. Я попробую и отпишу. Только сегодня, к сожалению, не смогу.
Проверил у меня работает во всех браузерах,
если что пишите, рад буду помочь…
Спасибо, Влад.
Всё отлично)! Спасибо вам!
Не подскажете — как преодолеть приоритет flash-баннера перед снежинками?
Уже не помню точно… Там что-то в коде флеш-баннера надо дописать. По моему задать прозрачность.
Ура)))
решение нашлось:
код flash-баннера дополняем
<object …………
…..
………….
для тега param: name=»wmode» value=»transparent»
для тега embed: wmode=»transparent»
Спасибо авторам отличнейшего скрипта! Перерыла пол инета в поисках скрипта падающего снега, чтобы падал только в шапке форума. И вот оно!!!! Всего-то надо изменить значение в marginbottom на какое душе угодно! Сделала 200, как раз падает только в шапке. Снежинки — просто чудо, действительно лучше, чем когда в виде картинок. Еще раз СПАСИБО! С наступающими всех праздниками!
Спасибо, nikki. Желаю вам хорошо встретить Новый год! И чтоб в Новогоднюю ночь кружились настоящие снежинки.
ОТЛИЧНЫЙ СКИПТ! Работает без проблем, и настроен на что угодно!
Респект и уважуха! С Ноступающим 2012!
Спасибо .установил -работает!!!!!!!
Спасибо! Выручили!
Скрипт что надо! Но у меня после его установки на страничках появляется какая то реклама Интернет хостинг центр с не читабельными ссылками. Как её убрать? из за неё некрасиво тянется копирайт на пол страницы
Юрий, ну это же не скрипт генерирует показ рекламы. Как это вообще возможно, чтобы без вашего ведома на вашем сайте показывалась реклама неизвестного происхождения? Я себе такого не представляю. Разве что, к сайту имеет доступ другое лицо
Возможно, т.к. доступ должен быть у админов компании по раскрутке, но для чего им это делать еще не выяснил, вчера до поздней ночи сидел разбирался, оказалось что реклама вылезла в футере, т.е. в копирайте который работает как модуль от движка сайта. Так как доступа к движку сайта нет и звонить разбираться было поздно, я убрал модули с каждой страницы и прописал эту часть вручную. Сейчас все замечательно! Хоть реклама появилась в тот момент и в том месте когда я ставил снежинки, наверное это совпадение, а администраторов с понедельника ждет разбор полетов! Большое вам спасибо за скрипт
НЕ работает
Все должно работать! Проверьте, правильно ли вы прописали путь к скрипту. У нас все работает.
А в оффлайне должно работать? А то все делаю верно, как в инструкции, создаю папку, в разделе head — ссылку на файл, а результат — 0 ((((. Сайт простенький, делал его в Microsoft Front Page, может это тому виной (((.
Конечно, скрипт со снежинками должен работать не зависимо от того, где находятся файлы: на хостинге или локально.
Попробуйте сохранить страницу любого другого сайта и подключить к ней скрипт со снежинками. Если скрипт будет работать, значит проблема с вашим сайтом.
Наш вопрос, возможно не совсем в тему… Подскажите, пожалуйста, откуда ролик про велосипедиста?:) красивый, качественный. А мы великами увлекаемся и видео подобные любим )
Благодарим заранее.
С наступающим Новым годом!
Я уже не помню, адрес того сайта. Там много всего. Но могу порекомендовать поискать на Vimeo. Там гораздо больше, чем на том сайте где я брал. И только хорошего качества.
С наступающим, 2012 годом!