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