Эффект падающих снежинок на сайт

Эффект падающих снежинок на своем сайте

Скачать скрипт можно здесь, посмотреть в действии — прямо на этой странице.

Использование скрипта предельно просто: нужно поместить его в корневой каталог сайта и добавить в HTML-код сайта тег<\p>

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

В начало скрипта вынесены некоторые переменные с настройками. Их можно редактировать по своему усмотрению:

snowmax — количество снежинок, которое будет на экране одновременно. Несмотря на то, что скрипт достаточно легкий, злоупотреблять количеством не рекомендуется.

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

snowletter — Символ (*) и есть наша снежинка, в место нее можно вставить любой другой символ или изображение.

snowmaxsize — массив, в котором задается максимальный размер снежинок.

snowminsize — массив, в котором задается минимальный размер снежинок.

sinkspeed — Задает скорость падения снежинок.

Файл :
Tweet Follow @webshpargalka

Спасибо! Падающие снежинки работают! Очень признателен за материал!2013-12-13 05:57
Спасибо! Установил-всё работает,ждём декабря! Снежинки-супер!2014-11-11 16:08
Татьяна вопросик можно? Что если картинку вместо символа , то изменение размера и цвета нет, или можно прикрутить?2014-12-10 10:11
Конечно можно, по моему, даже размер не нужно прикручивать, у нас же есть snowmaxsize=35 и snowminsize=8. Как-то я экспериментировал с картинками, если мне память не изменяет, то я просто менял символ на картинку, и все…2015-01-08 22:12
Интересная статья, спасибо большое! Я думал, что для этого непременно необходим, какой либо специальный плагин но, как оказалось всё гораздо проще.2015-12-10 03:04
Добрый день! Очень давно ищу эффекты падающих снежинок на сайт, а не знаю как его установить. Огромная просьба, объясните как мне его установить на мой сайт   http://74202s043.edusite.ru/ Заранее благодарна!2016-01-29 13:18
Скачайте архив нажав на «Скачать скрипт можно здесь». Залейте архив на хостинг где находится Ваш сайт, а точнее рядом с файлом index.php(если Вы хотите чтобы снег падал на главной странице) и распакуйте архив, после вставьте в код файла index.php, между тегами head, код который и будет подключать js файл из архива(snow-fall.js) «». Вот и все!2016-01-29 13:35
Татьяна Спасибо огромное! Теперь и на моем сайте предновогоднее настроение2016-12-23 21:53
Андрей Как задать путь к картинке?2017-04-21 05:11

Источник: http://www.web-shpargalka.ru/padaiushie-snejinki-na-saite.php

Падающий снег для сайта на HTML5 Canvas

Предлагаю вашему вниманию эффект падающего снега, который реализован с помощью Canvas. 

В данной реализации эффекта падающего снега есть один интересный плюс — снег отлетает от курсора мыши.

Важно! Для работы с данным примером трансформации текста не забудьте обязательно подключить библиотеку jQuery.

Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже.

Демо Скачать

HTML

Вернуться на сайт с уроком

CSS

.xmas { height: 100%; width: 100%; position: relative; background: url(«https://wp-lessons.com/wp-content/uploads/2014/12/xmas-large.jpg») no-repeat 0 0/cover; } .xmas .

xmas-message { position: absolute; left: 50%; top: 50%; z-index: 2; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: calc(90% — 6rem); height: calc(100% — 12rem); margin: 0 auto; background: url(https://wp-lessons.com/wp-content/uploads/2014/12/merryxmas.png) no-repeat 50% 50% / contain; } .

xmas .from { position: absolute; bottom: 40px; width: 100%; z-index: 3; text-align: center; } .xmas .from div { font-family: «quimby-mayoral», sans-serif; color: #ffffff; font-size: 40px; margin-bottom: 10px; } .xmas .from .

gc-link { display: inline-block; font-family: «brandon-grotesque», sans-serif; font-size: 24px; color: #ffffff; -webkit-transition: 400ms ease; transition: 400ms ease; text-decoration: none; text-transform: uppercase; } .xmas .from .gc-link:hover { color: #1cff94; } .xmas #xmas { width: 100%; height: 100%; position: relative; z-index: 2; }

JS

$(document).ready(function(){ initLetItSnow(); }); var initLetItSnow = function(){ (function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; window.requestAnimationFrame = requestAnimationFrame; })(); var flakes = [], canvas = document.getElementById(«xmas»), ctx = canvas.getContext(«2d»), mX = -100, mY = -100; if( $(window).width() < 999 ){ var flakeCount = 125; } else { var flakeCount = 450; } canvas.width = window.innerWidth; canvas.height = window.innerHeight; function snow() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < flakeCount; i++) { var flake = flakes[i], x = mX, y = mY, minDist = 250, x2 = flake.x, y2 = flake.y; var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)), dx = x2 - x, dy = y2 - y; if (dist < minDist) { var force = minDist / (dist * dist), xcomp = (x - x2) / dist, ycomp = (y - y2) / dist, deltaV = force; flake.velX -= deltaV * xcomp; flake.velY -= deltaV * ycomp; } else { flake.velX *= .98; if (flake.velY = canvas.height || flake.y = canvas.width || flake.x

Источник: https://wp-lessons.com/padayushhiy-sneg-dlya-sayta-na-html5-canvas

Эффект снега на сайте с помощью JS

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

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

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

ДЕМО

Обратите внимание

ИСХОДНИКИ

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

Шаг 1. HTML

Разметка будет весьма примитивна, у нас будет несколько классов которые выводят необходимые нам элементы на странице, кроме этого добавили несколько спан-классов.

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

Читайте также:  Как заработать биткоины на колебание курса

Шаг 2. JS

Чтобы добиться такого результата отображения нам необходимо указать функции js, мы указываем параметры окружности, эффект наложения, рондомное отображение снежинок:

window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); var canvas = document.getElementById('cvs'), ctx = canvas.getContext('2d'), height = canvas.height = document.body.offsetHeight, width = canvas.width = document.body.offsetWidth, collection = [], num_drops = 2000, gravity = 1, windforce = 1, windmultiplier = 0, gutter = 0; function Drop() { this.x; this.y; this.radius; this.distance; this.color; this.speed; this.vx; this.vy; } Drop.prototype = { constructor: Drop, random_x: function() { var n = width * (1 + gutter); return (1 — (1 + gutter)) + (Math.random() * n); }, draw: function(ctx) { ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); ctx.closePath(); ctx.fill(); } }; function draw_frame() { ctx.clearRect(0, 0, width, height); collection.forEach(function (drop) { ctx.globalAlpha = (drop.distance + 1) / 10; drop.draw(ctx); ctx.globalAlpha = 1; drop.x += drop.vx; drop.y += drop.vy; var lx = drop.vx + windforce; lx < maxspeed && lx > 1 — maxspeed && (drop.vx = lx); if (drop.y > (drop.distance + 1) / 10 * height) { drop.y = Math.random() * -drop.radius * (num_drops / 10); drop.x = drop.random_x(); } if (drop.x > width * (1 + gutter)) { drop.x = 1 — (width * gutter); } if (drop.x < 1 - (width * gutter)) { drop.x = width * (1 + gutter); } }); } function animate() { requestAnimFrame(animate); draw_frame(); } function windtimer() { windforce = Math.random() > 0.5 ? windmultiplier : -windmultiplier; setTimeout(windtimer, Math.random() * (1000 * 30)); } function init() { collection = []; while (num_drops—) { var drop = new Drop(); // todo: make constructor do this shit drop.color = «#eee»; drop.distance = Math.random() * 10 | 0; drop.speed = Math.random() * (drop.distance / 10) + gravity; drop.vx = 0; drop.vy = Math.random() * drop.speed + (drop.speed / 2); drop.radius = (drop.distance + 1) / 16 * 3; drop.x = drop.random_x(); drop.y = Math.random() * height; collection.push(drop); } windtimer(); animate(); window.onresize = function() { height = canvas.height = document.body.offsetHeight; width = canvas.width = document.body.offsetWidth; }; } init();

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

Вот и все. Готово!

Источник: https://s-sd.ru/blog_studio_design/effekt_snega_na_sajte_s_pomowyu_js/

Создаем эффект падающего снега на веб-странице при помощи CSS3

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

Итак, приступим.

HTML-код будет предельно простой:

 
 
 
 С Рождеством и Новым Годом!

 

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

body {
 background-image: url('christmas.jpg');
 background-repeat: no-repeat;
 background-attachment: fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 -ms-background-size: cover;
 background-size: cover;
}

Здесь мы использовали background-size: cover, чтобы наш фон масштабировался с сохранением пропорций.

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

Картинки со снежинками представляют собой квадратные PNG-изображения, размером 500, 400 и 300 пикселей, и, как я уже говорил, с прозрачным фоном.  Снежинки можно нарисовать в Photoshop или Gimp с помощью соответствующих кистей. Я использовал кисти для Gimp GIMP Snowflake Brushes by ~Project-GimpBC.

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

Важно

Теперь мы применим эти изображения для нашего блока-обертки (). Зададим ему высоту 100%, чтобы он занял всю площаль окна, также не забудем указать такую же высоту и для тегов html и body.

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

html, body {
height: 100%;
}

div#wrapper {

 background-image: url('snowflake1.png'), url('snowflake3.png'), url('snowflake2.png');
 height:100%;
}

Создание анимации

Для создания анимации мы будем использовать @keyframes. Имя для анимации зададим, например, snow. Далее мы создадим два фрейма.

Первый, это то как наша страница будет выглядеть в начале анимации, второй — это то, как она будет выглядеть в конце.

В начале я разместил все наши фоновые изображения в левом верхнем углу страницы, определив background-position равную «0px 0px». Затем мы перемещаем каждое изображение в разные места на странице.

@keyframes snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

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

@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;}
}

На следующем шаге мы зададим правила показа анимации. Сначала мы указываем имя анимации, которую мы хотим использовать, в данном случае «snow», затем длительность анимации (20 секунд), затем выбираем тип анимации (linear) и, наконец, цикл анимации — бесконечный.

div#wrapper {
 background-image: url('snowflake.png'), url('snowflake3.png'), url('snowflake2.png');
 height:100%;
 -webkit-animation: snow 20s linear infinite;
 -moz-animation: snow 20s linear infinite;
 -ms-animation: snow 20s linear infinite;
 animation: snow 20s linear infinite;
}

Читайте также:  Самостоятельная раскрутка интернет-магазина

Источник: http://www.webmasters.by/articles/html-coding/987-make-it-snow-on-your-website-with-css3.html

Как установить падающие снежинки на сайт

Главная › Полезные советы Просмотров: 1 671

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

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

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

  Ради спортивного интереса я опробовал его в деле. Результаты Вы видите сами.

Совет

  Скрипт не тормозит скорость загрузки страниц сайта, практически подходит к любой CMS, не напрягает читателей — просто создает хорошее настроение!

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

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

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

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

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

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

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

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

С уважением, Евгений Вергус.

Рубрика: Полезные советы

(Оценок статьи ещё нет. Будьте первыми!)
Загрузка…

Подпишитесь на RSS-рассылку и будьте в курсе всех новых статей

Источник: https://sovetywebmastera.ru/poleznye-sovety/kak-ustanovit-padayushhie-snezhinki-na-sayt

Падающие снежинки на сайт плагин SnowFall

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

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

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

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

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

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

Обратите внимание

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

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

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

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

html, body{ width:100%; height:100%; } body{ overflow: hidden; } #content{ width:100%; height:100%; background: url(«../img/fon.jpg») no-repeat; background-size:cover; }

На этом все, благодарю всех за внимание! Огромное спасибо, что нас читаете и подписываетесь. Всем удачи! P.S. Если какие-либо вопросы или трудности возникнут по скриптам или урокам, обязательно обращайтесь. Будем рады помочь!

Читайте также:  Как правильно оформить страницу "реклама на сайте"

Роман КраутерИсточник материала »

Источник: https://roothelp.ru/lessons/padaushie_sneginki_na_sait_plagin_snowfall

Снег или снежинки на сайте WordPress

(Последнее обновление: 07.07.2016)

Привет, дамы и господа! Зима, Новый год и Рождество на носу, а это значит, время позаботится об украшение сайта.

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

Тогда, я вам сегодня подскажу — Как добавить, включить, установить снег или снежинки на сайте.

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

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

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

Простой и полностью настраиваемый плагин.

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

Настройка плагина Snow Flurry

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

Плагин WFS Let It Snow

Отличный плагин на JQuery, с помощью его можно устроить просто настоящий снегопад на сайте, то есть, белую мглу.

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

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

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

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

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

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

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

Настройка метели на сайте WordPress

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

Жалко одно, если у вас светлый фон сайта (у меня тоже) придётся белый снег менять на другой, например: синий или голубой. Вот, как то так.

Чуть не забыл, все представленные плагины устанавливаются стандартным способом, через админпанель — добавить плагин и в поле поиска ввести название его.

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

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

Источник: https://WordPressMania.ru/sneg-ili-snezhinki-na-sayte-wordpress/

Новогоднее оформление сайта. Скрипты падающего снега

17/10/2016

Здравствуйте, уважаемые читатели блога Freenteza.ru! Приближается зима, а вместе с зимой приходят и праздники, новогоднее настроение, так давайте же перенесем это настроение своему сайту. Скрипты, которые я подготовил для вас, это анимации падающего снега прямо на вашем сайте.

Одинаково исправно отображаются во всех браузерах на момент создания статьи. Установить скрипт падающего снега легко, как для обычных сайтов (html страницы), так и для сайтов на CMS (WP, Joomla и т. д.).

Как выглядит анимация и как ее установить на сайт я расскажу дальше.

Падающие снежинки №1

    1. Сначала скачайте архив «Падающие снежинки 1«, в котором будет 2 папки «img» и «js«;
    2. В первой папке 5 картинок со снежинками, во второй скрипт;
      Папка «img«

      Папка «js«

    3. Перенесите папки на свой сайт, либо в корень сайта, либо в корень темы, если у вас WordPress;
    4. После чего откройте файл snow1.js и укажите путь к файлам папки «img«;
    5. Теперь осталось только подключить скрипт с настройками. Поместите код в тег ;
    6. Сохраните файл и обновите страницу сайта.

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

Падающие снежинки №2

  1. Скачайте архив «Падающие снежинки 2«;
  2. Распакуйте и поместите файл snow2.js в папку со скриптами вашего сайта, обычно это папка «js«;
  3. Подключите скрипт;
  4. Сохраните файл и обновите страницу сайта.

Все настройки находятся в файле snow2.js, в нем я все настройки расписал.

Я говорил о том, что у этого варианта есть дополнительные возможности. Возможно кому-то пригодится. Если у вас на сайте будет неделя скидок или что-то такого рода, то в файле snow2.js можно устроить падение не снежинок, а скидок.

В 11 строке, вместо «*» укажите, например «— 25 %«, в строке 2 уменьшите количество падающих элементов (200 это много скорее всего), в строке 5 можете указать 5 различных цветов надписей «— 25 %«. Посетителям сразу будет бросаться в глаза и выглядит не плохо =)

Важно

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

Всего доброго и до скорых встреч на страницах блога Freenteza.ru!

Источник: http://freenteza.ru/snow-fall/

Ссылка на основную публикацию