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

Discussion :

Insérer touchmove au mousemove


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Femme Profil pro
    peintre
    Inscrit en
    août 2017
    Messages
    82
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : peintre

    Informations forums :
    Inscription : août 2017
    Messages : 82
    Points : 17
    Points
    17
    Par défaut 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
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 367
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 367
    Points : 31 371
    Points
    31 371
    Par défaut
    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){
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Membre à l'essai
    Femme Profil pro
    peintre
    Inscrit en
    août 2017
    Messages
    82
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : peintre

    Informations forums :
    Inscription : août 2017
    Messages : 82
    Points : 17
    Points
    17
    Par défaut
    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
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 367
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 367
    Points : 31 371
    Points
    31 371
    Par défaut
    Bonjour,

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <div class="title">ARTISTE<br />PEINTRE</div>
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  5. #5
    Membre à l'essai
    Femme Profil pro
    peintre
    Inscrit en
    août 2017
    Messages
    82
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : peintre

    Informations forums :
    Inscription : août 2017
    Messages : 82
    Points : 17
    Points
    17
    Par défaut
    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é...

Discussions similaires

  1. [XSL] insérer une balise <a name>
    Par guibong dans le forum XMLRAD
    Réponses: 2
    Dernier message: 01/08/2003, 15h04
  2. [CR7] Insérer une image dynamiquement
    Par yoloosis dans le forum SAP Crystal Reports
    Réponses: 12
    Dernier message: 28/07/2003, 09h54
  3. [VB.NET] Insérer une colonne de CheckBox dans un DataGrid
    Par Manue.35 dans le forum Windows Forms
    Réponses: 2
    Dernier message: 22/05/2003, 11h44
  4. Comment insérer un loading ?
    Par ajit dans le forum Flash
    Réponses: 4
    Dernier message: 21/11/2002, 14h33
  5. insérer des caractères accentués INFORMIX/JDBC
    Par donde dans le forum Informix
    Réponses: 2
    Dernier message: 19/11/2002, 20h02

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo