<div id="root" />
: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;
}
}
}
}
View Compiled
// 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"));
View Compiled
This Pen doesn't use any external CSS resources.