Auteur
Grafikart

32 Commentaires

5612e62e70a29dac8ae54c7cad49f020?s=200&r=pg&d=mm
Kenway, 18-04-2015 13:52:59 - Répondre

De même pour moi TheFaucheur76, en suivant le tuto à la lettre (et surtout que maintenant, on ne retrouve plus le plugin de jQuery pour Hammer.js sur le site officiel), ça ne fonctionne pas... Possible au moins de nous guider? Pour ma part, j'ai le message "swipe" qui s'affiche dans la console (quand je fais console.log();) mais quand je fais le swipe et que je tente de faire déplacer le .site-pusher avec un translateX qui correspond à la largeur de mon menu situé à droite de la page web (ce que explique le signe moins) ça ne déplace rien (pour info, j'ai suivi le tuto sur le menu responsive, avec l’icône hamburger).
En tout cas, merci pour ces explications ! dommage que ça ne fonctionne pas....

50654
TheFaucheur76, 25-03-2015 16:30:56 - Répondre

pourrais-tu refaire le tuto avec la nouvelle version de hammer et sans compass et autre ?
car malgré toute ma bonne volonté je n'arrive pas a l'utiliser :/

98c3ca9475e4c62cb0d2aac8fe004c13?s=200&r=pg&d=mm
Scion Miyazaki, 25-02-2015 02:04:22 - Répondre

Bonjour,

Grace a l'inspecteur Google Chrome, il est possible de simuler une tablette tactile ou un mobile.
C'est super cool. A ce moment la, la souris simule un doigt et du coup il est possible d'executer des événements tel que le press, le swipe, le pan, etc..

J'aimerai inclure cette fonctionnalité de "simulation du doigt" sur mon site et remplacer le traditionel cursor de souris.
Est ce possible ?

J'aimerai que les internautes puissent faire des Swipes et des Pan directement sur mon site (ce serait cool).

0352bae898c2fc69dc511d1836c996a9?s=200&r=pg&d=mm
Aurélien Simon, 23-01-2015 14:55:07 - Répondre

Bonjour à tous. Super tuto, comme d'habitude ! Quelqu'un pourrait m'aider pour l'utilisation de la fonction rotate s'il vous plait, je ne vois pac comment l'utiliser et le site a complètement changé ? Merci d'avance.

B5169ed4cd77834ffece585a656a7cd7?s=200&r=pg&d=mm
fandeJQuery75, 15-01-2015 11:08:29 - Répondre

Génial la démo ! Et ça donne envie de développer.
De mon côté je ne suis pas très aguerri avec javascript, alors je tâtonne un peu. J'essaye en vain (pour l'instant) de reproduire le principe du menu latéral de Google sur smartphone. Je visualise cela avec un Samsung S3 mini.
J'ai bien le menu latéral que j'ouvre et ferme sans problème. J'ai le swipe en javascript qui fonctionne bien, mais je n'arrive pas à cliquer sur les lien du menu. Par contre, si je désactive les écouteurs d'évènements du swipe, alors le clic sur les liens fonctionnent.
Comment concilier tout cela, à la manière de Google ?
Un tuto sur ce sujet particulier serait vraiment le bienvenu, et profiterait c'est certain à d'autres personnes :) .
Merci en tout cas pour ce tuto !

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
Benito@21, 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