JS - Effet de parallaxe ne s'applique pas

[Snow White]

Détails techniques

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

Description du problème

Bonjour !

Je viens quémander votre aide car j'ai un petit souci avec l'un de mes codes. Je voulais appliquer un effet de parallaxe sur la bannière comme je l'ai fait sur CodePen ici : https://codepen.io/valhenryn/pen/LYRyEOP cependant lorsque je c/c mes codes sur mon forum l'effet de parallaxe ne s'applique pas, j'ai bien activé le JS sur le forum et coché appliquer sur toutes les pages. Quelqu'un aurait une idée pour régler ce souci, si c'est faisable ? J'ai tenté d'utiliser d'autres tutoriels/codes que celui-ci cependant ils ne fonctionnent pas ^^"

Edit : Visiblement ça ne marche pas non plus avec mon changeur de thèmes, du coup je crois que c'est vraiment les codes JS qui ne s'appliquent pas :/

Merci d'avance et bonne journée!

[lmc38510]

Hello "Snow White"

A propos de ton code ( https://codepen.io/valhenryn/pen/LYRyEOP )

L'appel du Script ci-dessous est inutile ... tu peux le supprimer

Code:

<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>

Ton Script local :

Code:

     <script id="rendered-js">
//Call in document load event
document.getElementById("landing-content").
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';
});
document.getElementById("chara2").
addEventListener('mousemove', function (e) {
  var x = -(e.pageX + this.offsetLeft) / 15;
  var y = -(e.pageY + this.offsetTop) / 15;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
});
document.getElementById("slider").
addEventListener('mousemove', function (e) {
  var x = -(e.pageX + this.offsetLeft) / 15;
  var y = -(e.pageY + this.offsetTop) / 15;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
});
document.getElementById("star").
addEventListener('mousemove', function (e) {
  var x = -(e.pageX + this.offsetLeft) / 45;
  var y = -(e.pageY + this.offsetTop) / 45;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
});
//# sourceURL=pen.js
    </script>

Tu Peux également le modifier en:

Code:

     <script>
document.getElementById("landing-content").
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';
});
/*document.getElementById("chara2").
addEventListener('mousemove', function (e) {
  var x = -(e.pageX + this.offsetLeft) / 15;
  var y = -(e.pageY + this.offsetTop) / 15;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
});*/
document.getElementById("slider").
addEventListener('mousemove', function (e) {
  var x = -(e.pageX + this.offsetLeft) / 15;
  var y = -(e.pageY + this.offsetTop) / 15;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
});
/*document.getElementById("star").
addEventListener('mousemove', function (e) {
  var x = -(e.pageX + this.offsetLeft) / 45;
  var y = -(e.pageY + this.offsetTop) / 45;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
});*/
</script>

En Supprimant les parties entre /* ...*/   qui ne sont pas utilisée pour #char2 et #star

--------------

Pour passer cette nouvelle bannière tu as donc modifier ton template:

Code:

<a href="/"><div id="landing-content"><div id="star"></div><section id="slider"></section><section id="chara2"></section></div></a>

Tu oublies au passage des infos reprisent dans le script:
1) pour "landing-content"

Code:

style="background-position: -17.12px -11.52px;">

2) pour "slider"

Code:

style="background-position: -28px -18.6667px;"

Plutôt  que passer le HTML dans le Template --- et le script dans tes Code JavaScript

J'essayerai de tout passer dans le Template de la façon suivante:

Code:

<a href="/">
<div id="landing-content" style="background-position: -17.12px -11.52px;">
     <div id="star"></div>
 <section id="slider" style="background-position: -28px -18.6667px;"></section>
 <section id="chara2"></section>
<script>
document.getElementById("landing-content").
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';
});
document.getElementById("slider").
addEventListener('mousemove', function (e) {
  var x = -(e.pageX + this.offsetLeft) / 15;
  var y = -(e.pageY + this.offsetTop) / 15;
  e.currentTarget.style.backgroundPosition = x + 'px ' + y + 'px';
});
</script>
</div>
</a>

===========================

Dans un Premier Temps ... Essaie De modifier ton Code html:

Code:

<a href="/"><div id="landing-content"><div id="star"></div><section id="slider"></section><section id="chara2"></section></div></a>

Comme Ceci:

Code:

<a href="/"><div id="landing-content" style="background-position: -17.12px -11.52px;"><div id="star"></div><section id="slider" style="background-position: -28px -18.6667px;"></section><section id="chara2"></section></div></a>

[Snow White]

Coucou lmc38510 !

Merci beaucoup pour ta réponse ! J'ai tenté les deux méthodes suggérées, la première ne fonctionne pas mais la seconde marche nickel, donc en mettant directement le JS dans les Templates merci beaucoup pour ton aide !

Bonne journée!

[lmc38510]

impeccable Fonctionne NICKEL => https://unforumtestcpasassez.forumactif.com/

Au plaisir "Snow White"