How to select individual elements with javascript here?

Question

See here: https://siteweb.synergieetvitalite.com/monportfolio/

I would like the smartphone and laptop to come close togheter as the user moves his mouse. The code i am using :

HTML:

<div class="scene">
      <div data-speed="51" class="layer layer-middle"></div>
      <div data-speed="81" class="layer layer-top"></div>
</div>

JS:

<script> document.addEventListener('mousemove', parallax);

    function parallax(e) {
      e.preventDefault();
      this.querySelectorAll('.layer-middle').forEach((layer) => {
        let speed = layer.getAttribute('data-speed');
        layer.style.transform = `translateX(${e.clientX * speed / 1000}px)`;
      })
    } 

</script>

I tried to modify this so that .layer-top moves to the right, but then the layer-middle stopped moving alltogheter, probablement because of SelectorAll or forEach. I don't really know javascript so I wasn't able to simply make the function work for each element individually.

thanks for your help!

Are you getting any errors in the devtools console?

Bergi
– Bergi

2019-06-18 17:43:48 +00:00
Commented Jun 18, 2019 at 17:43 — Bergi
– Bergi, Commented Jun 18, 2019 at 17:43

Alireza HI · Accepted Answer · 2019-06-18 17:49:20Z

1

I think you can remove the foreach and select each element separately like below. So this way you will move the laptop to right and the phone to left or vice versa. I've changed your code a little. Try it and let me know if its what which you are looking for.

<script> document.addEventListener('mousemove', parallax);

    function parallax(e) {
      e.preventDefault();
      laptop = document.querySelector('.layer-middle');
      let speed = laptop.getAttribute('data-speed');
      laptop.style.transform = `translateX(${e.clientX * speed / 1000}px)`;
      phone = document.querySelector('.layer-top');
      phone.style.transform = `translateX(${-1*e.clientX * speed / 1000}px)`;
    } 

</script>

answered Jun 18, 2019 at 17:49

Alireza HI

1,9331 gold badge14 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to select individual elements with javascript here?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related