Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Christmas Parallax
{
"test": 20
}
<img id="santa" src="https://assets.codepen.io/974948/santa-sled.png" />
<div id="scene">
<!-- Background -->
<div class="background" data-depth="0.2">
<img id="background-left" src="https://assets.codepen.io/974948/christmas-night-2799075_1280.jpg" />
</div>
<!-- Snow Hills -->
<div class="snow back" data-depth="0.6">
<img src="https://assets.codepen.io/974948/snowyHills.png" />
</div>
<div class="snow front" data-depth="0.6">
<img id="snow-reverse" src="https://assets.codepen.io/974948/snowyHills.png" />
</div>
<!-- Christmas Tree -->
<div class="tree-container" data-depth="0.6">
<img id="tree" src="https://assets.codepen.io/974948/christmasTree.png" />
</div>
</div>
import foo from "./foo.json";
var scene = document.getElementById("scene");
var parallaxInstance = new Parallax(scene, {
relativeInput: true
});
console.log(JSON.stringify(foo));
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
html,
body {
align-items: center;
display: flex;
justify-content: center;
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
font-size: 1vmax;
overflow: hidden;
}
#santa {
position: absolute;
animation: fly 15s linear infinite;
width: 300px;
z-index: 100;
}
@keyframes fly {
0% {
transform: rotateZ(0deg) translate(-75vw, -30vh);
}
100% {
transform: rotateZ(90deg) translate(500vw, -30vh);
}
}
#scene {
text-align: center;
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
background: black;
}
.background {
margin-left: -10vw;
margin-top: -10vh;
width: 120vw;
}
.background img {
height: 100vh;
width: 100%;
}
.snow {
width: 120vw;
}
.snow > * {
margin-left: -20vw;
transform: scale(2);
}
.snow.back {
margin-top: 70vh;
}
.snow.front {
margin-top: 83vh;
}
.snow img {
height: 20vh;
width: 60vw;
}
#snow-reverse {
transform: scale(-2, 2);
}
.tree-container {
position: absolute;
}
#tree {
height: 60vh;
width: 30vw;
margin-top: 40vh;
margin-left: 35vw;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment