-3

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.

Aleksandr Blekh
  • 2,300
  • 4
  • 25
  • 61
  • 2
    Yes 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 Answers2

3

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.

Michael Giovanni Pumo
  • 12,838
  • 15
  • 83
  • 125
2

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.

John
  • 66
  • 5