<div class="poster">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/36124/c3po-profile_copy_copy.png" alt="" class="poster__c3po-profile">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/36124/c3po-eyes_copy.png" alt="" class="poster__c3po--eyes">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/36124/c3po-foreground-test.png" alt="" class="c3po__foreground">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/36124/c3po-base-2_copy.png" alt="" class="poster__c3po--base-2">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/36124/c3po--base-1_copy.png" alt="" class="poster__c3po--base-1">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/36124/c3po-base-test.png" alt="" class="poster__c3po--base">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/36124/title_copy.png" alt="Star Wars" class="poster__title">
</div>
<div class="credit">
<a class="credit__link" href="http://ollymoss.com/" target="_blank" rel="noopener noreferrer" title="Olly Moss">Poster By Olly Moss</a>
</div>
:root {
--beige: #fff2d7;
--move-x: 0px;
--move-y: 0px;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #efefef;
padding-top: 25px;
}
.poster {
position: relative;
width: 500px;
height: 800px;
background-color: var(--beige);
box-shadow: 0px 30px 60px -20px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.poster * {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 500px;
height: 800px;
transition: all 0.01s linear;
}
.poster__title {
z-index: 10;
}
.c3po__foreground {
z-index: 4;
}
.poster__c3po--base-2 {
z-index: 3;
}
.poster__c3po--base-1 {
z-index: 2;
}
.poster__c3po--base {
bottom: auto;
top: 0;
z-index: 1;
}
.poster__c3po--eyes {
z-index: 2;
bottom: auto;
}
// layers
@for $i from 7 through 1 {
// i have less than i expected
.poster img:nth-of-type(#{$i}) {
transform: translateX(calc(var(--move-x) * #{-0.7*$i}))
translateY(calc(var(--move-y) * #{-2*$i}));
}
}
.poster__c3po-profile {
transform: translateX(0) translateY(0) !important;
z-index: 11;
}
.credit {
margin-top: 1em;
}
.credit__link {
background-color: black;
color: white;
text-decoration: none;
padding: 4px 6px;
font-family: -apple-system, BlinkMacSystemFont, "San Francisco",
"Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial,
sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 1.2;
display: inline-block;
border-radius: 3px;
}
View Compiled
const poster = document.querySelector(".poster");
const posterDims = {
w: poster.getBoundingClientRect().width,
h: poster.getBoundingClientRect().height
};
const limit = {
x: 15,
y: 3
};
poster.addEventListener("mousemove", (e) => {
const mouse = {
x: e.pageX / 2,
y: e.pageY
};
const clamped = {
x: (mouse.x / posterDims.w * limit.x - (limit.x / 2)),
y: (mouse.y / posterDims.h * limit.y - (limit.y / 2))
};
document.documentElement.style.setProperty("--move-x", clamped.x+'px');
document.documentElement.style.setProperty("--move-y", clamped.y+'px');
});
//device orientation doesn't seem to work on codepen
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.