Bird's Eye View

bird-s-eye-view.markdown

Bird's Eye View

A Pen by Sharna Hossain on CodePen.

License.

index.html

<div id="root" />

script.babel

// 4/26/2022 Update: This is not quite an example of parallax by some's standards. This was just a simple and incomplete attempt to learn parallax that I thought no one would notice. I did not anticipate this experimental pen to get so many views and I credit the awesomeness of Andre Benz's photography for that completely. 
// ----------------------------------
// A part of my effort to learn parallax.
// Photo Cred: Andre Benz @ https://unsplash.com/@trapnation

class App extends React.Component {
  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");
  };

  handleMouseLeave = () => {
    document.documentElement.style.setProperty("--scale", 1);
    document.documentElement.style.setProperty("--x", 0);
    document.documentElement.style.setProperty("--y", 0);
  };
  render() {
    return (
      <div
        id="wrapper"
        onMouseMove={this.handleMouseMove}
        onClick={this.handleMouseLeave}
      >
        <img id="image" />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.1.0/anime.min.js"></script>

style.scss

:root {
  --scale: 1.5
  --y: 0;
  overflow: hidden;
body {
  margin: 0;
  background-color: black;
  outline: none;
  border: none;
    #wrapper {
    width: 100vw;
    height: 100vh;
      #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;
        
      }
  }
}
}