Падающие снежинки на сайт плагин SnowFall
Уроки Падающие снежинки на сайт плагин SnowFall
20 января 2016
1712
плагин snowfall, jquery плагин, падающие снежинки, падающий снег

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

Сложность Рубрика JQuery Браузеры
Демонстрация » Скачать »

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

 

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

 

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

 

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

 

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

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

 

<link type="text/css" rel="stylesheet" href="css/demo.css"> 
<script src="js/snowfall.min.js"></script>

 

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

 

Падающие снежинки на сайт

 

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

 

<div id="content">
       <script type='text/javascript'>     
                snowFall.snow(document.body, {round : true, minSize: 5, maxSize:12});
        </script> 	
</div>	

 

 

Второй шаг. 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. Если какие-либо вопросы или трудности возникнут по скриптам или урокам, обязательно обращайтесь. Будем рады помочь!





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