マウスの座標軸を$(‘#container’).mousemove(function(e){ console.log(e.clientX, e.clientY); で取得し、中心からの距離に合わせてオブジェクトの形状を変える処理です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>パララックスサイト</title>
<style>
body {
margin: 0;
padding: 0;
}
#container {
width: 600px;
height: 280px;
background: #eee;
}
.box {
position: fixed;
opacity: 0.6;
left: 300px;
}
#box1 {
width: 40px;
height: 40px;
top: 140px;
background: red;
}
#box2 {
width: 50px;
height: 50px;
top: 155px;
background: blue;
}
#box3 {
width: 60px;
height: 60px;
top: 165px;
background: yellow;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
</div>
<script>
$(function(){
$('#container').mousemove(function(e){
console.log(e.clientX, e.clientY);
var cx = $(this).width() / 2;
var cy = $(this).height() / 2;
var dx = e.clientX - cx;
var dy = e.clientY - cy;
$('#box1').css('left', cx + dx * 1.1);
$('#box2').css('left', cx + dx * 1.3);
$('#box3').css('left', cx + dx * 1.5);
$('#box1').css('top', cy + dy * 1.0);
$('#box2').css('top', cy + dy * 1.1);
$('#box3').css('top', cy + dy * 1.2);
});
});
</script>
</body>
</html>
