В этой статье мы рассмотрим библиотеку, которая поможет нам отслеживать силу нажатия на экран или тачпад устройства пользователя.
Как многие, наверное, знают, относительно недавно вышел ноутбук от Apple, имеющий тачпад, поддерживающий ForceTouch – технологию, которая позволяет отслеживать силу нажатия.
Также вышел новый iPhone, где использована технология 3D Touch, которая делает то же самое, но уже на сенсорном дисплее устройства. Технология достаточно интересная, и в этой статье мы рассмотрим Pressure – javascript библиотеку, которая позволит использовать возможности этой технологии на сайтах.
Установка и настройка
Скачайте нужные файлы у нас или на GitHub, либо используйте npm или bower:
Используйте pressure в глобальной области видимости:
Или с browserify или CommonJS как установку.
Использование
Заметьте, что ключевое слово this в каждом методе обратного вызова будет самостоятельным элементом, к которому применена сила.
Итак, на этом все. Спасибо за внимание!
Как многие, наверное, знают, относительно недавно вышел ноутбук от Apple, имеющий тачпад, поддерживающий ForceTouch – технологию, которая позволяет отслеживать силу нажатия.
Также вышел новый iPhone, где использована технология 3D Touch, которая делает то же самое, но уже на сенсорном дисплее устройства. Технология достаточно интересная, и в этой статье мы рассмотрим Pressure – javascript библиотеку, которая позволит использовать возможности этой технологии на сайтах.
Установка и настройка
Скачайте нужные файлы у нас или на GitHub, либо используйте npm или bower:
Код
npm install pressure --save // npm
bower install pressure --save // bower
bower install pressure --save // bower
Используйте pressure в глобальной области видимости:
Код
Pressure.set('#id-name', {
change: function(force){
this.innerHTML = force;
}
});
change: function(force){
this.innerHTML = force;
}
});
Или с browserify или CommonJS как установку.
Код
var Pressure = require('pressure');
Pressure.set('#id-name', {
change: function(force){
this.innerHTML = force;
}
});
Pressure.set('#id-name', {
change: function(force){
this.innerHTML = force;
}
});
Использование
Заметьте, что ключевое слово this в каждом методе обратного вызова будет самостоятельным элементом, к которому применена сила.
Код
Pressure.set('#element', {
start: function(){
// this вызван в начале
},
end: function(){
// this вызван в конце
},
startDeepPress: function(){
// this вызван на "сильное нажатие" / "глубокое нажатие", когда сила больше 0.5
},
endDeepPress: function(){
// this вызван в конце "сильного нажатия" / "глубокого нажатия"
},
change: function(force, event){
// this вызывается каждый раз, когда происходит изменение силы нажатия
// значение силы будет всегда в диапазоне от 0 до 1 на мобильных и настольных устройствах
},
unsupported: function(){
// this вызывается однажды, когда произведено нажатие на экран, но устройство или браузер не поддерживает технологию ForceTouch / 3D Touch
}
});
start: function(){
// this вызван в начале
},
end: function(){
// this вызван в конце
},
startDeepPress: function(){
// this вызван на "сильное нажатие" / "глубокое нажатие", когда сила больше 0.5
},
endDeepPress: function(){
// this вызван в конце "сильного нажатия" / "глубокого нажатия"
},
change: function(force, event){
// this вызывается каждый раз, когда происходит изменение силы нажатия
// значение силы будет всегда в диапазоне от 0 до 1 на мобильных и настольных устройствах
},
unsupported: function(){
// this вызывается однажды, когда произведено нажатие на экран, но устройство или браузер не поддерживает технологию ForceTouch / 3D Touch
}
});
Итак, на этом все. Спасибо за внимание!
Автор: Михаил Русаков