Problème de JS effet de parallaxe

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème de JS effet de parallaxe

Message par Snow White Dim 12 Juin 2022 - 23:11

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Toujours
Lien du forum : https://anomaly.forumactif.com/

Description du problème

Bonjour,

J'ai un petit problème de JS sur ma bannière, il doit entrer en conflit avec un autre JS, le JS faisant bugguer les autres (notamment celui du fond des catégories) et ne s'appliquant pas nous l'avons désactivé et mis en brut, il fonctionne sur les pages HTML comme ici : https://anomaly.forumactif.com/h2-banniere cependant si je la met en iframe je n'ai pas la redirection sur le forum mais à l'intérieur de l'iframe, ce qui n'est pas le résultat voulu. J'ai donc mis le code de l'html dans mon overall_header cependant le JS ne s'applique toujours pas :/ la bannière est toujours fixe : https://anomaly.forumactif.com/ quelqu'un saurait me dire quoi faire ou au moins avec quel JS il entre en conflit ? Voici le code de la page html :

Code:
<style>#landing-content {
  overflow: hidden;
  background-image: url(https://i.imgur.com/vN2kQGt.png);
  width: 455px;
  background-size: 105%;
  background-repeat: no-repeat;
  height: 390px;
  z-index: 0;
  position: absolute;
  border: 10px solid #3b4468;
}
#slider {
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
  background-image: url(https://i.imgur.com/cOkW0nv.png);
  position: absolute;
 background-size: cover;
  height: 390px;
  width: 100%;
  z-index: 3;
  background-repeat: no-repeat;
}
#chara2 {
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
  background-image: url(https://i.imgur.com/n46CSLU.png);
  position: absolute;
  background-size: cover;
 height: 390px;
  width: 103%;
  z-index: 5;
  background-repeat: no-repeat;
}
#star1 {
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
  background-image: url(https://i.imgur.com/GLYONjA.png);
  position: absolute;
  background-size: 101%;
 height: 390px;
  width: 100%;
  z-index: 6;
  background-repeat: no-repeat;
}
</style><a href="https://anomaly.forumactif.com/"></a>
<div id="landing-content">
   <a href="https://anomaly.forumactif.com/"> </a>
   <div style="" id="chara2">
      
      <div id="star1">
         <section id="slider">
         </section>
      </div>
       
   </div><a href="https://anomaly.forumactif.com/"></a> <script>//Call in document load event
document.getElementById("landing-content")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 80;
  var y = -(e.pageY + this.offsetTop) / 80;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
})
document.getElementById("chara2")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 35;
  var y = -(e.pageY + this.offsetTop) / 35;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
})
document.getElementById("slider")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 10;
  var y = -(e.pageY + this.offsetTop) / 10;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
})
document.getElementById("star1")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 25;
  var y = -(e.pageY + this.offsetTop) / 25;

e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';})</script>
</div>

Merci d'avance Smile
Snow White

Snow White
***

Messages : 113
Inscrit(e) le : 25/09/2012

Voir le profil de l'utilisateur http://testotherlands.forumactif.com/
Snow White a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème de JS effet de parallaxe

Message par Toryudo Lun 13 Juin 2022 - 0:00

Bonjour !

C'est un problème de "compression" : en fonction d'où vous postez, certains codes sont "compressés", c'est à dire qu'automatiquement, forumactif optimise le code en enlevant les retours à la ligne, parfois les espaces inutiles, etc. Il y a plein d'optimisations possibles comme ça pour gagner de l'espace et permettre aux documents de se télécharger plus facilement.

Quand je regarde le code des deux pages, c'est ce qui change.
Celui qui fonctionne est écrit comme ceci :
Code:
<script>//Call in document load event
document.getElementById("landing-content")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 80;
  var y = -(e.pageY + this.offsetTop) / 80;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
})
document.getElementById("chara2")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 35;
  var y = -(e.pageY + this.offsetTop) / 35;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
})
document.getElementById("slider")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 10;
  var y = -(e.pageY + this.offsetTop) / 10;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
})
document.getElementById("star1")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 25;
  var y = -(e.pageY + this.offsetTop) / 25;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
})</script>

Alors que celui qui ne fonctionne pas est écrit comme ceci :
Code:
<script type="text/javascript">document.getElementById("landing-content").addEventListener('mousemove', function(e) {var x = -(e.pageX + this.offsetLeft) / 80;var y = -(e.pageY + this.offsetTop) / 80;e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';})document.getElementById("chara2").addEventListener('mousemove', function(e) {var x = -(e.pageX + this.offsetLeft) / 35;var y = -(e.pageY + this.offsetTop) / 35;e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';})document.getElementById("slider").addEventListener('mousemove', function(e) {var x = -(e.pageX + this.offsetLeft) / 10;var y = -(e.pageY + this.offsetTop) / 10;e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';})document.getElementById("star1").addEventListener('mousemove', function(e) {var x = -(e.pageX + this.offsetLeft) / 25;var y = -(e.pageY + this.offsetTop) / 25;e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';})</script>

Ce n'est pas forcément visible comme ça, mais l'explication est simple : une commande se termine toujours par ;
Ceci est une commande :
Code:
document.getElementById("slider").addEventListener('mousemove', function(e) { blabla });
Elle doit donc se terminer par ; également, sinon, elle peut gêner la suite ! Et c'est le cas sur le deuxième exemple : l'interpréteur se retrouve avec (...)+ y + 'px';})document.getElementById(...) et il ne comprend pas ce qu'on lui demande, parce qu'il ne voit pas de caractère de fin d'instruction et essaye d'enchainer !

Le bon code, à utiliser dans les deux cas, c'est donc le suivant :
Code:
<script>//Call in document load event
document.getElementById("landing-content")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 80;
  var y = -(e.pageY + this.offsetTop) / 80;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
});
document.getElementById("chara2")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 35;
  var y = -(e.pageY + this.offsetTop) / 35;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
});
document.getElementById("slider")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 10;
  var y = -(e.pageY + this.offsetTop) / 10;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
});
document.getElementById("star1")
.addEventListener('mousemove', function(e) {
  var x = -(e.pageX + this.offsetLeft) / 25;
  var y = -(e.pageY + this.offsetTop) / 25;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
});</script>

Donc à priori, si ça fonctionne dans le cas n°1, c'est parce que le navigateur accepterait le caractère "retour à la ligne" comme étant une fin d’instruction... mais ça me parait un peu hasardeux de faire comme ça, mieux vaut toujours mettre un ; pour terminer une instruction.
Toryudo

Toryudo
****

Masculin
Messages : 431
Inscrit(e) le : 31/03/2020

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de JS effet de parallaxe

Message par Snow White Lun 13 Juin 2022 - 0:33

Bonsoir,

Merci pour votre réponse si rapide ! J'ai tenté de mettre le code donné aussi bien dans le template que dans ma page de code JS, le fond des catégories ne bug plus cependant le code ne s'applique toujours pas, ma bannière est toujours fixe.

Merci d'avance ! Bonne soirée !
Snow White

Snow White
***

Messages : 113
Inscrit(e) le : 25/09/2012

Voir le profil de l'utilisateur http://testotherlands.forumactif.com/
Snow White a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème de JS effet de parallaxe

Message par Toryudo Lun 13 Juin 2022 - 8:07

Bonjour !
Alors oui, effectivement... Cette fois, le rendu du code est le suivant :
Code:
//Call in document load eventdocument.getElementById("landing-content").addEventListener('mousemove', function(e) {var x = -(e.pageX + this.offsetLeft) / 80;var y = -(e.pageY + this.offsetTop) / 80;e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';});document.getElementById("chara2").addEventListener('mousemove', function(e) {var x = -(e.pageX + this.offsetLeft) / 35;var y = -(e.pageY + this.offsetTop) / 35;e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';});document.getElementById("slider").addEventListener('mousemove', function(e) {var x = -(e.pageX + this.offsetLeft) / 10;var y = -(e.pageY + this.offsetTop) / 10;e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';});document.getElementById("star1").addEventListener('mousemove', function(e) {var x = -(e.pageX + this.offsetLeft) / 25;var y = -(e.pageY + this.offsetTop) / 25;e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';});

Commencer par le commentaire //Call in document load event, alors que tous les retours à la ligne sont supprimés, ça transforme tout votre code en code commenté non exécuté. Du coup, en retirant juste le commentaire, ça devrait être bon !
Toryudo

Toryudo
****

Masculin
Messages : 431
Inscrit(e) le : 31/03/2020

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de JS effet de parallaxe

Message par Snow White Lun 13 Juin 2022 - 16:06

En effet c'est nickel ! Merci beaucoup pour votre aide !
Snow White

Snow White
***

Messages : 113
Inscrit(e) le : 25/09/2012

Voir le profil de l'utilisateur http://testotherlands.forumactif.com/
Snow White a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum