Создаем эффект движущихся линий на сайте

Сейчас очень популярен эффект линий, которые «прилипают» к мыши и двигаются вслед за ней. Он реализовывается с помощью плагинаparticle-js. Давайте добавим к сайту, созданному в редакторе PIXLI этот эффект.


Внедрение эффекта particle


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

1. Размещение блока


В область 1 перетащим два блока «HTML код». Они должны размещаться до блока с текстом.

2. Создание кода


В первый вставим код файла particles.js, скачанный по указанной ссылке. Во втором нам надо будет указать стиль блока с канвой, его код и код запуска эффекта.
<style>
#particles-js{
  position:absolute;
  width:100%;
  top:0;
  left:0;}
</style>
<div id="particles-js"></div>
<script>
particlesJS("particles-js",
{"particles":{"number":
		{"value":100,"density":{"enable":true,"value_area":800}	
			},
			  "color":{"value":"#ffffff"},
			  "shape":{"type":"circle",
				   "stroke":{"width":0,"color":"#000000"},
				   "polygon":{"nb_sides":5}
				    },
				   "opacity":{
					   "value":0.5,
					   "random":false,
					   "anim":
					   {"enable":false,
					   "speed":1,
					   "opacity_min":0.1,
					   "sync":false}
					   },
					   "size":{
					   "value":3,
					   "random":true,
					   "anim":{
					   "enable":false,
					   "speed":40,
					   "size_min":0.1,
					   "sync":false}
						   },
						"line_linked":{
						"enable":true,
						"distance":150,
						"color":"#ffffff",
						"opacity":0.4,
						"width":1
						},
						"move":{
						"enable":true,
						"speed":6,
						"direction":"none",
						"random":false,
						"straight":false,
						"out_mode":"out",
						"bounce":false,
						"attract":{
							"enable":false,
							"rotateX":600,
							"rotateY":1200
							}
						}
					},
				"interactivity":{
					"detect_on":"canvas",
					"events":{
						"onhover":{
						"enable":true,
						"mode":"grab"
						},
						"onclick":{
						"enable":true,
						"mode":"push"
						},
						"resize":true
						},
					"modes":{
						"grab":{
						"distance":140,
						"line_linked":{
						"opacity":1
						}
					},
					"bubble":{
						"distance":400,
						"size":40,
						"duration":2,
						"opacity":8,
						"speed":3
					},
					"repulse":{
						"distance":200,
						"duration":0.4
						},
					"push":{
						"particles_nb":4
						},
					"remove":{
						"particles_nb":2
						}
					}
				},
	"retina_detect":true
}); 
</script>
Вы можете использовать не все параметры, а лишь нужные. их возможные значения приведены в конце статьи.

3. Отладка


После запуска появятся линии.

Они расположены за блоками текста, поэтому на мышь реагируют только те, что выходят за их пределы. Чтобы линии находились над всеми слоями, установим в стиле блока particle-js свойство z-index.

Параметры плагина


Плагин имеет много возможностей.
particles.number.value
Количество элементов
particles.number.density.enable
Плотность. Определяет число частиц в области. При значении false число равно количеству, установленному в number.
particles.number.density.value_area
Удвоение значения value_area позволит уменьшить количество частиц примерно вдвое. Значение по умолчанию 800.
particles.color.value
Цвет частиц
Варианты использования:
"#b61924" 
{r:182, g:25, b:36} 
{h:356, s:76, l:41} 
["#b61924", "#333333", "999999"] 
"random"
particles.shape.type
Форма частицы. Можно указать один, можно массив. Тогда частицы будут разными.
Варианты использования:
"circle" 
"edge" 
"triangle" 
"polygon" 
"star" 
"image" 
["circle", "triangle", "image"]
particles.shape.stroke
Добавляет контур заданного цвета и ширины вокруг всех частиц. Фактически, это линия обводки
Варианты использования:
{
"width":10,"color":"#000000"}
particles.shape.image	Позволяет задачи рисунок, который будет частицей	{
 "src": "img/football.png", 
     "width": 1,   
     "height": 1  
 }
particles.opacity
Параметры прозрачности. Anim отвечает за анимацию прозрачности. Sync позволяет анимировать прозрачность одновременной для всех частиц. Можно установить минимальное значение для анимации. Все это создаст эффект мигания.
Варианты использования:
{
  "value": 1,
  "random": true,
  "anim": {
    "enable": true,
    "speed": 8,
    "opacity_min": 0.4,
    "sync": false
  }
particles.size
Размер частиц. Имеет те же параметры, что и opacity. Можно настроить анимацию размера.
Варианты использования:
{
  "value": 25, 
  "random": true,
  "anim": {
    "enable": true,
    "speed": 20,
    "size_min": 10,
    "sync": false
  }
particles.line_linked
Позволяет прорисовать линии для близких частиц. Настраивается цвет, расстояние, для которого появится линия, ее толщина и прозрачность.
Варианты использования:
{
  "enable": true,
  "distance": 200,
  "color": "#fff",
  "opacity": 1,
  "width": 4
}
particles.move
Настройка движения – направление, повороты и пр.
Варианты использования:
{			
	"enable":true,
	"speed":6,
	"direction":"none",
	"random":false,
	"straight":false,
	"out_mode":"out",
	"bounce":false,
	"attract":{
	"enable":false,
	"rotateX":600,
	"rotateY":1200
}
particles.interactivity
Настройка реакции на движение мыши.
Возможны режимы:
«grab» – притягивание к мыши
«bubble» – раздувание частиц при наведении мыши
«repulse» – отталкивание от мыши
Варианты использования:
{
"detect_on":"canvas",
"events":{
	"onhover":{
	"enable":true,
	"mode":"repulse"
         }
}
05 may 2017, 12:46    Ivan Web-дизайн 0    3 0

Comments (0)

    You need to login to create comments.