Parallax plugin

 

https://github.com/wagerfield/parallax

GitHub - wagerfield/parallax: Parallax Engine that reacts to the orientation of a smart device

 

---

사용법

<div id="scene">
   <div class="layer" data-depth-x="-0.1" data-depth-y="0.25"><img src="main_bg.jpg"></div>
   <div class="layer" data-depth-x="0.25"><img src="main_water.png"></div>
   <div class="layer" data-depth-x="0.5" ><img src="main_ground.png"></div>
</div>

css

#scene .layer 
{ position: absolute; top:0; left:0; width: 100%; height: 100vh;}
#scene .layer img 
{ position: absolute; width: 100%; height: 1005; left:0; bottom: 0; object-fit: cover;}

 

script

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