-
const ITEMS = [
//- {
//- identifier: 'kody-yellow',
//- backgroundPositionX: 53.15,
//- backgroundPositionY: 50,
//- size: 739,
//- config: {
//- positionX: 50,
//- positionY: 54,
//- moveX: 0.15,
//- moveY: -0.25,
//- height: 58,
//- width: 55,
//- rotate: 0.01,
//- },
//- },
//- {
//- identifier: 'kody-red',
//- backgroundPositionX: 100,
//- backgroundPositionY: 50,
//- size: 739,
//- config: {
//- positionX: 50,
//- positionY: 54,
//- moveX: 0.15,
//- moveY: -0.25,
//- height: 58,
//- width: 55,
//- rotate: 0.01,
//- },
//- },
//- {
//- identifier: 'kody-white',
//- backgroundPositionX: 68.8,
//- backgroundPositionY: 50,
//- size: 739,
//- config: {
//- positionX: 50,
//- positionY: 54,
//- moveX: 0.15,
//- moveY: -0.25,
//- height: 58,
//- width: 55,
//- rotate: 0.01,
//- },
//- },
{
identifier: 'kody-blue',
backgroundPositionX: 84.4,
backgroundPositionY: 50,
size: 739,
config: {
positionX: 50,
positionY: 54,
moveX: 0.15,
moveY: -0.25,
height: 58,
width: 55,
rotate: 0.01,
},
},
{
identifier: 'battery',
size: 2620,
backgroundPositionX: -0.075,
backgroundPositionY: 0,
config: {
positionX: 74,
positionY: 15,
positionZ: -1,
moveX: 1.5,
moveY: -0.85,
height: 17,
width: 17,
},
},
{
identifier: 'leaf-one',
size: 10000,
backgroundPositionX: 3.75,
backgroundPositionY: -1,
config: {
positionX: 35,
positionY: 94,
moveX: 1.5,
moveY: -0.85,
height: 7,
width: 4,
rotate: 0.6,
},
},
{
identifier: 'leaf-two',
size: 5800,
backgroundPositionX: 10.15,
backgroundPositionY: -0.25,
config: {
positionX: 97,
positionY: 63,
moveX: 1.5,
moveY: -0.85,
height: 4,
width: 8,
rotate: -0.5,
},
},
{
identifier: 'leaf-three',
size: 8000,
backgroundPositionX: 8.85,
backgroundPositionY: -0.5,
config: {
positionX: 84,
positionY: 21,
moveX: 1.5,
moveY: -0.85,
height: 7,
width: 6,
rotate: 0.75,
},
},
{
identifier: 'leaf-four',
size: 13500,
backgroundPositionX: 19.125,
backgroundPositionY: -0.5,
config: {
positionX: 57,
positionY: 18,
moveX: 1.5,
moveY: -0.85,
height: 7,
width: 3,
rotate: 0.35,
},
},
{
identifier: 'leaf-five',
size: 6500,
backgroundPositionX: 16,
backgroundPositionY: -1,
config: {
positionX: 55,
positionY: 94,
moveX: 1.5,
moveY: -0.85,
height: 10,
width: 6,
rotate: 0.6,
},
},
{
identifier: 'leaf-six',
size: 5000,
backgroundPositionX: 14,
backgroundPositionY: -0.5,
config: {
positionX: 9,
positionY: 22,
moveX: 1.5,
moveY: -0.85,
height: 8,
width: 8,
rotate: 1,
},
},
{
identifier: 'leaf-seven',
size: 5100,
backgroundPositionX: 11.975,
backgroundPositionY: -0.5,
config: {
positionX: 4,
positionY: 83,
moveX: 1.5,
moveY: -0.85,
height: 8,
width: 8,
rotate: -0.5,
},
},
{
identifier: 'leaf-eight',
size: 5000,
backgroundPositionX: 20.15,
backgroundPositionY: -0.5,
config: {
positionX: 10,
positionY: 74,
moveX: 1.5,
moveY: -0.85,
height: 5,
width: 8,
rotate: 0.25,
},
},
{
identifier: 'leaf-nine',
size: 5000,
backgroundPositionX: 4.8,
backgroundPositionY: -0.25,
config: {
positionX: 83,
positionY: 64,
moveX: 1.5,
moveY: -0.85,
height: 9,
width: 9,
rotate: -0.6,
},
},
{
identifier: 'leaf-ten',
size: 5000,
backgroundPositionX: 6.85,
backgroundPositionY: 0,
config: {
positionX: 56,
positionY: 4,
moveX: 1.5,
moveY: -0.85,
height: 8,
width: 8,
rotate: 0.8,
},
},
{
identifier: 'leaf-eleven',
size: 6200,
backgroundPositionX: 17.65,
backgroundPositionY: -0.5,
config: {
positionX: 28,
positionY: 32,
moveX: 1.5,
moveY: -0.85,
height: 4,
width: 8,
rotate: 0.6,
},
},
{
identifier: 'one-wheel',
size: 1250,
backgroundPositionX: 27.5,
backgroundPositionY: -8,
config: {
positionX: 80,
positionY: 83,
positionZ: 2,
rotate: 0.2,
moveX: 1.5,
moveY: -0.85,
height: 26,
width: 32,
},
},
{
identifier: 'speaker',
size: 2150,
backgroundPositionX: 35,
backgroundPositionY: 0,
config: {
positionX: 12,
positionY: 51,
positionZ: 2,
moveX: 1.5,
moveY: -0.85,
height: 24,
width: 19,
},
},
{
identifier: 'skis',
size: 1240,
backgroundPositionX: 41.3,
backgroundPositionY: -2,
config: {
positionX: 80,
positionY: 40,
positionZ: 10,
moveX: 1.5,
moveY: -0.85,
height: 30,
width: 30,
},
},
{
identifier: 'recycle',
size: 2850,
backgroundPositionX: 22.55,
backgroundPositionY: 0,
config: {
positionX: 28,
positionY: 10,
rotate: -2,
moveX: 1.5,
moveY: -0.85,
height: 15,
width: 15,
},
},
]
img(src="https://assets.codepen.io/605876/kody-flying_blue.png")
.parallax
- for (const ITEM of ITEMS)
.parallax__item(style=`--pos-x: ${ITEM.backgroundPositionX}; --pos-y: ${ITEM.backgroundPositionY}; --size: ${ITEM.size}; --width: ${ITEM.config.width}; --height: ${ITEM.config.height}; --x: ${ITEM.config.positionX}; --y: ${ITEM.config.positionY};`)*
box-sizing border-box
body
min-height 100vh
display grid
place-items center
background hsl(210, 20%, 20%)
overflow hidden
img
position fixed
top 50%
left 50%
height 50vmin
transform translate(-50%, -50%)
opacity 0.5
.parallax
height 50vmin
width calc(50 * (484 / 479) * 1vmin)
background hsla(180, 50%, 50%, 0.25)
position relative
&__item
position absolute
left calc(var(--x, 50) * 1%)
top calc(var(--y, 50) * 1%)
height calc(var(--height, auto) * 1%)
width calc(var(--width, auto) * 1%)
background-color hsla(0, 50%, 50%, 0.5)
transform translate(-50%, -50%)
background-image url("https://assets.codepen.io/605876/kody-sprite.png")
background-position calc(var(--pos-x, 0) * 1%) calc(var(--pos-y, 0) * 1%)
background-size calc(var(--size, 0) * 1%)
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.