Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Hammer.js
Search
ningzbruc
August 06, 2015
Programming
1
330
Hammer.js
Hammer.js
ningzbruc
August 06, 2015
Tweet
Share
More Decks by ningzbruc
See All by ningzbruc
如何写出一个优秀的开源库
ningzbruc
0
49
去啊无线前端的一天
ningzbruc
1
160
React & Component
ningzbruc
0
34
阿里旅行去啊H5首页总结&Promise
ningzbruc
0
250
KISSY.Base - all about that Base
ningzbruc
0
110
淘宝旅行门票iPad版开发
ningzbruc
0
120
Travel on KISSY mini
ningzbruc
0
180
Events
ningzbruc
2
120
Why YUI3
ningzbruc
0
180
Other Decks in Programming
See All in Programming
オープンソースソフトウェアへの解像度🔬
utam0k
13
2.6k
CSC509 Lecture 03
javiergs
PRO
0
330
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
180
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.6k
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
370
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.6k
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
720
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2k
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
私はどうやって技術力を上げたのか
yusukebe
43
18k
Cursorハンズオン実践!
eltociear
2
1k
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
140
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1032
470k
RailsConf 2023
tenderlove
30
1.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
KATA
mclloyd
32
15k
Gamification - CAS2011
davidbonilla
81
5.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
The Invisible Side of Design
smashingmag
302
51k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
GraphQLとの向き合い方2022年版
quramy
49
14k
Embracing the Ebb and Flow
colly
88
4.8k
Being A Developer After 40
akosma
91
590k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Transcript
HAMMER.JS add touch gestures to your page.
Multi-Touch redefined User Interface
Gestures http://www.lukew.com/ff/entry.asp?1071
where we are
where we are and we need more gestures
Gestures But…what egg use?
Demo Time Back off! I’m going to ZhuangBi!!!
What can we do with gestures?
What can we do with gestures? ✓ Carousel ✓
Slider ✓ ImagePreview ✓ Drag&Drop&Sort ✓ ListView ✓ SideNavigation ✓ Games ✓ And More…
• touchstart/gesturestart • touchmove/gesturechange • touchend/gestureend •
touchcancel Touch & Gesture Event • e.touches • e.targetTouches • e.changedTouches • e.rotation/scale • e.pageX(Y)/clientX(Y)
• touchstart/gesturestart • touchmove/gesturechange • touchend/gestureend •
touchcancel Touch & Gesture Event • e.touches • e.targetTouches • e.changedTouches • e.rotation/scale • e.pageX(Y)/clientX(Y)
None
Why HammerJs?
Why HammerJs?
Why HammerJs? ✓ Small (3.96kb) ✓ Multiple (Tap, Pan,
Rotate…) ✓ Compatible (touch, mouse, pointerEvents) ✓ Extensible (easy to define new gesture) ✓ Easy to Learn (just like iOS gestures)
Browser Support ✓ Compatible
How to use var hm = new Hammer(element, options); hm.on('tap',
function(e) { console.log(e); }); hm.on('swipe', function(e) { console.log(e.velocity); console.log(e.direction); }); hm.on('pan', function(e) { var x = e.deltaX + 'px', y = e.deltaY + 'px'; element.style.tranform = 'translate3d(' + x + ',' + y + ',0)'; }); ✓ Multiple
More Control var hm = new Hammer.Manager(element); hm.add( new Hammer.Rotate({
pointers: 2 }) ); hm.add( new Hammer.Tap({ event: 'tripleTap', taps: 3 }) ); hm.on('rotate', function(e) { console.log(e.rotation); }); hm.on('tripleTap', function(e) { console.log(e.tapCount); }); ✓ Extensible
HammerJs vs S.EventTarget var hm = new Hammer.Manager(); hm.add( new
Hammer.Tap({}) ); hm.on('tap', callback); hm.off('tap', callback); hm.emit('tap', data); var et = S.EventTarget; et.publish('select', {}); et.on('select', callback); et.detach('select', callback); et.fire('tap', data);
Recognizer ✓ Extensible
Recognizer HammerJs iOS Gesture ✓ Easy to Learn
GestureRecognizer
Recognizer Types
Recognizer States
recognizeWith var hm = new Hammer.Manager(element); hm.add( new Hammer.Rotate() );
hm.add( new Hammer.Pinch() ); hm.get('pinch').recognizeWith(hm.get('rotate'));
requireFailure var hm = new Hammer.Manager(element); var singleTap = new
Hammer.Tap({ event: 'singletap' }); var doubleTap = new Hammer.Tap({event: 'doubletap', taps: 2 }); hm.add([singleTap, doubleTap]); doubleTap.recognizeWith(singleTap); singleTap.requireFailure(doubleTap);
touch-action https://cdn.rawgit.com/hammerjs/hammer.js/master/tests/manual/touchaction.html
Hammer Inside Manager Input Recognizers TouchAction touch, mouse, pen auto,
pan-x, pan-y manipulation pan, pinch, press rotate, swipe, tap compute update add update init addEvent preventDefault emit
None
what’s next
✓ mpi/carousel ✓ mpi/slider ✓ mpi/image-‐preview ✓
mpi/drag-‐drop ✓ mpi/list-‐view ✓ mpi/side-‐nav ✓ act/xx-‐game ✓ and more… what’s next
Join us!!!
Join us!!!
Join us!!!
• http://hammerjs.github.io/ • http://www.lukew.com/ff/entry.asp?1071 • https://developer.apple.com/library/ios/documentation/EventHandling/Conceptual/ EventHandlingiPhoneOS/GestureRecognizer_basics/ GestureRecognizer_basics.html • http://www.google.com/design/spec/patterns/gestures.html#gestures-touch-
mechanics • http://www.windowsphone.com/en-us/how-to/wp7/start/gestures-flick-pan-and- stretch references
None
THE END.