JS - Effet de parallaxe ne s'applique pas

2 participants

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

Résolu JS - Effet de parallaxe ne s'applique pas

Message par Snow White Mer 16 Déc 2020 - 10:15

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!
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.

Résolu Re: JS - Effet de parallaxe ne s'applique pas

Message par lmc38510 Jeu 17 Déc 2020 - 10:47

Hello "Snow White" Wink

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>
lmc38510

lmc38510
*****

Masculin
Messages : 911
Inscrit(e) le : 22/02/2012

Voir le profil de l'utilisateur http://lacaverneauxgrimoire.forumactif.org/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: JS - Effet de parallaxe ne s'applique pas

Message par Snow White Jeu 17 Déc 2020 - 13:07

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!
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.

Résolu Re: JS - Effet de parallaxe ne s'applique pas

Message par lmc38510 Jeu 17 Déc 2020 - 14:10


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

Au plaisir "Snow White"
lmc38510

lmc38510
*****

Masculin
Messages : 911
Inscrit(e) le : 22/02/2012

Voir le profil de l'utilisateur http://lacaverneauxgrimoire.forumactif.org/
lmc38510 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