Всем привет! В этом материале я хотел бы показать вам интересную библиотеку, позволяющую отслеживать положение курсора мыши пользователя и предугадывать его дальнейшие действия .
Всем привет! В этом материале я хотел бы показать вам интересную библиотеку, позволяющую отслеживать положение курсора мыши пользователя и предугадывать его дальнейшие действия.
Библиотека достаточно простая. Ее плюсы в следующем:
- Нет зависимостей
- Легковесная(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){
// что-то делаем...
})
}
)
В общем, библиотека просто замечательная и позволяет достаточно хорошо ускорить работу вашего сайта при правильном ее применении. С установкой, думаю, проблем быть не должно: просто скачивайте нужные файлы и подключайте их, а потом проведите инициализацию.
А на этом сегодня все. Спасибо за внимание!
