vspishkacraft.ru → Обслуживание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Статья по теме: Как подключить Яндекс.Спеллер к 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:

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-файл в :

4. Вставляем html код

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

❄

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

Подключение фоновой картинки, большого заголовка и падающих снежинок

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

1. Скачиваем архив и его разархивировируем 2. Подключаем библиотеку jQuery

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

3. Подключаем шрифт "Lobster"

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

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

4. Подключаем стили

Вариант А. Вставьте 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 следующим образом:

5. Подключаем скрипт падающего снега

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

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

6. Заливаем изображение фона

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

7. Вставляем html код

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

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

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