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 });
<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>
#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; -webkit-border-radius:50px; -moz-border-radius:50px; -moz-box-shadow: 2px 2px 5px #333; -webkit-box-shadow: 2px 2px 5px #333; box-shadow: 2px 2px 5px #333; } h1 { position:absolute; left:150px; top:10px; color:yellow; font-size:30px; font-weight:bold; }