La date/heure actuelle est Mer 5 Oct 2022 - 11:21

1 résultat trouvé pour star

JS - Effet de parallaxe ne s'applique pas

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>
par lmc38510
le Jeu 17 Déc 2020 - 10:47
 
Rechercher dans: Archives des problèmes avec un code
Sujet: JS - Effet de parallaxe ne s'applique pas
Réponses: 3
Vues: 387

Revenir en haut

Sauter vers: