Скрипт рендеринг падающий снег в игре. Падающий снег на jQuery или html шаблон Новогодней поздравительной открытки. Плавный многоуровневый эффект падающего снега на CSS3

Украсить свой сайт перед Рождеством и Новым годом очень просто. Установите скрипт и на сайте появятся красивые снежинки.

Как установить снежинки на свой сайт

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

Перед закрывающим тегом вставьте код:

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

Скачать скрипт

После нажатия на одну из кнопок ниже, появится ссылка для скачивания файла.

Вебмастера украшают сайты

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

Главное не перестараться

Эксперты юзабилити, предупреждают, что не стоит забывать, о том, что если кардинально поменять дизайн сайта, в данном случае под новогоднюю тематику, можно потерять клиентов. Об этом свидетельствует статистика.

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

Как украсить сайт перед Новым годом

Наиболее простым и безболезненным изменением может быть вариант использования эффекта падающих снежинок.

Статья по теме: Как подключить Яндекс.Спеллер к WordPress

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

Первая версия скрипта со снежинками. Эту версию скрипта не скачивайте - она сырая.

Скрипт «Падающие снежинки»

Чем же он отличается от других скриптов, генерирующих снежинки? Дело в том, что падающие снежинки не являются изображениями. Падающие снежинки - это обычные символы шрифта (звездочки «*») . То есть форма снежинок зависит от заданного в настройках шрифта. Вы можете выбрать любой другой стандартный шрифт и тогда снежинки будут другими.

Кроме формы снежинок, можно еще задавать цвет, размер, количество и скорость падения.

Настройки скрипта: цвет, форма, размер и количество снежинок // 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 like var snowcolor=new Array("#b9dff5","#b9dff5","#b9dff5","#b9dff5","#b9dff5") // Set the fonts, that create the snowflakes. Add as many fonts as you like var 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 snowflakes var snowmaxsize=35 // Set the minimal-size of your snowflakes var 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-snowing var snowingzone=1

Скрипт буржуйский и пожтому комментарии на английском языке. Но программерам английский язык - родной. Надеюсь с этим сложностей не возникнет.

Известные проблемы со скриптом

Оригинальный скрипт не лишен недостатков. Но все они уже успешно устранены.

На широкоформатном мониторе снежинки не заполняли всю доступную область. В ява скрипте я не особо разбираюсь. Поэтому исправить недочет в этом скрипте я попросил своего талантливого друга Дениса Балыкина, известного в сети под ником BaDeVlad. Он быстро разобрался в чужом коде и отредактировал его как надо.

У скрипта был очень серьезный недочет. Скрипт не работал не только в Doctype Strict , но и вообще не поддерживал веб-стандарты . Я перепроповал все доктайпы, - ни один из них не позволял появлению осадков в виде снега. Позже, в комментариях, Алексей Юдин дал рецепт от излечения этого тяжелого недуга. Нужно было указать единицы измерения, в конце некоторых строк добавив +"px";

Как подключить скрипт со снежинками на свой хостинг

Скачайте скрипт и разместите на своем хостинге.

Укажите место, где находится скрипт следующей конструкцией

Например, если вы положите скрипт в папку js, которая находится в корне вашего сайта, тогда подключение скрипта будет таким: добавьте вот эту строку в шаблон сайта, например перед тегом body:

height - 89){ Нижняя граница видимости снежинок тем дальше, чем меньше цифра, вычитаемая из высоты. Если же, вместо указанного числа "89" , поставить, скажем - "49" , то снежинки будут, "покружившись" на рисунке примера, исчезать уже за его разделительной полосой .

Количество снежинок - устанавливается в 14-ой строчке js-кода скрипта, в выражении: var col = Math.round(height/25); Количество снежинок тем больше, чем меньше число, прописанное в этом выражении.

Скорость снежинок - настраивается в 50-ой строчке кода, в выражении: setTimeout("snow()", 40); Скорость снежинок тем больше, чем меньше число задержки.

** К примеру , указав этим числам достаточно маленькое значение, скажем - "5" , можно устроить "настоящий снегопад" на странице своего сайта. "Буран"!

И кроме этого!

Не забывать(!) в первой строчке кода: var imgsrc="image/snow/snow.gif"; указывать путь к нужной картинке снежинки.

Кстати! Можно спокойно указывать ЛЮБУЮ КАРТИНКУ из этой папки. Ради пробы я брал и прописывал картинки: snow.gif ÷ snow6.gif (*интересно; они все разные ), абсолютно БЕЗ каких-либо изменений в коде снега .

Чтобы снежинки равномерно распределялись по всей высоте страницы, ВАЖНО(!) , где вставлять JavaScript-код. Лучше всего, чтобы у страницы не "дёргался" нижний скролл, вставить код скрипта снега в самый конец страницы . ПРОВЕРЕНО!
**И ещё! В тэг код скрипта НЕ ВСТАВЛЯТЬ! НЕ РАБОТАЕТ !

Всем привет! Ровно три года назад я уже писал, . Но как выяснилось, скрипт, который я тогда предлагал, и способ его установки оказались не совсем понятными для многих читателей моего блога. Меня буквально завалили вопросами, потому что в том случае нужно было прописывать дополнения в код, загружать файлы в корневую папку… Конечно пришлось помочь всем обратившимся, а это, как Вы сами понимаете, заняло немало времени.

Но, как говорится, время не стоит на месте. Буквально вчера на просторах нашего всезнающего Интернета мне случайно попался отличный скрипт и теперь я знаю еще один способ, как установить падающие снежинки на сайт. Ради спортивного интереса я опробовал его в деле. Результаты Вы видите сами. Скрипт не тормозит скорость загрузки страниц сайта, практически подходит к любой CMS, не напрягает читателей — просто создает хорошее настроение!

Для тех, кому понравились эти падающие снежинки, расскажу подробности их «изготовления». А готовятся они с помощью вот этого небольшого скрипта:

И всё! Больше никаких папок с файлами или отдельных файлов. Достаточно установить данный код сразу после открывающего тега и новогоднее настроение уже с Вами.

Но все темы разные и в моем случае мне пришлось установить скрипт в другом месте. Данный скрипт я вставил в шапку сайта в файл header.php сразу после тега и все отлично работает.

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

Из подробностей могу добавить, что в скрипт «вшиты» 40 снежинок с максимальным размером до 35px. И я тоже считаю, что это оптимальные значения. К сожалению, я так и не смог выяснить имя автора найденной публикации для того, чтобы сказать ему большое спасибо за проделанную работу.

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

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

Если будут вопросы, Вы можете задать их в комментариях к данной статье. Желаю Вам всего самого доброго и поздравляю с Наступающим 2015 годом! Жду Ваших комментариев и с удовольствием на них отвечу.

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

jSnow – универсальный скрипт падающего снега на jQuery

Начнем мы нашу подборку с очень красивого эффекта снега, который добавляется на сайт посредством плагина под названием «jSnow».

Демонстрация:

Согласитесь – красиво!

Для того, чтобы установить этот эффект к себе на сайт, сделайте следующее.

1. Скачайте архив jsnow.zip в конце статьи. Разархивируйте и содержимое загрузите на ваш сайт по FTP или другим удобным для вас способом.

К сожалению, с новыми версиями jQuery скрипт не работает, так что довольствуемся тем, что есть.

3. Перед закрывающим тегом подключаете скрипты:

$(document).ready(function() { $("body").jSnow({ vSize: 100, // Размер области flakes: 30, // Количество снежинок flakeColor: ["#fff"], // Цвет flakeMinSize: 10, // Минимальный размер снежинки flakeMaxSize: 20, // Максимальный размер снежинки fallingSpeedMin: 1, // Минимальная скорость снежинки fallingSpeedMax: 2, // Максимальная скорость снежинки flakeCode:["."] // Вид снежинки }); });

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

Скрипт, как вы понимаете, универсальный, и вместо круглого снега вы можете добавить звезды, например, так:

FlakeCode:["*"] // Вид снежинки

Или же связку круглого снега и звезд:

FlakeCode:[".", "*"] // Вид снежинки

А также любой другой символ (и даже знак доллара – $).

Скрипт отлично подходит для оформления верха сайта, не перекрывая при этом основной контент.

Snowstorm – умный скрипт падающего снега на JavaScript

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

Демонстрация:

Чтобы установить этот эффект на свой сайт, не требуется дополнительных библиотек. Все, что вам нужно сделать, это:

1. Скачать архив snowstorm.zip в конце статьи. Разархивировать и содержимое загрузить на ваш сайт удобным для вас способом.

window.onload = function() { snowStorm.snowColor = "#fff"; // Цвет снежинок snowStorm.flakesMaxActive = 100; // Максимальное количество видимых снежинок snowStorm.followMouse = true; // true - гоняться за курсором, false - нет snowStorm.snowCharacter = "."; // Вид снежинки };

По необходимости вносите изменения в анимацию скрипта.

Помимо того, что снежинки отталкиваются от курсора, часть из них прилипает к низу экрана, создавая небольшое впечатление формирования снежинками сугроба.

Snowfall – эффект падающего снега с сугробами на jQuery

Этот скрипт мне нравится больше всех, ведь он реализует мелкую снежную крупу, а также собирает на указанных элементах небольшие сугробы.

Демонстрация:

Установка этого эффекта немного дольше остальных.

1. Если на вашем сайте отсутствует библиотека jQuery, подключите ее в секцию HEAD :

3. Открывающему тегу присвойте класс «darkBg »:

4. Перед закрывающим тегом подключите скрипты:

$(document).ready(function() { document.body.className = "darkBg"; $(document).snowfall({ collection: ".collectonme", flakeCount: 200 // Количество снежинок }); });

5. И завершающим этапом присвойте класс тем элементам, над которыми должны образовываться сугробы:

Class="collectonme"

Если вы не хотите формирования сугробов на сайте – удалите из скрипта строчку:

Collection: ".collectonme",

Это обязательное действие, иначе снег на вашем сайте не будет падать.

Отличный скрипт, именно его мы раньше использовали на своем сайте.

Плавный многоуровневый эффект падающего снега на CSS3

Здесь, как вы понимаете, мы не будем прибегать к использованию всяческих скриптов, а обойдемся лишь чистым CSS.

Демонстрация:

Волшебно, не так ли?

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

1. Скачайте архив snow_img.zip в конце статьи. Разархивируйте и содержимое загрузите на ваш сайт по FTP или через файловый менеджер хостинга.

2. В ваш файл стилей вставьте (желательно в самый низ):

SnowContainer { width: 100%; height: 100%; position: absolute; top: 0; left:0; z-index: -1; } #snow { width: 100%; height: 100%; background-image: url("/snow/snow_1.png"), url("/snow/snow_2.png"), url("/snow/snow_3.png"); -webkit-animation: snow 20s linear infinite; -moz-animation: snow 20s linear infinite; -ms-animation: snow 20s linear infinite; animation: snow 20s linear infinite; } @keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px; } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; } } @-moz-keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px; } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; } } @-webkit-keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px; } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; } } @-ms-keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px; } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; } }

После чего сохраните все изменения.

Вот такая хорошая подборка эффектов снега, которая, без сомнения, порадует посетителей вашего сайта.

Но сначала, хотелось бы ответить на комментарии по теме , - когда выйдет следующая часть? Отвечу Вам там, что мы сейчас, как я и писал в Новогоднем поздравлении, переходим официально на видео, поэтому появиться четвертая часть уже в видеоформате, а также в сокращенном текстовом формате. Дата выхода планируется на февраль месяц этого года. А теперь, собственно, давайте поговорим о плагине SnowFall.

В источниках материала, я указал ссылочку на GitHub разработчика данного плагина, где он подробно все описывает и показывает демо версию своего скрипта, причем в различных примерах. Я же лично, хотел Вас ознакомить только с одним примером, который показался мне очень удобным и занял минимум времени на разработку и внедрение в свой проект.

Первый шаг. HTML.

Для начала, давайте подключим необходимые библиотеки js и файлы стилей css . И так, данный плагин работает без библиотеки jquery.min.js , поэтому просто подключаем родную библиотеку плагина snowfall.min.js .

По поводу стилей, будем использовать наш стандартный файл стилей demo.css .

Теперь, чтобы сложилось впечатление, что снежинки падают на снег, создаем графическое изображение fon.jpg и сохраняем его в папке img такое, как на демо версии. Ну это опять таки, только для примера, все зависит от Вашего воображения и потребностей.

После этого создаем, собственно, и сам блочный контейнер div с идентификатором content , в котором будем запускать наш плагин падающих снежинок на сайт . Из параметров стоит учесть, что minSize задает минимальный размер снежинки 5 пикселям, а максимальный размер снежинок maxSize равен 12 пикселям. Настройте размер снежинок сами на такой, какой Вам нужен.

snowFall.snow(document.body, {round: true, minSize: 5, maxSize:12});

Второй шаг. CSS.

Переходим ко второму шагу, а именно к стилям css . В нашем примере, все стили, исключительно нужны только для оформления, а в полноценной работоспособности скрипта, - не нуждаются! Все стили предназначены для правильно позиционирования графического изображения fon.jpg , поэтому уже смотрите сами, нужны они Вам или нет.