Background Parallax Effect on Mouse Move

Background Parallax Effect on Mouse Move
Code Snippet:Simple Parallax
Author: Maria Tatosh
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 1,143
License: MIT
Edit Code online: View on CodePen
Read More

This code creates a captivating parallax effect on a webpage background on mouse move event. When users move their cursor, it shifts the background and content, providing a visually engaging experience. The JavaScript and CSS work together to achieve this dynamic effect, making your webpage more interactive and attractive.

You can use this code in your website’s landing page to add an eye-catching parallax effect, instantly grabbing your visitors’ attention.

How to Create Background Parallax Effect On Mouse Move

1. First, create an HTML structure with a "parallax-container" and "parallax-content" div elements. These will serve as the background and content for the parallax effect.

<div class="parallax-container"></div>
  <div class="parallax-content">2024</div>

2. In your CSS file, apply the necessary styles to create the parallax effect and style your content. You can modify the CSS rules according to your needs.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
 position: relative;
 height: 100vh;
 overflow: hidden;
}

.parallax-container {
  width: 110%;
  height: 110%;
  background: url("https://cdn.pixabay.com/photo/2019/12/10/10/53/architecture-4685608_960_720.jpg") center center / cover no-repeat;
  position: absolute;
  left: -10%;
  top: -10%;
}

.parallax-content {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 5rem;
  font-weight: bold;
  text-shadow: -5px 10px 15px black;
  letter-spacing: 2px;
  position: absolute;
  top: calc(50% - 5rem);
  left: calc(50% - 5rem);
  cursor: pointer;
}

3. Finally, use the following JavaScript code to create the parallax effect. This code responds to mouse movement, translating the "parallax-container" and "parallax-content" elements for a dynamic visual effect.

var getParallaxContainer = document.querySelector(".parallax-container");
var getParallaxContent = document.querySelector(".parallax-content");

getParallaxContainer.addEventListener("mousemove", function(e) {
  let x = e.pageX / window.innerWidth;
  let y = e.pageY / window.innerHeight;
  
  this.style.transform = `translate(${x * 5}%, ${y * 5}%)`;
  getParallaxContent.style.transform = `translate(${-x * 8}%, ${-y * 8}%)`;
})

Customize the content, styles, and images to match your website’s theme.

That’s it! hopefully, you have successfully created an interactive background parallax effect. This dynamic feature will make your site more interactive and visually appealing. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X