Discussion :

[novis5]

Bonjour,

J'apprécie cet effet présent sur codepen (https://codepen.io/dghez/pen/ItxKE)

Est il possible d'ajouter un script dans le js afin que l'effet qui est mis en action avec la souris soit actif avec le doigt sur une écran tactile?
Est ce que le script pourrait ressembler à cela:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function(){
  var mouseX, mouseY;
  var ww = $( window ).width();
  var wh = $( window ).height();
  var traX, traY;
  $(document).mousemove(function(e){
    mouseX = e.pageX;
    mouseY = e.pageY;
    traX = ((4 * mouseX) / 570) + 40;
    traY = ((4 * mouseY) / 570) + 50;
    console.log(traX);
    $(".title").css({"background-position": traX + "%" + traY + "%"});
    $(document).mousemove (function startup() {
  var el = document.getElementsByTagName("canvas")[0];
  el.addEventListener("touchstart", handleStart, false);
  el.addEventListener("touchend", handleEnd, false);
  el.addEventListener("touchcancel", handleCancel, false);
  el.addEventListener("touchleave", handleLeave, false);
  el.addEventListener("touchmove", handleMove, false);
}
  )});
});

Pourriez vous m'indiquer un site où je pourrai tester mes codes? Habituellement je teste avec jsfiddle mais lorsque j'insère du js il bug pas mal... donc si vous en connaissez un autre, merci d'avance
Merci pour votre aide
Novis

[Invité]

Bonjour,

essaie en remplaçant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  $(document).mousemove(function(e){

par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  $(document).on('mousemove touchmove', function(e){

[novis5]

Merci pour votre réponse.
J'ai testé cet effet sur code pen et en sauvegardant et en regardant via mon portable, l'effet ne bouge pas.
Voici le test: https://codepen.io/noviscanvas/pen/JjPWbpy
Par ailleurs, je souhaite que le titre "artiste peintre" soit sur 2 lignes et je n'arrive pas à avoir quelque chose de stable. Parfois en modifiant du css cela fonctionne mais le résultat n'est pas net.
merci de votre aide
novis

[Invité]

Bonjour,

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="title">ARTISTE<br />PEINTRE</div>

[novis5]

OUi merci, j'avais fini par trouvé cette solution. Par contre l'effet d'image en mouvement ne fonctionne pas sur le tactile. Et là en js , ça me paraît compliqué...