The image is inspired by countryside townhouse, which was drawn by me (Using MS Paint, then using Powerpoint to make the background into transparent). Its perspective will move according to the position of the mouse pointer.
I used Base64 to show the image.
The movement is made by VueJS.
How it works
Most of the source code is self explanatory, so I will just put the most important part.
These layers are made with many images, with different sizes. It is crucial for the 'parallax' effect.
With the source code below, we can do the parallax movement.
calc: function(el, w2, h2, x, y) {
const w1 = el.w;
const h1 = el.h;
const w = w1 - w2;
const h = h1 - h2;
return {
top: (w * y * -1) + 'px',
left: (w * x * -1) + 'px'
};
},
I just took the distance between the space between the sizes of image, then change the top, and left position based on the position of mouse.
The CSS source code is not that readable, because of the Base64 source code. But the important is line 33.
I hope you like it. Thank you for reading.
Demo
Top comments (0)