Parallax Mouse on Images

Site URL: https://www.NathanChwalik.com

Hello!
I'm trying to apply this code pen to allow for parallax movement based on mouse position: https://codepen.io/dmitrij-shorop/pen/PoOWOyN
I tried code-injecting the javascript into the page header, but for some reason I can't get any movement.

I've input the HTML code in a code block, the CSS in the Custom CSS, and I've tried viewing it on the live site. Still doesn't seem to work 😕

I'm really just trying to get three squares to be able to move, not the text portion...
I'd be grateful for any advice! Thanks

@tuanphan is this something that you know about with your insane coding skills ?

Try adding a Code Block > paste this code

<section class="parallax">
    <div class='square' data-speed="-3" style="left: 100px; top: 100px; background: blue;"></div>
    <div class='square' data-speed="3" style="left: 1200px; top: 150px; background: red;"></div>
    <div class='square' data-speed="5" style="left: 500px; top: 200px; background: green;"></div>
    <div class='square' data-speed="-7" style="left: 600px; top: 450px; background: orange;"></div>
    <div class='square' data-speed="1" style="left: 1000px; top: 400px; background: gray;"></div>
  </section>
<style>
 parallax section {
  display: grid;
  place-content: center;
  min-height: 300px;
  width: 100%;
  border: 1px dashed gray;
}

parallax h1 {
  font-size: 128px;
  line-height: 1;
  margin: 0;  
}

/* ------------- */
.dynamic-shadow {
  position: relative;
  text-shadow: 4px 4px 0 pink;
}

.dynamic-shadow::before {
  content: 'Move mouse to change text shadow';
  position: absolute;
  left:2rem;
  top: 1rem;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;  
}

/* ---------------- */
.parallax {
  position: relative;
  height: 600px;
  overflow: hidden;
/*   width: 100%; */
}

.parallax .square {
  position: absolute;
  width: 100px;
  height: 100px;
}
</style>
<script>
  import throttle from "https://cdn.skypack.dev/lodash.throttle@4.1.1";

const createRelativeCoordinatesGetter = (container, min = -1, max = 1) => {  
  return function getRelativeCoordinates(event) {
    const { top, left, height, width } = container.getBoundingClientRect();
    const { clientX: cursorX, clientY: cursorY } = event;  
    const range = max - min;
    return {
      x: (range * (cursorX - left) / width) + min,
      y: (range * (cursorY - top) / height) + min,
    }    
  }
}

/* ---- Dynamic shadow ---- */
{
  const dynamicShadowSection = document.querySelector('.dynamic-shadow');
  const getCoords = createRelativeCoordinatesGetter(dynamicShadowSection, -20, 20);

  dynamicShadowSection.addEventListener('mousemove', throttle((event) => {
    const { x, y, } = getCoords(event);  
    dynamicShadowSection.style.textShadow = `${x}px ${y}px 0 pink`;
  }, 50))
}

/* ---- Parallax ----- */
{
  const parallaxSection = document.querySelector('.parallax');
  const getCoords = createRelativeCoordinatesGetter(parallaxSection, -5, 5);
  
  parallaxSection.addEventListener('mousemove', throttle((event) => {
    const { x, y } = getCoords(event);
    [...parallaxSection.children].forEach(item => item.style.transform = `translate(${item.dataset.speed * x}px, ${item.dataset.speed * y}px)`)
  }, 50))
}
</script>

@tuanphan  I appreciate your response! For some reason that doesn't work...

I pasted that code as a code block, but for some reason the parallax with the mouse movement is the only part that doesn't seem to work.

18 hours ago, Que594 said:

@tuanphan  I appreciate your response! For some reason that doesn't work...

I pasted that code as a code block, but for some reason the parallax with the mouse movement is the only part that doesn't seem to work.

Hi. I'm not familiar with script code. I can't help with this. 

Site URL:  https://poshandpepper.com/collections

Hi!
I'm attempting to apply this code pen to consider parallax development in light of mouse position: https://codepen.io/dmitrij-shorop/pen/PoOWOyN
I attempted code-infusing the javascript into the page header, yet for reasons unknown I can't get any development.

I've input the HTML code in a code block, the CSS in the Custom CSS, and I've taken a stab at survey it on the live site. Still doesn't appear to work 😕

I'm truly attempting to persuade three squares to have the option to move, not the text segment...
I'd be thankful for any guidance! Much obliged

No worries! Thank you for the attempt @tuanphan

I'll be trying to figure out this code for anyone who stumbles on this thread. If I find a solution, I'll make sure to post it here!