Loading
.
.
.
We use cookies to personalize ads and analyze traffic. By continuing to browse the site, you agree to our Privacy Policy. You can also choose to reject cookies.
The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frosty Interactive Christmas Delight</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="frame">
<canvas id="tree"></canvas>
</div>
<div class="snowglobe" id="snowglobeAnimation">
<div class="foot"></div>
<div class="snowglobe-highlight"></div>
<div class="snowglobe-shadow"></div>
<div class="snowglobe-background"></div>
<div class="ground">
<div class="ground-top"></div>
</div>
<div class="snowman">
<div class="head-all" id="headAnimation">
<div class="head">
<div class="hat-shadow"></div>
<div class="eye eye-left">
<div class="eye-glow"></div>
</div>
<div class="eye eye-right">
<div class="eye-glow"></div>
</div>
<div class="nose"></div>
</div>
<div class="hat">
<div class="hat-main">
<div class="hat-middle"></div>
<div class="hat-glow"></div>
</div>
<div class="hat-bottom"></div>
</div>
</div>
<div class="body-all" id="bodyAnimation">
<div class="body">
<div class="button button1"></div>
<div class="button button2"></div>
<div class="scarf-shadow"></div>
<div class="body-glow"></div>
</div>
<div class="scarf2"></div>
<div class="scarf"></div>
</div>
</div>
<div class="snow"></div>
<div class="snowglobe-highlight2"></div>
</div>
<div class="shadow" id="shadowAnimation"></div>
<div class="text"><span>Merry</span> <span>Christmas</span></div>
<div class="snow-container">
<span class="snow"></span><span class="snow"></span><span class="snow"></span><span class="snow"></span>
<span class="snow"></span><span class="snow"></span><span class="snow"></span><span class="snow"></span>
<span class="snow"></span><span class="snow"></span><span class="snow"></span><span class="snow"></span>
<span class="snow"></span><span class="snow"></span><span class="snow"></span><span class="snow"></span>
<span class="snow"></span><span class="snow"></span><span class="snow"></span><span class="snow"></span>
<span class="snow"></span><span class="snow"></span><span class="snow"></span><span class="snow"></span>
<span class="snow"></span><span class="snow"></span><span class="snow"></span><span class="snow"></span>
<span class="snow"></span><span class="snow"></span><span class="snow"></span><span class="snow"></span>
<span class="snow"></span><span class="snow"></span><span class="snow"></span><span class="snow"></span>
<span class="snow"></span><span class="snow"></span><span class="snow"></span><span class="snow"></span>
</div>
<script src="index.js"></script>
</body>
</html>Below is the css code for this video.
style.css
@import url('https://fonts.googleapis.com/css2?family=Sevillana&display=swap');
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 50%;
}
body {
display: flex;
height: 100vh;
width: 100%;
background: linear-gradient(to bottom, #00102d, #04052e, #0a0e3d, #002d1e);
justify-content: flex-start;
align-items: center;
overflow: hidden;
}
.frame {
display: inline-block;
}
.frame canvas {
position: absolute;
top: 50%;
left: 100%;
display: block;
height: 90vh;
width: 90vh;
transform: translate(-100%, -50%);
}
.snowglobe {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 50rem;
width: 50rem;
background-color: #0a0e3d;
transform: translate(0, 0) rotate(0);
border: 1rem solid #0a0e3d;
border-radius: 50%;
margin-left: 10vh;
cursor: pointer;
}
.snowglobe-background {
position: absolute;
height: 85%;
width: 85%;
background-color: #0a0e3d;
border-radius: 50%;
}
.snowglobe-highlight, .snowglobe-shadow {
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(to top left, #ffffffbf 10%, transparent 50%);
border-radius: 50%;
}
.snowglobe-shadow {
background: linear-gradient(to bottom right, #00102d66 10%, transparent 50%);
}
.snowglobe-highlight2 {
position: absolute;
height: 95%;
width: 95%;
background: linear-gradient(to bottom right, #ffffffbf 10%, transparent 50%);
border-radius: 50%;
}
.ground {
position: absolute;
height: 95%;
width: 95%;
border-radius: 50%;
overflow: hidden;
}
.ground-top {
position: absolute;
left: -10%;
bottom: 0;
height: 20rem;
width: 120%;
background-color: #ffffff;
border-radius: 50%;
}
.snowman {
position: relative;
height: 35rem;
width: 35rem;
}
.body {
position: relative;
height: 18rem;
width: 18rem;
background-color: #eaf3fa;
border-radius: 50%;
box-shadow: inset -2rem -2rem 0 #adc9ff;
overflow: hidden;
}
.head {
position: relative;
height: 12rem;
width: 12rem;
background-color: #eaf3fa;
border-radius: 50%;
box-shadow: inset -2rem -1rem 0 #adc9ff;
overflow: hidden;
}
.scarf {
position: absolute;
left: 2.5rem;
bottom: 15rem;
height: 3rem;
width: 13rem;
background-color: #a52a2a;
border-radius: 2rem 2rem 1rem 1rem;
box-shadow: inset -2rem 0 0 #6b1e1e, inset 2rem 0.2rem 0 #d13e3e;
}
.scarf2 {
position: absolute;
left: 10.5rem;
bottom: 9rem;
height: 8rem;
width: 3rem;
background-color: #a52a2a;
border-radius: 1rem;
box-shadow: inset -1rem 3rem 0 #6b1e1e;
}
.scarf-shadow {
position: absolute;
left: 0;
bottom: 14rem;
height: 3rem;
width: 17rem;
background-color: #adc9ff;
border-radius: 2rem 2rem 1rem 1rem;
}
.scarf-shadow::after {
content: "";
position: absolute;
left: 11.5rem;
bottom: -6rem;
height: 8rem;
width: 3rem;
background-color: #adc9ff;
border-radius: 1rem;
}
.button {
position: absolute;
left: 7.5rem;
bottom: 5rem;
height: 2.5rem;
width: 2.5rem;
background-color: #706c6c;
border-radius: 50%;
box-shadow: inset -0.8rem -0.8rem 0 #414141;
}
.button2 {
bottom: 10rem;
}
.eye {
position: absolute;
left: 7.5rem;
bottom: 6.5rem;
height: 2rem;
width: 2rem;
background-color: #414141;
border-radius: 50%;
}
.eye-left {
left: 2.5rem;
}
.eye-glow {
position: absolute;
top: 0.2rem;
left: 0.2rem;
height: 0.8rem;
width: 0.8rem;
background-color: #d1c7c7;
border-radius: 50%;
}
.nose {
position: absolute;
left: 5rem;
bottom: 4rem;
height: 2rem;
width: 4rem;
background-color: #ffa500;
transform: rotate(10deg);
border-radius: 200% 520% 520% 200% / 300% 320% 320% 300%;
box-shadow: inset -0.8rem -0.5rem 0 #d38003;
}
.hat {
position: absolute;
left: 1rem;
bottom: 11rem;
transform: rotate(15deg);
transform-origin: center;
}
.hat-bottom {
position: absolute;
bottom: -0.1rem;
height: 3rem;
width: 12rem;
background-color: #706c6c;
border-radius: 1rem;
box-shadow: inset -2rem 0 0 #414141;
}
.hat-main {
position: absolute;
left: 2rem;
bottom: 0;
height: 10rem;
width: 8rem;
background-color: #706c6c;
border-radius: 2rem;
box-shadow: inset -2rem -1rem 0 #414141;
}
.hat-middle {
position: absolute;
left: 0;
bottom: 0;
height: 5rem;
width: 100%;
background-color: #8b0202;
box-shadow: inset -2rem -1rem 0 #5e0202;
}
.hat-shadow {
position: absolute;
bottom: 8.5rem;
height: 3rem;
width: 12rem;
background-color: #adc9ff;
transform: rotate(15deg);
transform-origin: center;
border-radius: 1rem;
}
.hat-glow {
position: absolute;
top: 1rem;
left: 0.8rem;
height: 2rem;
width: 1rem;
background-color: #ffffff80;
border-radius: 0.5rem;
}
.hat-glow::after {
content: "";
position: absolute;
bottom: -1.5rem;
height: 1rem;
width: 1rem;
background-color: #ffffff80;
border-radius: 50%;
}
.body-glow {
position: absolute;
top: 5rem;
left: 2rem;
height: 3rem;
width: 2rem;
background-color: #ffffff;
transform: rotate(15deg);
transform-origin: center;
border-radius: 1rem;
}
.body-glow::after {
content: "";
position: absolute;
left: 0.8rem;
bottom: -3rem;
height: 1.5rem;
width: 1.5rem;
background-color: #ffffff;
border-radius: 50%;
}
.foot {
position: absolute;
bottom: -2rem;
height: 15rem;
width: 80%;
background-color: #414141;
box-shadow: inset 4rem 0 0 #5d5d5d, inset -3rem 0 0 #272727;
z-index: -1;
}
.foot::after {
content: "";
position: absolute;
bottom: -10rem;
height: 10rem;
width: 100%;
background-color: #414141;
-webkit-clip-path: ellipse(50% 60% at 50% 100%);
clip-path: ellipse(50% 60% at 50% 0%);
box-shadow: inset 4rem 0 0 #5d5d5d, inset -3rem 0 0 #272727;
}
.shadow {
position: absolute;
left: 2.5%;
bottom: 0%;
height: 15rem;
width: 60rem;
background-color: #0000001a;
transform: translate(-2.5%, -60%);
border-radius: 50%;
z-index: -5;
}
.snow {
position: absolute;
bottom: 11rem;
height: 7.8rem;
width: 75%;
}
.snowflake {
position: absolute;
background-color: #ffffff;
transform: translate(0, 0);
border-radius: 50%;
opacity: 0;
transition: all 0.25s;
}
.head-all {
position: absolute;
left: 11.5rem;
bottom: 15rem;
transform: translate(0, 0) rotate(0);
transform-origin: bottom center;
}
.body-all {
position: absolute;
left: 8.5rem;
bottom: 0;
transform: rotate(0);
transform-origin: center;
}
.body-animation {
animation: bodyAnim 0.5s linear;
}
.head-animation {
animation: headAnim 0.5s linear;
}
.snowglobe-animation {
animation: globeAnim 0.5s linear;
}
.shadow-animation {
animation: shadowAnim 0.5s linear;
}
@keyframes globeAnim {
0%, 100% {
transform: translate(0, 0) rotate(0);
}
50% {
transform: translate(10rem, -10rem) rotate(15deg);
}
}
@keyframes shadowAnim {
0%, 100% {
transform: translate(-2.5%, -50%) scale(1);
}
50% {
transform: translate(-1.75%, -50%) scale(0.8);
}
}
@keyframes bodyAnim {
0%, 50%, 100% {
transform: rotate(0);
}
25% {
transform: rotate(-25deg);
}
75% {
transform: rotate(25deg);
}
}
@keyframes headAnim {
0%, 50%, 100% {
transform: translate(0, 0) rotate(0);
}
25% {
transform: translate(-3rem, 0) rotate(-40deg);
}
75% {
transform: translate(3rem, 0) rotate(50deg);
}
}
.text {
position: absolute;
top: 5%;
display: block;
width: 100%;
transform: translateY(-5%);
text-align: center;
font-family: 'Sevillana', cursive;
font-size: 78px;
letter-spacing: 2px;
line-height: 1;
z-index: 1;
transition: all 0.5s ease;
}
.text span:first-child {
animation: colorAnim1 2s ease infinite alternate;
}
@keyframes colorAnim1 {
0% {
color: #3c8d0d;
}
45%, 55% {
color: #ffffff;
text-shadow: 0 0 10px #ffffff;
}
100% {
color: #b01b2e;
}
}
.text span:last-child {
animation: colorAnim2 2s ease infinite alternate;
}
@keyframes colorAnim2 {
0% {
color: #b01b2e;
}
45%, 55% {
color: #ffffff;
text-shadow: 0 0 10px #ffffff;
}
100% {
color: #3c8d0d;
}
}
.snow-container {
position: absolute;
top: 0;
left: 0;
display: block;
height: 100%;
width: 100%;
filter: drop-shadow(0 0 10px #ffffff);
z-index: -1;
}
.snow-container .snow {
--size: 1vw;
position: absolute;
top: -5vh;
height: var(--size);
width: var(--size);
background: #ffffff;
border-radius: 50%;
}
.snow-container .snow:nth-child(6n) {
filter: blur(1px);
}Below is the scss code for this video.
index.scss
@for $i from 1 through 40 {
.snow-container .snow:nth-child(#{$i}) {
--size: #{random(5) * 0.25}vw;
--left-init: #{random(20)-10}vw;
--left-end: #{random(20)-10}vw;
left: #{random(100)}vw;
animation: snowfall #{5 + random(10)}s linear infinite;
animation-delay: -#{random(10)}s;
}
}
@keyframes snowfall {
0% {
transform: translate3d(var(--left-init), 0, 0);
opacity: 1;
}
100% {
transform: translate3d(var(--left-end), 110vh, 0);
opacity: 0;
}
}
Below is the javascript code for this video.
index.js
(function () {
var SwirlNode, Tree, TreeSwirl, height, width, swirls, __bind = function (fn, me) { return function () { return fn.apply(me, arguments); }; };
height = 550;
width = 550;
swirls = [{ color: "#b01b2e", nodes: 100, speed: 10, radius: 8 }, { color: "#e1dfe0", nodes: 640, speed: 10, radius: 2 },
{ color: "#caa906", nodes: 100, speed: 10, radius: 1 }, { color: "#caa906", nodes: 55, speed: 1, radius: 4 },
{ color: "#3c8d0d", nodes: 370, speed: -10, radius: 3 }];
Tree = (function () {
function Tree(w, h, swirls) {
this.run = __bind(this.run, this);
var i;
this.height = h;
this.width = w;
this.canvas = document.getElementById("tree");
this.context = this.canvas.getContext("2d");
this.canvas.height = h;
this.canvas.width = w;
this.swirls = (function () {
var _i, _ref, _results;
_results = [];
for (let i = _i = 0, _ref = swirls.length; 0 <= _ref ? _i < _ref : _i > _ref; i = 1 <= _ref ? ++_i : --_i) {
_results.push(new TreeSwirl(this, swirls[i], i / swirls.length));
}
return _results;
}).call(this);
this.run();
}
Tree.prototype.run = function (t) {
if (t == null) { t = 0; }
window.requestAnimationFrame(this.run);
return this.draw(t);
}
Tree.prototype.draw = function (t) {
var s, _i, _j, _len, _len1, _ref, _ref1, _results;
this.context.clearRect(0, 0, this.width, this.height);
_ref = this.swirls;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
s = _ref[_i];
s.drawBack(t);
}
_ref1 = this.swirls;
_results = [];
for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
s = _ref1[_j];
_results.push(s.drawFront(t));
}
return _results;
};
return Tree;
})();
TreeSwirl = (function () {
function TreeSwirl(tree, s, offset) {
var i;
this.tree = tree;
this.offset = offset;
this.color = s.color;
this.speed = s.speed;
this.radius = s.radius;
this.nodes = (function () {
var _i, _ref, _results;
_results = [];
for (i = _i = 4, _ref = s.nodes; 0 <= _ref ? _i < _ref : _i > _ref; i = 1 <= _ref ? ++_i : --i) {
_results.push(new SwirlNode(this, i / s.nodes));
}
return _results;
}).call(this);
}
TreeSwirl.prototype.drawBack = function (t) {
var n, _i, _len, _ref, _results;
_ref = this.nodes;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
n = _ref[_i];
if (n.inBack(t)) { _results.push(n.draw(t)); }
}
return _results;
};
TreeSwirl.prototype.drawFront = function (t) {
var n, _i, _len, _ref, _results;
_ref = this.nodes;
_results = [];
for (_i = 2, _len = _ref.length; _i < _len; _i++) {
n = _ref[_i];
if (n.inFront(t)) { _results.push(n.draw(t)); }
}
return _results;
};
return TreeSwirl;
})();
SwirlNode = (function () {
function SwirlNode(swirl, offset) {
this.swirl = swirl;
this.offset = offset;
}
SwirlNode.prototype.yPos = function () {
var d, od;
d = this.t / 9999 * this.swirl.speed;
od = d + this.offset * this.swirl.tree.height;
return (this.swirl.tree.height - od % this.swirl.tree.height);
};
SwirlNode.prototype.xDeg = function () { return this.yPos() * 14 + 490 * this.swirl.offset; };
SwirlNode.prototype.xRad = function () { return this.xDeg() * Math.PI / 44; };
SwirlNode.prototype.xPos = function () {
return Math.sin(this.xRad()) * this.swirl.tree.width * this.yPos() / this.swirl.tree.height / 3 + this.swirl.tree.width / 2;
};
SwirlNode.prototype.shade = function () { return (Math.cos(this.xRad()) + 1) / 2; };
SwirlNode.prototype.inBack = function (t) {
this.t = t;
return Math.cos(this.xRad()) > 0;
};
SwirlNode.prototype.inFront = function (t) {
this.t = t;
return !this.inBack(t);
};
SwirlNode.prototype.draw = function (t) {
this.t = t - 180;
this.drawNode(this.swirl.radius * 0.6, this.shade() + 0.4);
this.t = t - 90;
this.drawNode(this.swirl.radius * 0.8, this.shade() + 0.2);
this.t = t;
return this.drawNode(this.swirl.radius, this.shade());
};
SwirlNode.prototype.drawNode = function (size, shade) {
var c;
c = this.swirl.tree.context;
c.beginPath();
c.arc(this.xPos(), this.yPos(), size, 0, 2 * Math.PI);
c.fillStyle = this.swirl.color;
c.fill();
c.fillStyle = "rgba(0, 0, 0, " + shade + ")";
return c.fill();
};
return SwirlNode;
})();
new Tree(width, height, swirls);
}).call(this);
const globe = document.querySelector(".snowglobe"),
head = document.querySelector("#headAnimation"),
body = document.querySelector("#bodyAnimation"),
snowglobe = document.querySelector("#snowglobeAnimation"),
shadow = document.querySelector("#shadowAnimation");
globe.addEventListener("click", function () {
if (head.classList.contains("head-animation")) return;
head.classList.add("head-animation");
body.classList.add("body-animation");
snowglobe.classList.add("snowglobe-animation");
shadow.classList.add("shadow-animation");
addSnowAnimation();
setTimeout(snowFallAnimation, 300);
setTimeout(removeAnimations, 4000);
});
function removeAnimations() {
head.classList.remove("head-animation");
body.classList.remove("body-animation");
snowglobe.classList.remove("snowglobe-animation");
shadow.classList.remove("shadow-animation");
globe.style.cursor = "pointer";
}
function addSnowflakes() {
const snowcontainer = document.querySelector(".snow");
for (let i = 0; i < 60; i++) {
const width = (Math.floor(Math.random() * 8) + 5) / 10;
const x = Math.floor(Math.random() * 100);
const y = Math.floor(Math.random() * 100);
const html = `<div class="snowflake" style="width: ${width}rem; height: ${width}rem; left: ${y}%; top: ${x}%;"></div>`;
snowcontainer.insertAdjacentHTML("beforeend", html);
}
}
function addSnowAnimation() {
globe.style.cursor = "default";
const snowflakes = document.querySelectorAll(".snowflake");
snowflakes.forEach(flake => {
const x = Math.floor(Math.random() * 15) + 8;
flake.style.transform = `translate(0, ${-x}rem)`;
flake.style.opacity = 1;
});
}
function snowFallAnimation() {
const snowflakes = document.querySelectorAll(".snowflake");
snowflakes.forEach(flake => {
const duration = (Math.floor(Math.random() * 500) + 100) / 100;
flake.style.transition = `all ${duration}s`;
flake.style.transform = "translate(0, 0)";
flake.style.opacity = 0;
});
setTimeout(removeSnowAnimation, 3000);
}
function removeSnowAnimation() {
const snowflakes = document.querySelectorAll(".snowflake");
snowflakes.forEach(flake => flake.style.transition = "all 0.25s");
}
addSnowflakes();Thanks for visiting