Скрипт на с для гри падіння снігу. Веб-дизайн та пошукова оптимізація. Завантажуємо архів та його розархівуємо

З наближенням Нового року на більшості сайтів з'являються дві речі: сніг, що падає, і сторінка розпродажів і знижок. І те, й інше робиться дуже просто. Сніг - за допомогою плагінів 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. Завдяки цьому, плагін барвистіший, а крім того, його з успіхом можна використовувати і для інших ефектів. Наприклад, замінивши малюнки сніжинок пелюстками троянд, можна прикрасити сторінку весільного сайту, а ромашки, що падають, прийдуть до місця на сайті про літній відпочинок.

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

І нарешті, додамо всередину тега (краще на початку сторінки) рядок
.

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

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

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

Добрий час доби і з наступаючим. Напередодні Нового року я хочу з вами поділити дуже легким, красивим і невибагливим плагіном снігу. Цей скрипт дійсно дуже легкий і спокійно міститься в 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; 5000; $("#flake"). : 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"; .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"; 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; weight: normal; margin-top: 300px; text-shadow: 5px 5px 5px #000; ; margin-left: -512px; 0; color: #333; ) .bar ( background-color: #111; color: #f0f0f0; box-shadow: 0px 0px 2px #333; line-height: 25px; padding: 0px 20px; bar:hover ( opacity: 1; ) .bar a ( color: #DDD; ) .bar a:hover ( color: #FFFFFF; ) a ( color: #FFFFFF; text-decoration: none; ) a:hover : #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; 5000; $("#flake"). : 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"; .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"; 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 код падаючого снігу:

З новим роком! ❄

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

До зими залишилося зовсім небагато часу, і велика кількість вебмайстрів починає створювати належну атмосферу на своїх сайтах. З цього приводу представляємо нашу вибірку ефектів снігу для вашого сайту.

Почнемо ми нашу добірку з дуже гарного ефекту снігу, який додається на сайт за допомогою плагіну під назвою 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; 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% : 500px 1000px, 400px 400px, 300px 300px; ) ) @-moz-keyframes snow (0% ( background-position: 0px 0px, 0px 0px, 0px 0px; )0 px 400px, 300px 300px; ) ) @-webkit-keyframes snow ( 0% ( background-position: 0px 0px, 0px 0px, 0px 0px; ) 100% ( background-position: 500px 1000px, 400px 400px) keyframes snow ( 0% ( background-position: 0px 0px, 0px 0px, 0px 0px; ) 100% ( background-position: 500px 1000px, 400px 400px, 300px 300px;) )

Після цього збережіть усі зміни.

Ось така хороша добірка снігових ефектів, яка, без сумніву, порадує відвідувачів вашого сайту.