Auteur
Grafikart

27 Commentaires

8762094febf4cb55e25687b3072b2791?s=200&r=pg&d=mm
te8teur, 21-02-2014 20:14:23 - Répondre

Salut tous le monde,
Je suis bloqué sur un truc : comment faites vous pour manipuler plusieurs éléments en même temps ? Genre je veux drag 2 images différentes au même moment. Normalement Hammer devrait le faire assez simplement (bah oui c'est une lib MULTITOUCH) mais je ne trouve rien par rapport à cela.
Merci !

596e919239019ea4d00e9e93519c42c2?s=200&r=pg&d=mm
sebastien, 19-02-2014 22:43:55 - Répondre

bon bah j'ai suivi à la lettre le tuo mais ça bug de tous les côtés.
En réalité ça marche à peu près dans google chrome comme sur ta video, mais sur mon iphone4, ça ne marche pas.

En même temps j'utilise, a priori on ne peut pas animer les transitions avec jquery.
Moi j'utilie un script, vous utilisez lequel, vous ?

15ef78ef318736a9e8b8502083cb067c?s=200&r=pg&d=mm
Aloisioa, 05-02-2014 22:08:38 - Répondre

Super vidéo, comme d'hab :)
Je pensais à un truc qui serait pas mal à faire, avec cette librairie. Swipe et drag horizontal pour naviguer dans les pages. Comme dans certaine applications mobiles "android".?

15ef78ef318736a9e8b8502083cb067c?s=200&r=pg&d=mm
Aloisioa, 06-02-2014 20:23:36 - Répondre

J'ai commencer a développer le système. Je coince pour le drag :)
http://dev.woftec.com/sharifile/

Ccc5cb8895059bbc682f2940f2d9b995?s=200&r=pg&d=mm
Bbemol, 19-03-2014 19:04:08 - Répondre

Sympa ton système ! Tes pages sont directement dans le même HTML ou tu as utilisé un framework comme angular ?
Le drag fonctionne chez moi mais la cohabitation drag+swipe est pas géniale sur ipad...

9410be7d4f2f26626551fa77929cb15a?s=200&r=pg&d=mm
Nejyn, 24-01-2014 19:37:58 - Répondre

Salut !!! Super TUTO.

Toutefois j'aurais une petite question concernant la navigation sur une webapp. Est-ce qu'il y aurait une méthode pour éviter l'effet élastique lorsque l'on fait un Drag ou un Swipe sur iPhone & iPad ?? Car l'effet est un peu gênant lors de la navigation, donc j'aurais aimé que tu m'apporte tes lumières ;)

Merci d'avance !!!

8ee301d94beffd30377329c09687c80a?s=200&r=pg&d=mm
imars, 20-01-2014 10:28:49 - Répondre

Plutôt qu'utiliser zepto.js il serait plus intéressant d'utliser jQuery 2.0 qui justement n'est plus compatible avec les anciens navigateurs se qui effectivement allège et rendra le code plus rapide ou alors il y a un vrai intérêt à l'utiliser par rapport à jQuery 2.0

3a383904d7cb5af2e1f07b081b1966d3?s=200&r=pg&d=mm
Killian Aller, 15-01-2014 22:40:26 - Répondre

Très bon tuto, j'èspère que Grafikart va continuer à faire des tutos sur cette librairie, car je trouve qu'il la très bien expliqué.

Bf6e365b38376d56f7c0dc4dd9e8a846?s=200&r=pg&d=mm
Naoufalb99, 13-01-2014 20:35:09 - Répondre

bien fait :)

0d6c06892773a18c037cbe604a3453a7?s=200&r=pg&d=mm
Benjamin Horner, 13-01-2014 11:33:32 - Répondre

Salut,

tout d'abord je constate que tu fais dans la censure ;-) C'est pas bien (eh oui, tu as supprimé mon dernier commentaire qui faisait remarquer que l'algo du slide n'était pas parfait car si on slidait rapidement, ça buggait). Du coup, voici, pour ceux que cela intéresserait, voici le même code réécrit pour bien replier le menu à tous les coups et prendre en compte la vitesse du drag (le swipe est inutile car il est redondant avec le drag).

Vous m'excuserez mais je dev en coffeescript, donc je vous le livre d'abord en coffee puis en JS compilé. Ah oui ! Et j'en ai fais une classe… C'est plus pratique pour s'en resservir. Enjoy !

COFFEESCRIPT :

class _MainMenuActions

constructor:->
$page = $('#' + App.HomePageID)
$menuBtn = $('#menuBtn')
sidebar = false
sidebarOffset = window.innerWidth - 40

$page.hammer()
.on('drag', (event)->
event.gesture.preventDefault()
event.gesture.stopPropagation()
if((event.gesture.deltaX > sidebarOffset) or (!App.PageDrag)) then return false
if(event.gesture.direction is 'right' and !sidebar) then $page.animate({ translate3d: event.gesture.deltaX + 'px, 0, 0'}, 0)
if(event.gesture.direction is 'left' and sidebar) then $page.animate({ translate3d: (sidebarOffset + event.gesture.deltaX) + 'px, 0, 0'}, 0)
)
.on('dragend', (event)->
event.gesture.stopDetect()
event.gesture.preventDefault()
event.gesture.stopPropagation()
speed = 300 / event.gesture.velocityX
if(event.gesture.direction is 'right' and !sidebar)
if((event.gesture.deltaX > sidebarOffset/2) or (event.gesture.velocityX > 0.4))
$page.animate({ translate3d: sidebarOffset + 'px, 0, 0'}, speed, 'ease')
sidebar = true
else
$page.animate({ translate3d: '0, 0, 0'}, 300, 'ease')

else
if((event.gesture.deltaX < sidebarOffset/2) or (event.gesture.velocityX > 0.4))
$page.animate({ translate3d: '0, 0, 0'}, speed, 'ease')
sidebar = false
else
$page.animate({ translate3d: sidebarOffset + 'px, 0, 0'}, 300, 'ease')

)

## Click menu event
$menuBtn.on('click', (event)->
if(sidebar)
$page.animate({ translate3d: '0, 0, 0'}, 300, 'ease')
sidebar = false
else
$page.animate({ translate3d: sidebarOffset + 'px, 0, 0'}, 300, 'ease')
sidebar = true
)

Et en JAVASCRIPT

_MainMenuActions = (function() {
function _MainMenuActions() {
var $menuBtn, $page, sidebar, sidebarOffset;
$page = $('#' + App.HomePageID);
$menuBtn = $('#menuBtn');
sidebar = false;
sidebarOffset = window.innerWidth - 40;
$page.hammer().on('drag', function(event) {
event.gesture.preventDefault();
event.gesture.stopPropagation();
if ((event.gesture.deltaX > sidebarOffset) || (!App.PageDrag)) {
return false;
}
if (event.gesture.direction === 'right' && !sidebar) {
$page.animate({
translate3d: event.gesture.deltaX + 'px, 0, 0'
}, 0);
}
if (event.gesture.direction === 'left' && sidebar) {
return $page.animate({
translate3d: (sidebarOffset + event.gesture.deltaX) + 'px, 0, 0'
}, 0);
}
}).on('dragend', function(event) {
var speed;
event.gesture.stopDetect();
event.gesture.preventDefault();
event.gesture.stopPropagation();
speed = 300 / event.gesture.velocityX;
if (event.gesture.direction === 'right' && !sidebar) {
if ((event.gesture.deltaX > sidebarOffset / 2) || (event.gesture.velocityX > 0.4)) {
$page.animate({
translate3d: sidebarOffset + 'px, 0, 0'
}, speed, 'ease');
return sidebar = true;
} else {
return $page.animate({
translate3d: '0, 0, 0'
}, 300, 'ease');
}
} else {
if ((event.gesture.deltaX < sidebarOffset / 2) || (event.gesture.velocityX > 0.4)) {
$page.animate({
translate3d: '0, 0, 0'
}, speed, 'ease');
return sidebar = false;
} else {
return $page.animate({
translate3d: sidebarOffset + 'px, 0, 0'
}, 300, 'ease');
}
}
});
$menuBtn.on('click', function(event) {
if (sidebar) {
$page.animate({
translate3d: '0, 0, 0'
}, 300, 'ease');
return sidebar = false;
} else {
$page.animate({
translate3d: sidebarOffset + 'px, 0, 0'
}, 300, 'ease');
return sidebar = true;
}
});
}

1
Grafikart, 13-01-2014 15:58:28 - Répondre

Normalement je ne supprime pas de commentaire. Tu pourrais poster ta solution sur Git (via Gist par exemple) pour que ça soit plus simple à utiliser pour les autres ?

0d6c06892773a18c037cbe604a3453a7?s=200&r=pg&d=mm
Benjamin Horner, 14-01-2014 10:52:14 - Répondre

Yes ! Le voici : https://gist.github.com/benjaminhorner/8415222

Cf578f0f6cbb681866eaeb045fdde28c?s=200&r=pg&d=mm
xroad, 20-03-2014 19:48:45 - Répondre

Benjamin je serais intéressé par ton code. Je cherche désespérément un plugin jQuery de panneau (menu) latéral.
J'en avais trouvé un fluide et qui correspondait à 100% à mes attentes. Mais entre le fichier CSS et JS il fait usine à gaz.
http://jakiestfu.github.io/Snap.js/demo/apps/default.html

Si il existe le menu, je suis preneur !

B59217f177068b5d2342e87fa8253eaa?s=200&r=pg&d=mm
hello, 10-01-2014 20:17:36 - Répondre

Super tuto.
J'ai une petite question sur l’utilisation de Hammer.
Dans le cas d'un href, par exemple :
<li><a href="mailto:contact@mon-monde.com">blalba@blacom</a></li>
Comment fait-on pour lui appliquer un hammer tap ?

564d1589f36e3f51d3968a1e1b2de16e?s=200&r=pg&d=mm
D1ablo, 10-01-2014 11:23:27 - Répondre

Merci, très intéressant ;)

F2a934df3ecefe47f353d0baa8161d72?s=200&r=pg&d=mm
mlb, 07-01-2014 20:59:51 - Répondre

Pour info il est possible de désactiver le comportement de sélection de texte via CSS avec la propriété ```user-select:none;``` (à préfixer selon les navigateurs utilisés).

Plus de détails : http://stackoverflow.com/a/4407335/771165

F62ce6210bbc7e07a45867018032e32f?s=200&r=pg&d=mm
Charles Gaudon, 03-01-2014 11:32:21 - Répondre

Bonjour et bonne année!

J'ai déjà tenté d'utiliser hammer.js suite au tuto cordova pour faire du pinch & zoom sur une appli de gallerie de photo, sans succès... un petit tuto serait le bienvenu...

Pour ma part j'avais utilisé hammer avec angular...

300
Weby, 03-01-2014 01:44:12 - Répondre

Haaaa ! Enfin le retour des tutos utiles ! L'année commence bien, merci Graf ;-)
Vivement d'autres dans ce style.

94682dc7ebdbde74ecb39aabfa6c2eee?s=200&r=pg&d=mm
mildesign, 02-01-2014 22:55:57 - Répondre

c'est la première foi que tu te montre mon pote
ravis de vous connaître et bon courage

Fe99c7ee395892eb2e6edcd268d0f6db?s=200&r=pg&d=mm
Benedetto21, 02-01-2014 19:31:58 - Répondre

Génial ! Mais comment on pourrait faire la même chose mais pour cette fois un site web ? comme par exemple reproduire l'effet du bureau Windows 8 quand on met le curseur de la souris sur le bord de l’écran ?

http://www.noelshack.com/2014-01-1388683663-teste.png

Merci ! :)

A2bd184242d04709c7654ca4f43c3510?s=200&r=pg&d=mm
Pickachu, 02-01-2014 19:27:54 - Répondre

Tuto très intéressant, j'avais déjà utilisé Hammer dans un projet.
J'ai suivi ton tutoriel, ça ne fonctionne pas vraiment sur un vrai support tactile, dans mon cas sur un iphone sous ios7 la fenêtre du navigateur bouge en même temps, quand on tente d'ouvrir la sidebar (les événements se confondent).
En tout cas c'est une bonne base et découverte de HammerJS.

300
Weby, 03-01-2014 01:47:49 - Répondre

Ha, un gros problème alors…

1
Grafikart, 03-01-2014 06:59:38 - Répondre

Tu peux rajouter un
e.gesture.preventDefault();
si tu souhaite coursicuité le scroll natif. Je ne le met pas dans mon cas car je n'ai pas de scroll horizontal sur mes app :)

E31ac0bfc4fbc11dbd245e874a0970f1?s=200&r=pg&d=mm
Kiou, 11-01-2014 12:55:21 - Répondre

J'ai le même problème ici, la fenêtre du navigateur bouge en même temps sur X sous IOS7 du coup ça donne un effet de tremblement très désagréable :(
Le e.gesture.preventDefault(); n'a rien changé pour moi, c'est une fonctionnalité liée au navigateur pas à la navigation

C0543e36a95ec2c98c1a00fe883fedb8?s=200&r=pg&d=mm
Yordi, 20-01-2014 00:04:38 - Répondre

Bonjour,

D'abord grand merci pour le tuto !

Pour répondre à la question, j'ai eu le même soucis de scroll natif qui reprend le dessus pas défaut.
J'ai contourné le problème en assignant au drag/swipe/..., une taille (width et height) à mon body ou conteneur de la taille de ma fenêtre puis en réaffectant au final sa taille réelle.
C'est peut-être un peu lourd mais ça fonctionne parfaitement !

Pour ce qui est des tremblements, n'oubliez pas d'ajouter en css une transition sur l'élément qui a le "translate3d", ça permet de lisser le résultat.

ça m'a permit de créer une présentation en mosaïque pour laquelle j'ai ajouté le swipe vertical, effets CSS3, video en fond...

Yordi

22c2d2c3779981f1d961e6fec29e6046?s=200&r=pg&d=mm
MrGuillou, 02-01-2014 16:18:29 - Répondre

Très bon tuto. Merci !

26554
JamesHemery, 02-01-2014 15:56:32 - Répondre

Parfait, j'en ai bien besoin :) Je regarde sa ce soir :D