Merry Christmas

Developer
Amin Poursaied
Size
2,912 Kb
Views
2,024
  1. Merry Christmas Previews
  2. Merry Christmas HTML Codes
  3. Merry Christmas CSS Codes
  4. Merry Christmas JS Codes

How do I make an merry christmas?

Please lunch it only on Full Screen Mode It's not responsive yet :(. What is a merry christmas? How do you make a merry christmas? This script and codes were developed by Amin Poursaied on 29 January 2023, Sunday.

Merry Christmas Previews
IQ Test

Merry Christmas - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Merry Christmas</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <canvas id="canvas"></canvas> <div class="message"> Merry Christmas</div> <div class="trees"></div> <div class="ground"><p>Copyrights © 2014 <a href="http://www.arasdesign.ir">ArasDesign</a></p></div>
</body> <script src="js/index.js"></script>
</body>
</html>

Merry Christmas - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Mountains+of+Christmas);
body{ background:#be050b; margin:0; height:100%; overflow:hidden;
}
a{ text-decoration:none;
}
canvas{ position:absolute; top:0; left:0; z-index:1;
}
.ground{ background:#FFF; height:20%;width:100%; position:absolute; bottom:0px; z-index:1; border-radius:100% 100% 0 0; font-size:10px; color:#666; display:table;
}
.ground p{ display: table-cell; vertical-align: middle; text-align:center; width:100%;
}
.message{ font-family: 'Mountains of Christmas', cursive; font-size: 400%; text-align:center; color:#FFF; margin:40px auto; height: 20%
}
.trees{ background: url(http://www.arasthemes.com/files/xmas/trees.svg) no-repeat center; background-size: contain; width:100%; position:absolute; bottom: 18%; height: 60%;
}

Merry Christmas - Script Codes JS Codes

(function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; window.requestAnimationFrame = requestAnimationFrame;
})();
var flakes = [], canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), flakeCount = 400, mX = -100, mY = -100 canvas.width = window.innerWidth; canvas.height = window.innerHeight;
function snow() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < flakeCount; i++) { var flake = flakes[i], x = mX, y = mY, minDist = 150, x2 = flake.x, y2 = flake.y; var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)), dx = x2 - x, dy = y2 - y; if (dist < minDist) { var force = minDist / (dist * dist), xcomp = (x - x2) / dist, ycomp = (y - y2) / dist, deltaV = force / 2; flake.velX -= deltaV * xcomp; flake.velY -= deltaV * ycomp; } else { flake.velX *= .98; if (flake.velY <= flake.speed) { flake.velY = flake.speed } flake.velX += Math.cos(flake.step += .05) * flake.stepSize; } ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")"; flake.y += flake.velY; flake.x += flake.velX; if (flake.y >= canvas.height || flake.y <= 0) { reset(flake); } if (flake.x >= canvas.width || flake.x <= 0) { reset(flake); } ctx.beginPath(); ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2); ctx.fill(); } requestAnimationFrame(snow);
};
function reset(flake) { flake.x = Math.floor(Math.random() * canvas.width); flake.y = 0; flake.size = (Math.random() * 3) + 2; flake.speed = (Math.random() * 1) + 0.5; flake.velY = flake.speed; flake.velX = 0; flake.opacity = (Math.random() * 0.5) + 0.3;
}
function init() { for (var i = 0; i < flakeCount; i++) { var x = Math.floor(Math.random() * canvas.width), y = Math.floor(Math.random() * canvas.height), size = (Math.random() * 3) + 2, speed = (Math.random() * 1) + 0.5, opacity = (Math.random() * 0.5) + 0.3; flakes.push({ speed: speed, velY: speed, velX: 0, x: x, y: y, size: size, stepSize: (Math.random()) / 30, step: 0, opacity: opacity }); } snow();
};
window.addEventListener("resize",function(){ canvas.width = window.innerWidth; canvas.height = window.innerHeight;
})
init();
Merry Christmas - Script Codes
Merry Christmas - Script Codes
Home Page Home
Developer Amin Poursaied
Username arasdesign
Uploaded January 29, 2023
Rating 3
Size 2,912 Kb
Views 2,024
Do you need developer help for Merry Christmas?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Amin Poursaied (arasdesign) Script Codes
Name
A Pen by Amin Poursaied
Vertically rotating text with CSS
Demo Toolbar
Flat minion
Flat Firefox
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!