title: make parallax mouse effect responsive using svg images HTML - SCSS
body: <p>I am creating a landing page, I used svg images for the home of the site.
  On the left I have a title and a button, which are in the <em><strong>data</strong> div</em>, while on the left there are 3 svg images, which are in the <em><strong>banner-images</strong> div</em> and have a mouse parallax effect.
  Now, everything is well placed if full screen, but when I resize the page everything gets messed up.
  I have problems managing the 3 images and I don't know if what I wrote is correct.</p>
  <p>I have no preferences for the responsive layout.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener('mousemove', move);
  
  function move(e) {
    this.querySelectorAll('.moving-img').forEach(layer =&gt; {
      const speed = layer.getAttribute('data-speed');
  
      const x = (window.innerWidth - e.pageX * speed) / 150;
      const y = (window.innerHeight - e.pageY * speed) / 150;
  
      layer.style.transform = "translateX(" + x + "px) translateY(" + y + "px)";
    })
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* ------------------ Imports ------------------ */
  @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&amp;display=swap");
  
  /* ------------------ Colors ------------------ */
  $blackBackgroundColor: #121212;
  $blackDivsColor: #0c0c0c;
  $whiteText: #fff;
  $whiteBackgroundColor: #fff;
  $whiteDivsColor: #e9e9e9;
  $blackText: #121212;
  $purple: #7b49db;
  
  /* ------------------ Fonts ------------------ */
  $bodyFont: "Rubik",
  sans-serif;
  
  /* ------------------ GLOBAL ------------------ */
  * {
    box-sizing: border-box;
    scroll-behavior: smooth;
  }
  
  body {
    margin: 0;
    padding: 0;
    font-family: $bodyFont;
  }
  
  section {
    height: 100vh;
  }
  
  h1,
  p {
    margin: 0;
  }
  
  a {
    text-decoration: none;
  }
  
  .container {
    width: 100%;
    max-width: 1300px;
    margin: 100% auto;
  }
  
  
  /* ------------------ HOME ------------------ */
  #home {
    width: 100%;
    display: flex;
    background: $whiteBackgroundColor;
    
    .home-container {
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      
      .data {
        color: $blackText;
        
        .home-title {
          font-size: 15vh;
          margin-bottom: 20px;
        }
        
        .home-button {
          display: inline-block;
          background-color: $purple;
          color: $whiteText;
          padding: 20px 50px;
          border-radius: 10px;
        }
      }
      
      .banner-images {
        position: relative;
        width: 600px;
        height: 750px;
        margin-left: 20px;
        
        img {
          position: absolute;
          top: 0;
          left: 0;
        }
        
        #up-hand, #down-hand {
          z-index: 1;
        }
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link rel="stylesheet" href="/style/main.css"&gt;
    &lt;title&gt;Tap-it&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;!-- Home section --&gt;
    &lt;section id="home"&gt;
      &lt;div class="home-container container"&gt;
        &lt;div class="data"&gt;
          &lt;h1 class="home-title"&gt;TAP-IT&lt;/h1&gt;
          &lt;a href="#" class="home-button"&gt;Get Started&lt;/a&gt;
        &lt;/div&gt;
  
        &lt;div class="banner-images"&gt;
          &lt;img src="./assets/images/banner-up-hand.svg" alt="banner" class="moving-img" id="up-hand" data-speed="-2"&gt;
          &lt;img src="./assets/images/banner-down-hand.svg" alt="banner" class="moving-img" id="down-hand" data-speed="1"&gt;
          &lt;img src="./assets/images/banner-phone.svg" alt="banner" class="moving-img" id="phone" data-speed="-1"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I don't know how to help with the code because I used images and the snippet can't handle them, so ask me anything you need. <br>
  If you need the 3 images, I'll leave them here: <a href="https://wetransfer.com/downloads/5c47bfcc566d33497e1e1accb33e942f20210615171854/23edfa" rel="nofollow noreferrer">https://wetransfer.com/downloads/5c47bfcc566d33497e1e1accb33e942f20210615171854/23edfa</a></p>