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

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

Тут мало что можно сказать, лучше посмотреть демонстрацию этого падающего снега. Вдобавок там очень красивый фон и надпись "С Новым годом", написанная красивым шрифтом "Lobster" от Google. Вы с легкостью этот файл можете превратить в интернет открытку с поздравлением.

Подключается она так: между тегами и вставляете следующий код:

Вставьте css-код в свой css файл (обычно это style.css):

#canvas { border: 1px solid black; position: absolute; z-index: 10000; } #flake { color: #fff; position: absolute; font-size: 25px; top: -50px; }

Создадим файл snow.js и вставляем туда следующий javascript-код:

var t = setInterval(function(){ var documentHeight = $(document).height(); var startPositionLeft = Math.random() * $(document).width() - 100; var startOpacity = 0.5 + Math.random(); var sizeFlake = 10 + Math.random() * 20; var endPositionTop = documentHeight - 40; var endPositionLeft = startPositionLeft - 100 + Math.random() * 200; var durationFall = documentHeight * 10 + Math.random() * 5000; $("#flake") .clone() .appendTo("body") .css({ left: startPositionLeft, opacity: startOpacity, "font-size": sizeFlake } ) .animate({ top: endPositionTop, left: endPositionLeft, opacity: 0.2 }, durationFall, "linear", function() { $(this).remove() }); }, 500); var snow = {}; var snowflex = {}; snowflex.create = function(){ var flex = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; flex.style.top = - 50 + Math.random() * 20 + "px"; flex.style.left = Math.random() * 1500 + "px"; flex.style.position = "absolute"; flex.style.color = "#F3F3F3"; flex.style.opacity = Math.random(); document.getElementsByTagName("body").appendChild(flex); return flex; }; snow.snowflex = function(){ var flex = snowflex.create(); var x = -1 + Math.random() * 2; var t = setInterval(function(){ flex.style.top = parseInt(flex.style.top) + 5 + "px"; flex.style.left = parseInt(flex.style.left) + x + "px"; if (parseInt(flex.style.top) > 1500) { clearInterval(t); document.getElementsByTagName("body").removeChild(flex); } }, 45 + Math.random() * 20); }; snow.storm = function(){ var t = setInterval(function(){ snow.snowflex(); }, 500); }; //snow.storm(); var fog = {}; fog.draw = function(ctx, x, y){ ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); }; fog.start = function(){ var ctx = document.getElementById("canvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(function(){ x = 300 + 300*Math.sin(x); y = 300 + 300* -Math.cos(x); x += 2; fog.draw(ctx, x, y); }, 100); }; //fog.start();

Подключаем js-файл в :

Ну и осталось самое главное - вставить html код падающего снега в любое места в :

❄

Если вы все сделали правильно, то у Вас на сайте начнет падать снег.

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

Обязательно подключить библиотеку jQuery (не обязательно, если у Вас уже подключена эта библиотека). Подключается она так: между тегами и вставляете следующий код:

Аналогично подключению бибилиотеки jQuery, подключаем шрифт для нашей надписи "С Новым годом":

Естественно, если Вам не нужна эта надпись и шрифт, вы можете его не подключать, но тогда и в css уберите у атрибута H1 "font-family: "Lobster", cursive;", или замените его на свой шрифт

Вариант А. Вставьте css-код в свой css файл. Вот код:

Img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } h1 { font-family: "Lobster", cursive; color: #FFF; font-size: 90px; text-align: center; line-height: 95px; font-weight: normal; margin-top: 300px; text-shadow: 5px 5px 5px #000; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } } html, body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 16px; padding: 0; margin: 0; color: #333; } .bar { background-color: #111; color: #f0f0f0; box-shadow: 0px 0px 2px #333; line-height: 25px; padding: 0px 20px; opacity: 0.7; } .bar:hover { opacity: 1; } .bar a { color: #DDD; } .bar a:hover { color: #FFFFFF; } a { color: #FFFFFF; text-decoration: none; } a:hover { color: #CCC; } #canvas { border: 1px solid black; position: absolute; z-index: 10000; } #flake { color: #fff; position: absolute; font-size: 25px; top: -50px; } #page { position: relative; }

Вариант B. Также можно создать отдельный файл, например snow.css и вставить этот же код туда, правда его надо будет подключить в head следующим образом:

Вариант А. Для этого нам нужно вставить в самый низ сайта (до закрытия ) следующий javascript-код:

var t = setInterval(function(){ var documentHeight = $(document).height(); var startPositionLeft = Math.random() * $(document).width() - 100; var startOpacity= 0.5 + Math.random(); var sizeFlake= 10 + Math.random() * 20; var endPositionTop= documentHeight - 40; var endPositionLeft= startPositionLeft - 100 + Math.random() * 200; var durationFall= documentHeight * 10 + Math.random() * 5000; $("#flake") .clone() .appendTo("body") .css({ left: startPositionLeft, opacity: startOpacity, "font-size": sizeFlake }) .animate({ top: endPositionTop, left: endPositionLeft, opacity: 0.2 }, durationFall, "linear", function() { $(this).remove() }); }, 500); var snow = {}; var snowflex = {}; snowflex.create = function(){ var flex = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; flex.style.top = - 50 + Math.random() * 20 + "px"; flex.style.left = Math.random() * 1500 + "px"; flex.style.position = "absolute"; flex.style.color = "#F3F3F3"; flex.style.opacity= Math.random(); document.getElementsByTagName("body").appendChild(flex); return flex; }; snow.snowflex = function(){ var flex = snowflex.create(); var x = -1 + Math.random() * 2; var t = setInterval(function(){ flex.style.top = parseInt(flex.style.top) + 5 + "px"; flex.style.left = parseInt(flex.style.left) + x + "px"; if (parseInt(flex.style.top) > 1500) { clearInterval(t); document.getElementsByTagName("body").removeChild(flex); } }, 45 + Math.random() * 20); }; snow.storm = function(){ var t= setInterval(function(){ snow.snowflex(); }, 500); }; //snow.storm(); var fog = {}; fog.draw = function(ctx, x, y){ ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); }; fog.start = function(){ var ctx = document.getElementById("canvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(function(){ x = 300 + 300*Math.sin(x); y = 300 + 300* -Math.cos(x); x += 2; fog.draw(ctx, x, y); }, 100); }; //fog.start();

Вариант B. Также как и с css-кодом, javascript можно вынести в отдельный файл и также его назвать snow.js и подключить его в head:

Залить картинку bg.jpg из архива в корень Вашего сайта

Ну и осталось самое главное - вставить html код падающего снега:

С Новым годом! ❄

Скрипт падающего снега успешно подключен. Обязательно посмотрите его в работе. Всего доброго!

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

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

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

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

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

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

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

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

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

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

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

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

Начнем мы нашу подборку с очень красивого эффекта снега, который добавляется на сайт посредством плагина под названием «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:[".", "*"] // Вид снежинки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Class="collectonme"

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

Collection: ".collectonme",

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

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

Здесь, как вы понимаете, мы не будем прибегать к использованию всяческих скриптов, а обойдемся лишь чистым 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; } }

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

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

Украшать свои сайты и блоги в период Новогодних и Рождественских праздников дело хорошее. Приятно как-то даже такие сайты посещать:).

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

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

Совсем недавно в google появилась новая фишка. Я о ней сообщал в — это падающий снег и замораживающийся экран, который потом можно стирать пальцем. Попробуйте, введите в поисковик запрос “let it snow ”.

Мне очень понравился такой подход по двум причинам:

1 . Выглядит очень симпатично ;

2 . Снег начинает падать лишь по запросу пользователя.

Вот такое украшение по мне. Но реализовать заморозку экрана я не смогу — не программист, хочу заказать программисту, но не уверен что поспеет к этому Новому году. А вот с падающим снегом в стиле гугла и «по заказу» посетителя — это можно:). Правда опять же не своими силами, а с помощью одного хорошего «иносранца»:), но не суть.

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

Очень даже хороший плагин. Не мало разного рода настроек: скорость анимации, цвет падающего снега, размер хлопьев, количество одновременно падающих снежинок и др. Есть даже что-то вроде замораживания, но я не смог его запустить:(.

На первый взгляд снег на сайте выглядит вроде не плохо, попробуйте, возможно вам понравится.

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

Говорят хороший плагин. У меня почему-то не запустился, хотя установился нормально, а снега нет:). Попробуйте, может у вас получится лучше.

Этот плагин делает точно такой же снег, как сейчас у меня. Настроек никаких особо нет, просто — установили и пошел снег. Хотя если захотеть, то кое-что настроить все же можно (цвета, скорость и т.д.) в редакторе плагинов, т.е. редактируя сам файл плагина.

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

Этот плагин можно назвать универсальным праздничным плагином. По мимо собственно снега этот скрипт может и шарики надувные пускать и листочки всякие:).

Очень интересный плагин…даже захотелось установить. Но…, есть у меня уже свой снег:).

Вот собственно то решение, которое на мой взгляд лучше всего из всех перечисленных выше. Конечно здесь не все так круто, как в том же «Snow, balloons and more», но проще не значит хуже.

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

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

Затем между тегами пропишите путь к скриптам:

Обратите внимание, если у вас уже есть подключенная библиотека jquery, то повторно подключать ее совсем не требуется. Тогда просто пропишите путь к jquery.letsinsnow.js.

В файле jquery.letsinsnow.js в строке 15 (‘color’ : ‘#79B3EC’,) можно изменить цвет снежинок. Остальное думаю можно оставить по-умолчанию;).

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

1 . Разместить код кнопки в нужном месте сайта:

У меня кнопка размещена в шапке блога. Потому код я добавлял в файл header.php своего wordpress шаблона.

2 . Добавить в файл стилей (обычно это style.css) следующий стиль:

Здесь вам понадобится откорректировать пару параметров:

— путь к изображению кнопки: background:url(«snowflake.png») 100% no-repeat; .

— место расположения кнопки на сайте: margin-top:80px; (отступ сверху экрана) и margin-left:740px; (отступ слева).

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

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

Удачи Вам друзья! С наступающим Новым годом и Рождеством!

Сладкое на сегодня: Приятная мелодия, приятная песня, приятный Рождественский клип. Наслаждайтесь 🙂