렌티큘러카드 만들기 - lentikyulleokadeu mandeulgi

<div id="card">

<div id="layer1" class="lenticular"></div>

<div id="layer2" class="lenticular"></div>

</div>

#card {

position: relative;

max-width: 100%;

height: 0;

padding-bottom: 100%;

background-image: url(배경_이미지);

background-size: cover;

}

#card .lenticular {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0

}

#card .lenticular {

background-position: center;

background-size: contain;

}

#layer1 {

background-image: url(각도에_따라_보일_이미지_1);

}

#layer2 {

background-image: url(각도에_따라_보일_이미지_2);

}

const layer1 = document.getElementById("layer1"),

layer2 = document.getElementById("layer2");

function handleOrientation(event) {

const beta = 1/10 * event.beta;

if (event.alpha === null) {

//자바스크립트에선 0 !== null이라 이래도 됩니다.

window.removeEventListener("deviceorientation", handleOrientation),

document.getElementById("card").addEventListener("mousemove", handleMouseMove);

}

layer1.style.opacity = (Math.sin(beta) + 1) / 2,

layer2.style.opacity = (Math.cos(beta + 1.570795) + 1)/ 2

}

function handleMouseMove(event) {

const y = 1/30 * event.clientY;

layer1.style.opacity = (Math.sin(y) + 1) / 2,

layer2.style.opacity = (Math.cos(y + 1.570795) + 1)/ 2

}

window.addEventListener("deviceorientation", handleOrientation);