Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Insérer touchmove au mousemove


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Insérer touchmove au mousemove
    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

  2. #2
    Invité
    Invité(e)
    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){

  3. #3
    Membre à l'essai
    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

  4. #4
    Invité
    Invité(e)
    Bonjour,

    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    <div class="title">ARTISTE<br />PEINTRE</div>


  5. #5
    Membre à l'essai
    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é...