Hai teman-temaan! Kalian sedang mencari kode ucapan tahun baru yang bisa dipasang di website kalian. Berikut ini script kode berjalan untuk ucapan tahun baru dari html dan javascript.
Pertama-tama buat dulu folder baru dengan nama terserah kalian dan buat file htmlnya dengan nama index.html dan masukkan kode dibawah ini:
<html><head></head>
<body>
<script type="text/javascript" src="index.js"></script>
</body></html>Kemudian simpan.
Setelah itu buat file javascriptnya dengan nama index.js dan buka dengan teks editor kesayangan kalian. Kemudian masukkan kode dibawah ini.
let chars, particles, canvas, ctx, w, h, current;
let duration = 5000;
let str = ['Happy', 'New', 'Year' , '2021'];
init();
resize();
requestAnimationFrame(render);
addEventListener('resize', resize);function makeChar(c){
let tmp = document.createElement('canvas');
let size = tmp.width = tmp.height = w<400?200:300;
let tmpCtx = tmp.getContext('2d');
tmpCtx.font = 'bold '+size+'px Arial';
tmpCtx.fillStyle = 'white';
tmpCtx.textBaseline = "middle";
tmpCtx.textAlign = "center";
tmpCtx.fillText(c, size/2, size/2);
let char2 = tmpCtx.getImageData(0,0,size,size);
let char2particles = [];
for(var i=0; char2particles.length< particles; i++){
let x = size*Math.random();
let y = size*Math.random();
let offset = parseInt(y)*size*4 + parseInt(x)*4;
if(char2.data[offset])
char2particles.push([x-size/2,y-size/2])
}
return char2particles;
}function init() {
canvas = document.createElement('canvas');
document.body.append(canvas);
document.body.style.margin = 0;
document.body.style.overflow = 'hidden'
document.body.style.background = 'black'
ctx = canvas.getContext('2d');
}
function resize() {
w = canvas.width = innerWidth;
h = canvas.height = innerHeight;
particles = innerWidth<400? 55 : 99;
}function makeChars(t) {
let actual = parseInt(t / duration) % str.length;
if (current === actual)
return
current = actual;
chars = [...str[actual]].map(makeChar);
}
function render(t) {
makeChars(t);
requestAnimationFrame(render);
ctx.fillStyle = '#00000010'
ctx.fillRect(0, 0, w, h);
chars.forEach((pts,i) => firework(t, i, pts));
}function firework(t, i, pts) {
t -= i*200;
let id = i + chars.length*parseInt(t - t%duration);
t = t % duration / duration;
let dx = (i+1)*w/(1+chars.length);
dx += Math.min(0.33, t)*100*Math.sin(id);
let dy = h*0.5;
dy += Math.sin(id*4547.411)*h*0.1;
if (t < 0.33) {
rocket(dx, dy, id, t*3);
} else {
ledakan(pts, dx, dy, id, Math.min(1, Math.max(0, t-0.33)*2));
}
}
function rocket(x, y, id, t) {
ctx.fillStyle = 'white';
let r = 2-2*t + Math.pow(t, 15*t)*16;
y = h - y*t;
circle(x, y, r)
}
function ledakan(pts, x, y, id, t) {
let dy = (t*t*t)*20;
let r = Math.sin(id)*1 + 3
r = t<0.5 ? (t+0.5)*t*r:r-t*r
ctx.fillStyle = `hsl(${id*55}, 55%, 55%)`;
pts.forEach((xy,i) => {
if (i%20 === 0)
ctx.fillStyle = `hsl(${id*55}, 55%, ${55+t*Math.sin(t*55+i)*45}%)`;
circle(t*xy[0] + x, h - y + t*xy[1] + dy, r)
});
}
function circle(x,y,r) {
ctx.beginPath();
ctx.ellipse(x, y, r, r, 0, 0, 6.283);
ctx.fill();
}
alert ("Selamat Tahun Baru 2021 dari Condro22");Setelah itu simpan.
Coba jalankan dengan men-drag file index.html tadi ke browser kesayangan kalian dan lihat hasilnya seperti dibawah ini :
Kamu bisa merubah tulisan yang ada didalamnya dengan merubah kode yang berwarna merah pada file javascriptnya.
Kamu bisa mengupload file tersebut ke website kamu dengan subdomain baru kamu via ftp. Dan mengirimnya ketemen-temen kamu.
Semoga tutorialnya bermanfaat, selamat mencoba.
2 Comments
Selamat tahun Baru yhhh
Semoga menjadi anak yang takut akan tuhan dan semakin maju dalam pelayanan amin..
aamiin kakak fitri