1 résultat trouvé pour star

JS - Effet de parallaxe ne s'applique pas

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>