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

02.07.2020

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

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

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

Подключение скрипта падающих снежинок на готовый сайт 1. Подключаем библиотеку jQuery

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

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

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

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

3. Создаем файл snow.js

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

Подключаем 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 код падающего снега:

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

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

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

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

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

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

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

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

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

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

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

Новогодние плагины падающего снега для WordPress

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

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

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

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

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

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

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

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

Снег на сайт по запросу пользователя

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

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

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

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

< script type= "text/javascript" src= "путь/jquery.min.js?ver=1.7" > < script src= "путь/jquery.letsinsnow.js" >

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

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

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

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

< input name= "snowbutton" TYPE = "button" onclick= "$("body").snowFall();" title= "Снежинки!" class= "snowbutton" />

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

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

.snowbutton { background : url ("snowflake.png" ) 100% no-repeat ; width : 64px ; height : 64px ; overflow : visible ; margin-top : 80px ; margin-left : 740px ; cursor : pointer ; border : 0 ; }

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

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

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

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

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

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

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

позаботится об украшение сайта . Заходишь на сайт, а там, падает снег или снежинки , чувствуется дух праздника и сразу создаётся хорошее праздничное настроение. Хотя снег виртуальный, но всё равно, радует. Согласны? Ну конечно. Тогда, я вам сегодня подскажу - Как добавить, включить, установить снег или снежинки на сайте .

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

Плагин Snow Flurry - идёт снег на сайте WordPress

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

Супер плагин WFS Let It Snow - добавляет снегопад на вашем сайте

Плагин WFS Let It Snow

Отличный плагин на JQuery, с помощью его можно устроить просто настоящий снегопад на сайте, то есть, белую мглу. В настройках можно выбрать тип снегопада из четырех вариантов: слабый, средний, тяжёлый и белая мгла. А также, сделать падающие снежинки только на главной странице или на всех; включить/отключить снег; минимальный и максимальный размер снежинок; минимальная и максимальная скорость хлопьев; включите тени (для веб-сайтов с белым фоном):

Настройка WFS Let It Snow Plugin

Здесь, также после установки и активации плагина в разделе настройка появится подраздел Let It Snow, нажимаете и настраиваете. Идем далее.

Tribulant Snow Storm - метель на вашем сайте

Этот плагин мне понравился больше, даже не знаю почему, может из за направления снегопада, метель из снега реагирует на движение указателя мышки (если включить такую опцию). Прикольно, посетителям понравится. Ещё из настроек: цвет снега; количество хлопьев; интервал анимации; поддержка мобильных; снег таит внизу экрана и эффект мерцания:

Вот пожалуй и всё с модулями для украшения сайта падающим снегом, на которые стоит обратить ваше внимание. Я тоже ближе к Новому году устрою метель на блоге. Жалко одно, если у вас светлый фон сайта (у меня тоже) придётся белый снег менять на другой, например: синий или голубой. Вот, как то так. Чуть не забыл, все представленные плагины устанавливаются стандартным способом, через админпанель - добавить плагин и в поле поиска ввести название его.

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

Скрипт падающего снега на сайт

Скрипт падающих снежинок подойдёт для любого сайта или блога на любой платформе. Только придётся повозиться (скрипт надо загрузить на свой хостинг), можно использовать свой хостинг где расположен ваш сайт, а можно воспользоваться сторонним, например: бесплатный и Диск Google. И так вот код скрипта:

/* Snow Fall 1 - no images - Java Script Visit http://rainbow.arch.scriptmania.com/scripts/ for this script and many more */ // Set the number of snowflakes (more than 30 - 400 not recommended) var snowmax=100 // 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 /////////////////////////////////////////////////////////////////////////// // CONFIGURATION ENDS HERE /////////////////////////////////////////////////////////////////////////// // Do not edit below this line var snow=new Array() var marginbottom var marginright var timer var i_snow=0 var x_mv=new Array(); var crds=new Array(); var lftrght=new Array(); var browserinfos=navigator.userAgent var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/) var ns6=document.getElementById&&!document.all var opera=browserinfos.match(/Opera/) var browserok=ie5||ns6||opera function randommaker(range) { rand=Math.floor(range*Math.random()) return rand } 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 } var snowsizerange=snowmaxsize-snowminsize for (i=0;i(marginright-3*lftrght[i])){ if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2} snow[i].posy=0 } } var timer=setTimeout("movesnow()",50) } for (i=0;i= strtotime ("2015-12-01" ) && time () подключаем наш скрипт вот такой строчкой:

Для наглядности покажу куда я его вставил:

Обязательно сохраните все изменения и вот, что у вас должно получиться на сайте:

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

Вставим следующий код ниже в область футера:

snowStorm.snowColor = "#99ccff"; // голубоватые снежинки, цвет можно менять snowStorm.flakesMaxActive = 100; // Показывать количество снежинок на странице snowStorm.useTwinkleEffect = true; // мерцающий эффект

В шаблоне все это будет выглядеть так:

Теперь посмотрим, что получилось в браузере:

Как мы видим наши снежинке на сайте стали нежно голубоватого цвета, прямо настоящий снегопад на сайте получился 🙂

Другие настройки скрипта снежинок

Для того, чтобы еще более «поизвращаться» над скриптом я пробегусь по другим опциям.

snowStorm . autoStart = true ; — выбор между тем будет ли снег автоматически появляться при загрузки страницы или нет.

snowStorm . animationInterval = 33 ; — измерение интервала миллисекунд на кадр. При значение = 20 быстрая и гладкая, но будет нагружать процессор. Если поставить = 50, то более консервативно, но медленнее.

snowStorm . flakeBottom = null ; — ограничение прилипания снегу к нижней части странице. Если не указано, то снег просто прилипнет к нижней части страницы сайта и исчезнет с прокруткой или скроллингом.

snowStorm . flakesMax = 128 ; — установка значения максимального количества снежинок, выпадающих в любой части страницы за единицу времени.

snowStorm . flakesMaxActive = 64 ; — устанавливает предел падающих снежинок (т.е движущихся на экране и считающихся активными).

snowStorm . followMouse = true ; — позволяет снегу двигаться на сайте с «ветром» по отношению к движению мышки по оси X (вправо/влево).

snowStorm . freezeOnBlur = true ; — останавливаем эффект снежинок, когда пользователь в данный момент выходит из окна браузера, например переходит на другую вкладку, тогда снег останавливается. Это сберегает CPU и приятнее для пользователя.

snowStorm . snowColor = "#fff" ; — белый цвет снега (не ешьте и не используйте на сайте желтый снег:-))

snowStorm . snowCharacter = " " ; — . ( ) = bullet. · entity (·) не используется, поскольку в некоторых системах это считается квадратом. Любое изменение можно привести к обрезке нашей снежинки и может также повлечь flakeWidth (длина) / flakeHeight (высота) изменения, так что будьте осторожны.

snowStorm . snowStick = true ; — параметр позволяет снежинкам «прилипать» к низу экрана, когда выключен, то снег никогда не осядет на дно экрана.

snowStorm . targetElement = null ; — здесь немного сложнее, я это понял как html элемент прописывается по умолчанию в тело документа (body ). Может быть элементом ID строки, например ‘myDiV’ или DOM ссылкой. Как-то так.

snowStorm . useMeltEffect = true ; — при поддержке данного параметра упавший снег будет таять, при включенном значении.

snowStorm . useTwinkleEffect = true ; — позволяет снегу мерцать вне поля зрения в момент падения.

snowStorm . usePositionFixed = false ; — при булевском значение true — окно прокрутки не будет влиять на падающий снег, т.е он будет идти и идти. Это заметно увеличивает нагрузку на процессор. По умолчанию стоит false.

snowStorm . vMaxX = 8 ; snowStorm . vMaxY = 5 ; — значение быстроты снежинок по x и y для шторма. Случайная величина в этом диапазоне выбирается для каждого снежинки.

На этом все дорогие друзья, вполне возможно, что я допустил где-то ошибку в объяснении настроек скрипт, вы тогда меня поправьте. У меня, в целом, все прекрасно работает и радует глаз. Спасибо за внимание, жду ваших комментариев и дискуссий. У меня к вам вопрос — а какой эффект вы используете с наступлением зимы для сайта? 🙂