Як передбачити подальші дії користувача на jаvascript.

Відео: 007. jаvascript: Як Легко і Безкоштовно Вивчити. Частина 1

Всім привіт! У цій статті я хотів би показати вам цікаву бібліотеку, що дозволяє відслідковувати положення курсору миші користувача і передбачати його подальші дії.

Бібліотека досить проста. Її плюси в наступному:

Відео: Основи jаvascript

немає залежностей
Легка (1кб в стислому вигляді)
автоматично розширює JQuery і Zepto властивості

Підтримуються всі сучасні браузери, а також IE9 +.

Щоб краще зрозуміти роботу бібліотеки, подивіться демонстрацію.

У першому прикладі у нас автоматично змінюються стилі в залежності від того, яку відстань між курсором і елементом:

Trial(".block") 
.within( 
{distance:500, cord:`Center`}, 
function(distance, ele,event) { 
 ele.style.opacity =(500- distance)/500- 
 ele.style.transform =`Scale (`+(500- distance)/500+`)`- 
} 
) 
.leave( 
{distance:500, cord:`Center`}, 
function(distance, ele,event){ 
 ele.style.opacity =0- 
} 
)

У другому прикладі ми заздалегідь довантажувати дані, коли курсор входить в поле червоного гуртка. Це дозволить значно підвищити швидкість, адже, коли користувач натисне кнопку, дані вже будуть завантажені і йому не доведеться чекати.

Trial(".btn") 
.enter( 
{distance:150, cord:`Center`}, 
function(distance, ele,event) { 
fetch(url).then(function(data) { 
 
 // щось робимо ... 
 
}) 
} 
)

Загалом, бібліотека просто чудова і дозволяє досить добре прискорити роботу вашого сайту при правильному її застосуванні. З установкою, думаю, проблем бути не повинно: просто завантажуйте потрібні файли і підключайте їх, а потім проведіть ініціалізацію.

А на цьому сьогодні все. Дякую за увагу!

Поділися в соціальних мережах:

Схожі