JSFiddle - React, Tailwind, and code Playground

by ponzu

HTML

<script src="http://gimmicklog.main.jp/demo/parallax/parallax.js"></script>
<div id="wrap">
    <div class="layer" data-depth="0.5"><h1>Sample</h1></div> 
    <div class="layer box1" data-depth="1.0"><p>box1</p></div>
    <div class="layer box2" data-depth="1.5"><p>box2</p></div>
    <div class="layer box3" data-depth="2.0"><p>box3</p></div>
    <div class="layer box4" data-depth="3.0"><p>box4</p></div>
</div>

CSS

#wrap {
    position:relative;
    width:400px;
    height:300px;
    margin:30px auto 0;
    background: -webkit-linear-gradient(90deg, #FFFFFF 2px, rgba(0, 0, 0, 0) 2px), -webkit-linear-gradient(0deg, #FFFFFF 2px, rgba(0, 0, 0, 0) 2px), -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.298039) 1px, rgba(0, 0, 0, 0) 1px), -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.298039) 1px, rgba(0, 0, 0, 0) 1px), rgb(34, 102, 153);
    background: -moz-linear-gradient(0deg, #FFFFFF 2px, rgba(0, 0, 0, 0) 2px), -moz-linear-gradient(90deg, #FFFFFF 2px, rgba(0, 0, 0, 0) 2px), -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.298039) 1px, rgba(0, 0, 0, 0) 1px), -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.298039) 1px, rgba(0, 0, 0, 0) 1px), rgb(34, 102, 153);
    background: linear-gradient(0deg, #FFFFFF 2px, rgba(0, 0, 0, 0) 2px), linear-gradient(90deg, #FFFFFF 2px, rgba(0, 0, 0, 0) 2px), linear-gradient(0deg, rgba(255, 255, 255, 0.298039) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.298039) 1px, rgba(0, 0, 0, 0) 1px), rgb(34, 102, 153);
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
    -webkit-background-origin: padding-box;
    background-origin: padding-box;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
.box2 p, .box1 p {
    position:absolute;
    left:50px;
    top:100px;
    text-align:center;
    background:#fff;
    width:100px;
    height:100px;
    opacity:0.8;
    line-height:100px;
    -moz-box-shadow: 2px 2px 5px #333;
    -webkit-box-shadow: 2px 2px 5px #333;
    box-shadow: 2px 2px 5px #333;
}
.box4 p, .box3 p {
    position:absolute;
    left:250px;
    top:100px;
    text-align:center;
    background:#fff;
    width:100px;
    height:100px;
    opacity:0.8;
    line-height:100px;
    border-radius:50px;
   ...

JavaScript

var layer = document.getElementById('wrap');
var parallax = new Parallax(layer, {
    scalarX: 10, //レイヤーの横移動の幅
    scalarY: 10, //レイヤーの縦移動の幅
    frictionX: 0.2, //移動の速度 0～1
    frictionY: 0.2, //移動の速度 0～1
    originX: 0.5, //マウス入力の横軸初期値,デフォルト0.5
    originY: 0.8 //マウス入力の縦軸初期値,デフォルト0.5
});