Bird’s Eye View Parallax In React

A smooth interactive Bird’s eye view parallax effect created using React and anime.js.

How to use it:

1. Add an image to the Bird’s eye view.

<div id="root" />

:root {
  --scale: 1.5
  --y: 0;
}
:root body {
  margin: 0;
  background-color: black;
  outline: none;
  border: none;
}
:root body #wrapper {
  width: 100vw;
  height: 100vh;
}
:root body #wrapper #image {
  width: 100vw;
  height: 100vh;
  background-image: url("https://images.unsplash.com/photo-1539035104074-dee66086b5e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI0MX0&auto=format&fit=crop&w=2550&q=80");
  background-size: cover;
  transform: translateX(var(--x)) translateY(var(--y)) scale(var(--scale));
  transition: ease-out 0.7s;
}

2. Import the necessary JavaScript libraries.

<script src="/path/to/cdn/react.production.min.js"></script>
<script src="/path/to/cdn/react-dom.production.min.js"></script>
<script src="/path/to/cdn/anime.min.js"></script>

3. The JavaScript.

function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;} 
class App extends React.Component {constructor(...args) {super(...args);_defineProperty(this, "handleMouseMove",
    e => {
      const el = document.getElementById("wrapper");
      const d = el.getBoundingClientRect();
      let x = e.clientX - (d.left + Math.floor(d.width / 2));
      let y = e.clientY - (d.top + Math.floor(d.height / 2));
      // Invert values
      x = x - x * 2;
      y = y - y * 2;
      document.documentElement.style.setProperty("--scale", 1.6);
      document.documentElement.style.setProperty("--x", x / 2 + "px");
      document.documentElement.style.setProperty("--y", y / 2 + "px");
    });_defineProperty(this, "handleMouseLeave",
    () => {
      document.documentElement.style.setProperty("--scale", 1);
      document.documentElement.style.setProperty("--x", 0);
      document.documentElement.style.setProperty("--y", 0);
    });}
  render() {
    return /*#__PURE__*/(
      React.createElement("div", {
        id: "wrapper",
        onMouseMove: this.handleMouseMove,
        onClick: this.handleMouseLeave }, /*#__PURE__*/
      React.createElement("img", { id: "image" })));
  }}
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("root"));

Preview:

See the Pen
Bird’s Eye View Parallax by Sharna Hossain (@sharnajh)
on CodePen.

Download Details:

Author: Sharna Hossain

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://codepen.io/sharnajh/pen/ExjpGwr

License: MIT