「zim.js」 Parallax Tunnel 효과

parallax이펙트는 한때 페이스북 사진에서 유행했던 기법이다.

 

pallax 이펙트

 

parallax이펙트가 적용된 사진의 경우,

마우스 포인트의 움직임에 따라 좌우상하로 깊이감이 생성된다.

 

 

 

 

｜Parallax

zim.js는 Parallax이펙트를 적용할 수 있는 Parallax( )기능을 제공한다.

Parallax의 오브젝트로 사용할 동심원이 제각각 다른 원을 7개 가량 생성한다.

 

 

[코드]

//생략...
        const parallax = new Parallax();
        const colors = series(blue, pink, green, yellow);

        loop(7, i=>{
            let circle = new Circle((i+2)*(i+2)*3, colors()).center(stage, 0);
        });

   //생략...

 

루프구문 내, parallax의 .addLayer( )메서드를 실행하고,

오브젝트에는 위에서 생성한 원을 넣어준다.

addLayer( )의 prop기능을 통해 x, y축으로 입체감을 설정하고,

propChange속성값에 움직일 수 있는 범위를 정한다.

 

[코드]

                parallax.addLayer({
                    obj:circle,
                    prop:"x",
                    propChange:i*40
                });

                parallax.addLayer({
                    obj:circle,
                    prop:"y",
                    input:'mouseY',
                    split:true,
                    propChange:i*10
                });

                parallax.addLayer({
                    obj:circle,
                    prop:"scale",
                    input:'mouseY',
                    propChange:1.2
                });
                

     stage.getChildAt(6)
          .setMask(stage.getChildAt(5));

 

위의 코드를 구현해보자.

마우스 움직임에 따라 입체감이 나타나는 이미지를 볼 수 있다.

 

[구현]

 

 

 

 

 

 

circle이 아닌 이미지였다면,

페이스북이 제공하는 입체감 있는 사진을 재현할 수 있다.