Скачать скрипт снега. Веб-дизайн и поисковая оптимизация

Доброе время суток и с наступающим. В преддверии Нового года я хочу с вами поделить очень легким, красивым и неприхотливым плагином падающего снега. Этот скрипт действительно очень легкий и спокойно помещается в 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-код:

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

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-код:

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:

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

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

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

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

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

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

Вебдизайн с jQuery - это очень просто! "Падающий снег" на сайте

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

Нас, однако, интересует сейчас только размещение "падающего снега" на странице сайта. Для этого есть несколько простых вариантов. Рассмотрим два из них на основе jQuery .

Установку "падающего снега" начинаем с создания новой папки, естественно, с именем snow , затем скачиваем архив и распаковываем его в эту папку. У нас получится в ней два скрипта jquery-1.8.3.min.js и jquery.snow.js.

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

$(document).ready(function(){
$.fn.snow();
});

Для того, чтобы снег появился на странице сайта, достаточно добавить внутрь тега
.

Настроек у этого плагина всего четыре. Они находятся в самом начале файла jquery.snow.js и их можно изменять в любом редакторе или в Блокноте:
minSize: 10 , // минимальный размер снежинки
maxSize: 20 , // максимальный размер снежинки
newOn: 500 , // частота появления снежинок в мсек, то есть густота снега
flakeColor: "#bbbbbb" // цвет снежинок

Обратите также внимание на значение z-index:10 для снега, которое задано в первых строчках файла jquery.snow.js . Оно задает положение снежинок поверх слайдеров (слайд-шоу) и выпадающих меню, если они есть на вашей странице.

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

Рис.1 . "Падающий снег" на сайте

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

И наконец, добавим внутрь тега (лучше в начале страницы) строчку
.

Если у вас не появился снег, то проследите корректность ввода полного адреса изображений снежинок в следующей строке файла snow.js:
var img=""; .

Регулировка густоты снега задается в том же файле числовым аргументом в строке
setTimeout("snow("+id+");",100 ); // частота снежинок,
а скорость движения снежинок в строке
$("#snow_"+id).animate({top:"150%",left:""+end_x+"%"},20000 ,function() // скорость движения снежинок

Также, как и в первом варианте, обратите внимание на значение z-index:10 , чтобы снег перекрывал расположенные на странице слайдеры, выпадающие меню и т.п.

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

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

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

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