Jump to content

Parallax Mouse on Images

Go to solution Solved by Que594,

Recommended Posts

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 ?

Edited by Que594
Link to comment
  • Que594 changed the title to Parallax Mouse on Images
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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. 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

Link to comment
  • Solution

@pedin36460 I found a bit of code that you should be able to mess around with. Paste it all in a code block.

This ended up working for my site ūüôā Good luck!

 

 

<!DOCTYPE html>

<html lang="en">

  <head>

    <style>

      * {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

        font-family: sans-serif;

      }

      body {

        background-color: rgb(102, 189, 16);

      }

      .mouse_move {

        position: relative;

        width: 100%;

        height: 100vh;

        overflow: hidden;

        display: flex;

        justify-content: center;

        align-items: center;

      }

      .mouse_move h2 {

        position: relative;

        font-size: 100px;

        color: white;

      }

      .mouse_move img {

        position: absolute;

      }

      #img1 {

        top: 80px;

        left: 80px;

        height: 250px;

        width: 250px;

      }

      #img2 {

        bottom: 80px;

        right: 80px;

        height: 250px;

        width: 250px;

      }

    </style>

    <title>Parallax</title>

  </head>

  <body>

    <div class="mouse_move">

      <img

        id="img1"

        src=

"https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"

        class="mouse"

        value="5"/>

      <h2>GeeksforGeeks</h2>

      <img

        id="img2"

        src=

"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"

        class="mouse"

        value="-5"/>

    </div>

    <script type="text/javascript">

      document.addEventListener("mousemove", parallax);

      function parallax(event) {

        this.querySelectorAll(".mouse").forEach((shift) => {

          const position = shift.getAttribute("value");

          const x = (window.innerWidth - event.pageX * position) / 90;

          const y = (window.innerHeight - event.pageY * position) / 90;

          shift.style.transform = `translateX(${x}px) translateY(${y}px)`;

        });

      }

    </script>

  </body>

</html>

Edited by Que594
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

√ó
√ó
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.