랑벨 홈페이지 배경 올리브 마우스 패럴렉스 + 3d 효과 (Pixi.js, canvas, webGL 2d)

lanbelle.com/

랑벨 (Lanbelle) 원스토어

해당 홈페이지 뒷배경에 깔린 올리브가

1) 스크롤시 특정 높이에 다다르면 스크롤에 따라옴
2) 커서 상하좌우 무빙에 따라 3d 효과가 적용 됨

1번이야 쉬운데 2번은...
2D 이미지로 3D효과를 내는거다.
정확한건 아니지만 마우스 커서의 좌표값에 따라 이미지 scale을 늘려줌으로써 3d처럼 보이는 효과를 주고있다.

우선은 Pixi.js로 하면 된다

redstapler.co/3d-photo-from-image-javascript-tutorial/

Create 3D Photo from Image JavaScript Tutorial | Red Stapler

www.pixijs.com/

PixiJS

 

HTML

<div id="olive_cont">
        <img src="./img/organic-bg.jpg" alt="">
</div>

CSS

/* 🍈 올리브 */
#olive_cont{/* outline:1px solid red; */
    content:'';display:block;position:absolute; 
    left:calc(50% - 20vw); top:0;
    width:40%; height:60vw;
    background:transparent;
    /* background:url(../img/organic-bg.jpg) no-repeat center 200% / 100% auto; */
    transition:all .5s;}

#olive_cont img{
    display:none;
    position:absolute;
    width:100%;height:100%;
    top:-50%;}

#olive_cont canvas{
    position:absolute;
    width:100%;height:100%;
    top:-50%;left:0;
}

JS

depth Map 역할을 할 흑백 이미지를 제작해야한다~~~

const sect_card = document.getElementById('sect_card');
const sect_card_top = sect_card.offsetTop;
const olive_cont = document.getElementById('olive_cont');
let scTop;
 
/* 00. 스크롤시 상하 움직임 */
window.addEventListener('scroll',function(e){
    scTop = window.pageYOffset;
    if(scTop < sect_card_top){
        olive_cont.style.transform = `translateY(0)`;
        return;}
    olive_cont.style.transform = `translateY(${scTop - sect_card_top}px)`;
});
 
 
/* 01. 세팅 */
let makeOlive = new PIXI.Application({
    width : olive_cont.offsetWidth,
    height: olive_cont.offsetHeight,
});
olive_cont.appendChild(makeOlive.view);
 
/* 02. 기본 이미지 추가 */
let olive = new PIXI.Sprite.from('../img/organic-bg.jpg');
olive.width = olive_cont.offsetWidth;
olive.height = olive_cont.offsetHeight;
makeOlive.stage.addChild(olive);
 
/* 03. depth map 이미지 추가*/
let olive_depth = new PIXI.Sprite.from('../img/organic-bg-black.jpg');
olive_depth.width = olive_cont.offsetWidth;
olive_depth.height = olive_cont.offsetHeight;
makeOlive.stage.addChild(olive_depth)
 
/* 04. displacement filter 추가 */
let displacementFilter = new PIXI.filters.DisplacementFilter(olive_depth);
makeOlive.stage.filters = [displacementFilter];
 
/* 05. 마우스 이벤트 추가 */
sect_card.onmousemove = (e)=>{
    displacementFilter.scale.x = ((window.innerWidth / 2) - e.clientX) / 20;
    displacementFilter.scale.y = ((window.innerHeight / 2) - e.clientY) / 20;
};