Создаем эффект снега с эффектом параллакса

Stats: 2762 0
Author: RUDEBOX
Category: Css, jQuery
Comments: Комментариев нет

Заказать рекламу: info@it-media.kiev.ua Звоните: +380934169249

Скоро близятся праздники, и Вам необходимо украсить свой ресурс подходящей тематикой. В сегодняшнем уроке мы рассмотрим как создать замечательный, отзывчивый эффект снега на сайте, который будет реагировать на курсор мыши и его движение на сайте, а также фон которого будет сделать с эффектом параллакса. Параллакс весьма популярный среди разработчиков, ведь помогает оживить визуально ресурс, и добавит запоминающиеся элементы для пользователя. Все будет выглядеть очень гармонично, и вы сможете легко установить на свой сайт данную конструкцию.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Фон будет создавать эффект живого холста, его мерцания будет создавать ощущения размытия элемента, благодаря чему все внимание будет обращено на снег.

Шаг 1. HTML

Разметка будет очень проста, нам необходимо вызвать команду, для отображения снега, для этого мы размещаем данные строчки в желаемой нами части документа:

&lt;div id="particles-js"&gt;
&lt;/div&gt;

1 2	<div id="particles-js"> </div>

Команда particles-js будет отвечать за подключения нашего эффекта к странице, более детально параметры его мы рассмотрим далее.

Как создать снег на сайте

Шаг 2. CSS

Теперь мы рассмотрим стили, которые мы используем по умолчанию к нашему документу, так как большую часть работы возложено на js, то данный шаг достаточно прост.

#particles-js {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(117, 114, 113, 0.8) 10%, rgba(40, 49, 77, 0.8) 30%, rgba(29, 35, 71, 0.8) 50%, rgba(19, 25, 28, 0.8) 70%, rgba(15, 14, 14, .8) 100%), url(#);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}

#particles-js {

position: absolute;

width: 100%;

height: 100%;

background: linear-gradient(to bottom, rgba(117, 114, 113, 0.8) 10%, rgba(40, 49, 77, 0.8) 30%, rgba(29, 35, 71, 0.8) 50%, rgba(19, 25, 28, 0.8) 70%, rgba(15, 14, 14, .8) 100%), url(#);

background-repeat: no-repeat;

background-size: cover;

background-position: 50% 50%;

}

Мы определили общие параметры позиционирования, благодаря которому эффект на странице будет отображаться правильно, зачем мы установим градиент фона, и его соотношения со страницей, фон страницы будет сложный, по этому ему понадобится несколько слоев.

Шаг 3. JS

Теперь самое интересное, нам необходимо реализовать непосредственно сам эффект, для этого нам необходимо написать несколько простых команд:

particlesJS("particles-js", {
"particles": {
"number": {
"value": 400,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "image",
"stroke": {
"width": 3,
"color": "#fff"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "#",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.7,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false,
"speed": 20,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 50,
"color": "#ffffff",
"opacity": 0.6,
"width": 1
},
"move": {
"enable": true,
"speed": 5,
"direction": "bottom",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": true,
"rotateX": 300,
"rotateY": 1200
}
}
}

particlesJS("particles-js", {

"particles": {

"number": {

"value": 400,

"density": {

"enable": true,

"value_area": 800

}

"color": {

"value": "#ffffff"

"shape": {

"type": "image",

"stroke": {

"width": 3,

"color": "#fff"

"polygon": {

"nb_sides": 5

"image": {

"src": "#",

"width": 100,

"height": 100

}

"opacity": {

"value": 0.7,

"random": false,

"anim": {

"enable": false,

"speed": 1,

"opacity_min": 0.1,

"sync": false

}

"size": {

"value": 5,

"random": true,

"anim": {

"enable": false,

"speed": 20,

"size_min": 0.1,

"sync": false

}

"line_linked": {

"enable": false,

"distance": 50,

"color": "#ffffff",

"opacity": 0.6,

"width": 1

"move": {

"enable": true,

"speed": 5,

"direction": "bottom",

"random": true,

"straight": false,

"out_mode": "out",

"bounce": false,

"attract": {

"enable": true,

"rotateX": 300,

"rotateY": 1200

}

Мы установили общие правила для начала, затем добавили цвет снега на сайте, по умолчанию, как вы догадываетесь он будет белым, при наведении курсором на снег, у нас будет происходить эффект увеличения, для этого мы добавили сопутствующий параметр и картинку больших снежинок. Последним шагом стало добавление движения снега на странице.