How can i achieve this mouse movement triggered animation?

Question

I found this animation activated by mouse movement and just wondering how to achieve this.

Is there anyone have done this or share some tutorial site?

Thank you in advance!

Answer 1

This effect is called "parallax".

There's a few libraries that make easier to create it.

In a quick search I found this one: Parallax.js (demo avaliable here)

It's easily implemented using:

<ul id="scene">
  <li class="layer" data-depth="0.00"><img src="layer1.png"></li>
  <li class="layer" data-depth="0.20"><img src="layer2.png"></li>
  <li class="layer" data-depth="0.40"><img src="layer3.png"></li>
  <li class="layer" data-depth="0.60"><img src="layer4.png"></li>
  <li class="layer" data-depth="0.80"><img src="layer5.png"></li>
  <li class="layer" data-depth="1.00"><img src="layer6.png"></li>
</ul>

And javascript:

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);