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



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