Today I ran across this website (of a book) and discovered interesting visual effect (I guess, I would call it changing virtual perspective or similar). I'm curious about the term that this effect is properly referred to as well as about what front-end (JavaScript, I assume) frameworks, libraries, tools and/or languages can be used for implementing this and similar effects.
-
2Yes that would be a parallax – axelduch Feb 24 '16 at 23:54
-
@axelduch: Perhaps. Please see the link I initially forgot to include. – Aleksandr Blekh Feb 24 '16 at 23:54
-
@axelduch: I see - thank you. I've heard the term, but wasn't sure that it applies to this case. So, what tools could be used to implement this effect? P.S. Wow! -1? Whoever downvoted: do you care to explain your reasoning? – Aleksandr Blekh Feb 24 '16 at 23:56
-
To moderators: my question didn't imply a request for a fully comprehensive answer, so I see no point in labeling it as too broad and placing on hold. But, if you insist on this, I don't mind... – Aleksandr Blekh Feb 25 '16 at 00:08
2 Answers
It's an effect called Parallax. It's often used on scrolling websites, to give the illusion of depth.
This idea first came about with early computer games, to give 2D graphics a sense of movement, perception of speed and distance.
If you're after JavaScript libraries, there are many, but one popular one is: http://pixelcog.github.io/parallax.js/
Whilst many websites using Parallax attach the effect to the scroll event, the example website you gave attaches the event to the users mouse X and Y coordinates.
![](../../users/profiles/695749.webp)
- 12,838
- 15
- 83
- 125
Looks like parallax.js might be a good place to start. If you want to code it yourself, you could do something like use a couple of SVG layers and then use a transform to move some of the layers based on capturing the X and Y co-ordinates of mouseover events to calculate mouse movement.
For something slightly simpler (i.e. you don't want to learn SVG for a simple moving image), I guess you could use some images with position: absolute and update their top & left properties based on the mouse location.
![](../../users/profiles/5977448.webp)
- 66
- 5