Давненько я не писал ничего нового, но вот появилось наконец-то время... Решил сегодня поделиться с Вами прошедшим праздничным настроением, которое, надеюсь, у всех было на Новый Год и другие прошедшие праздники, а также представить Новогодний или зимний плагин SnowFall, который демонстрирует, падающие снежинки на сайт.
Но сначала, хотелось бы ответить на комментарии по теме разработка системы управления сайтом - Часть 3, - когда выйдет следующая часть? Отвечу Вам там, что мы сейчас, как я и писал в Новогоднем поздравлении, переходим официально на видео, поэтому появиться четвертая часть уже в видеоформате, а также в сокращенном текстовом формате. Дата выхода планируется на февраль месяц этого года. А теперь, собственно, давайте поговорим о плагине SnowFall.
В источниках материала, я указал ссылочку на GitHub разработчика данного плагина, где он подробно все описывает и показывает демо версию своего скрипта, причем в различных примерах. Я же лично, хотел Вас ознакомить только с одним примером, который показался мне очень удобным и занял минимум времени на разработку и внедрение в свой проект.
Для начала, давайте подключим необходимые библиотеки 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. В нашем примере, все стили, исключительно нужны только для оформления, а в полноценной работоспособности скрипта, - не нуждаются! Все стили предназначены для правильно позиционирования графического изображения 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. Если какие-либо вопросы или трудности возникнут по скриптам или урокам, обязательно обращайтесь. Будем рады помочь!