dayinji / DepthCamera

A Js Plugin for Web Parallax Effect

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

DepthCamera

A Js Plugin for Web Parallax Effect

###Usage HTML import js file

    <script src="DepthCamera.js"></script>

add "layer" class name and depth attribute

    <div class="layer bg" depth="5"></div>
    <div class="layer tree" depth="4"></div>
    <div class="layer dog" depth="2"></div>
    <div class="layer role layer" depth="1"></div>

JS

    var p = new DepthCamera();
    p.set([0, 300]).moveTo([0, 0], 2000, p.MoveType.EASE);

JS

    function cameraMove(t) {
        return [20*Math.sin(t/200.0), 20*Math.cos(t/200.0)];
    }
    var p = new DepthCamera();
    p.exec(cameraMove, 5000);

###More DepthCamera support Chained calls as follow:

depthcamera.pause(2000).moveTo([100, 100]).exec(f, 2000).set([0, 0]);

Function
set([x, y])
moveTo([x, y], duration = 1000, type = this.MoveType.EASE, callback = null)
exec(f, duration = 1000, callback = null)
pause(duration = 1000, callback = null)
stop()
isRunning()
DepthCamera.MoveType
LINEAR
EASE
ELASTIC
SWING
BOUNCE

About

A Js Plugin for Web Parallax Effect

License:MIT License


Languages

Language:JavaScript 60.4%Language:HTML 39.6%