Как вставить снег на сайт – устанавливаем скрипт падающего снега

Приветствую всех своих читателей! Сегодня я расскажу Вам, как вставить снег на сайт. Удивите своих пользователей – устройте настоящую снежную бурю прямо на страницах Вашего ресурса! Данный скрипт особо популярен в преддверии нового года. Устанавливать его, я бы советовал за 10-15 дней до нового года, а после новогодних праздников выключать – хорошего понемножку =).

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

Итак, приступим к установке падающего снега

1.Первое что нужно – скачайте два скрипта, которые собственно и будут делать нам снег (jquery.min и snowfall.min.jquery )

2.Создайте папку на хостинге и поместите туда эти скрипты

http://ваш-сайт.ru/папка-которую-создали/jquery.min.js

http://ваш-сайт.ru/папка-которую-создали/snowfall.min.jquery.js

3.Далее, откройте файл index.php Вашего шаблона и вставьте между тегами <head></head> следующий код:

<script type=”text/javascript” src=”http://ваш-сайт.ru/папка-которую-создали/jquery.min.js”></script>

<script src=’http://ваш-сайт.ru/папка-которую-создали/snowfall.min.jquery.js’></script>

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

Для этого, код, который Вы видите ниже, следует поместить между тегами <body></body> (в том же файле index.php вашего шаблона). Или можно сделать проще – создать модуль с html кодом и вставить туда этот код.

<div align=”center”>

<div class=”mince”>
<a class=”s1″ id=”round” href=”javascript://”>№1</a>
<a class=”s1″ id=”shadows” href=”javascript://”>№2</a>
<a class=”s1″ id=”roundshadows” href=”javascript://”>№3</a>
<a class=”s1″ id=”collection” href=”javascript://”>№4</a>
</div>

<div class=”mince”>
<a class=”s1″ id=”clear” href=”javascript://”>Очистить снег!</a>
</div>

</div>

<script type=’text/javascript’>
$(document).ready(function(){
//Start the snow default options you can also make it snow in certain elements, etc.
$(document).snowfall(‘clear’);
$(document).snowfall({shadow : true, round : true, minSize: 5, maxSize:16}); // Настройки режима снега по умолчанию

$(“#clear”).click(function(){
$(document).snowfall(‘clear’); // How you clear
});

$(“#round”).click(function(){
$(document).snowfall(‘clear’);
$(document).snowfall({shadow : true, round : true, minSize: 4, maxSize:8}); // Настройки 1 режима снега
});

$(“#shadows”).click(function(){
$(document).snowfall(‘clear’);
$(document).snowfall({shadow : true, round : true, minSize: 6, maxSize:15}); // Настройки 2 режима снега
});

$(“#roundshadows”).click(function(){
$(document).snowfall(‘clear’);
$(document).snowfall({shadow : true, round : true, minSize: 8, maxSize:20}); // Настройки 3 режима снега
});

$(“#collection”).click(function(){
$(document).snowfall(‘clear’);
$(document).snowfall({shadow : true, round : true, minSize: 10, maxSize:25}); // Настройки 4 режима снега
});
});
</script>

Если хотите, данные настройки можно переделать полностью под себя.

minSize – минимальный размер крупицы снега в пикселях.

maxSize – максимальный размер крупицы снега в пикселях.

shadow : true – тень включена.

shadow : false – тень выключена.

round : true – округление включено.

round : false – округление выключено.

5.Далее, для того чтобы «панель управления снегом» стала более красивой, в таблицу стилей вашего шаблона (template.css) нужно добавить следущее:

.mince {padding:5px;text-align:center;width:160px;margin-top:5px}

a.s1 {color:white;background:#0A93CB;border:1px solid #737e82;padding:7px;font-size:10pt;text-decoration:none}

a.s1:hover {color:white;background:#63C3EB;border:1px solid #737e82;padding:7px;font-size:10pt;text-decoration:none}

a {color:#232E39;text-decoration:underline}

a:hover {color:#232E39;text-decoration:none}

6.В завершении, к «панели управления снегом» можно подставить картинку или анимацию, которая будет наглядно иллюстрировать падение снега, и привлекать внимание.

Loading Likes...

МАТЕРИАЛЫ ПО ТЕМЕ

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *