HTML TUTORIALS

Html stands for Hyper Text Markup Language. We will be sharing codes for you to use it on your website too, enjoy !

SNOW EFFECT

<script type="text/javascript"> // <![CDATA[ var colour="#fff"; // what colour are the blobs var speed=66; // speed of animation, lower is faster var blobs=20; // how many blobs are in the jar var charc=String.fromCharCode(9679); /***************************\ * Blobs in a Jar Effect * * (c)2012 mf2fm web-design * * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * \***************************/ window.onload=fill_the_jar; var div; var xpos=new Array(); var ypos=new Array(); var zpos=new Array(); var dx=new Array(); var dy=new Array(); var dz=new Array(); var blob=new Array(); var swide=800; var shigh=600; function fill_the_jar() { var i, dvs; div=document.createElement('div'); dvs=div.style; dvs.position='fixed'; dvs.left='0px'; dvs.top='0px'; dvs.width='1px'; dvs.height='1px'; document.body.appendChild(div); set_width(); for (i=0; i<blobs; i++) { add_blob(i); jamjar(i); } } function add_blob(ref) { var dv, sy; dv=document.createElement('div'); dv.appendChild(document.createTextNode(charc)); sy=dv.style; sy.position='absolute'; sy.textAlign="center"; if (navigator.appName=="Microsoft Internet Explorer") { sy.fontSize="10px"; sy.width="100px"; sy.height="100px"; sy.paddingTop="40px"; sy.color=colour; } else sy.color='rgba(0,0,0,0)'; ypos[ref]=Math.floor(shigh*Math.random()); dy[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2); xpos[ref]=Math.floor(swide*Math.random()); dx[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2); zpos[ref]=Math.random()*20; dz[ref]=(0.5+Math.random())*(Math.random()>.5?.5:-.5); blob[ref]=dv; div.appendChild(blob[ref]); set_blob(ref); } function rejig(ref, xy) { if (xy=='y') { dx[ref]=(0.5+Math.random())*sign(dx[ref]); dy[ref]=(0.5+Math.random())*-sign(dy[ref]); } else { dx[ref]=(0.5+Math.random())*-sign(dx[ref]); dy[ref]=(0.5+Math.random())*sign(dy[ref]); } } function sign(a) { if (a<0) return (-2); else if (a>0) return (2); else return (0); } function set_blob(ref) { var sy; sy=blob[ref].style; sy.top=ypos[ref]+'px'; sy.left=xpos[ref]+'px'; if (navigator.appName=="Microsoft Internet Explorer") { sy.filter="glow(color="+colour+",strength="+zpos[ref]+")"; sy.fontSize=30-zpos[ref]+"px"; } else { sy.textShadow=colour+' 0px 0px '+zpos[ref]+'px'; sy.fontSize=40+zpos[ref]+'px'; } } function jamjar(ref) { if (ypos[ref]+dy[ref]<-50 || ypos[ref]+dy[ref]>shigh) rejig(ref, 'y'); ypos[ref]+=dy[ref]; if (xpos[ref]+dx[ref]<-50 || xpos[ref]+dx[ref]>swide) rejig(ref, 'x'); xpos[ref]+=dx[ref]; if (zpos[ref]+dz[ref]<0 || zpos[ref]+dz[ref]>20) dz[ref]=-dz[ref]; zpos[ref]+=dz[ref]; set_blob(ref); setTimeout("jamjar("+ref+")", speed); } window.onresize=set_width; function set_width() { var sw_min=999999; var sh_min=999999; if (document.documentElement && document.documentElement.clientWidth) { if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth; if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight; } if (typeof(self.innerWidth)!="undefined" && self.innerWidth) { if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth; if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight; } if (document.body.clientWidth) { if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth; if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight; } if (sw_min==999999 || sh_min==999999) { sw_min=800; sh_min=600; } swide=sw_min; shigh=sh_min; } // ]]> </script>

FIREWORK

<script type="text/javascript"> <body style='background-color:black'> <canvas id='myCanvas' width='800' height='800'></canvas> <script> const max_fireworks = 5, max_sparks = 50; let canvas = document.getElementById('myCanvas'); let context = canvas.getContext('2d'); let fireworks = []; for (let i = 0; i < max_fireworks; i++) { let firework = { sparks: [] }; for (let n = 0; n < max_sparks; n++) { let spark = { vx: Math.random() * 5 + .5, vy: Math.random() * 5 + .5, weight: Math.random() * .3 + .03, red: Math.floor(Math.random() * 2), green: Math.floor(Math.random() * 2), blue: Math.floor(Math.random() * 2) }; if (Math.random() > .5) spark.vx = -spark.vx; if (Math.random() > .5) spark.vy = -spark.vy; firework.sparks.push(spark); } fireworks.push(firework); resetFirework(firework); } window.requestAnimationFrame(explode); function resetFirework(firework) { firework.x = Math.floor(Math.random() * canvas.width); firework.y = canvas.height; firework.age = 0; firework.phase = 'fly'; } function explode() { context.clearRect(0, 0, canvas.width, canvas.height); fireworks.forEach((firework,index) => { if (firework.phase == 'explode') { firework.sparks.forEach((spark) => { for (let i = 0; i < 10; i++) { let trailAge = firework.age + i; let x = firework.x + spark.vx * trailAge; let y = firework.y + spark.vy * trailAge + spark.weight * trailAge * spark.weight * trailAge; let fade = i * 20 - firework.age * 2; let r = Math.floor(spark.red * fade); let g = Math.floor(spark.green * fade); let b = Math.floor(spark.blue * fade); context.beginPath(); context.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',1)'; context.rect(x, y, 4, 4); context.fill(); } }); firework.age++; if (firework.age > 100 && Math.random() < .05) { resetFirework(firework); } } else { firework.y = firework.y - 10; for (let spark = 0; spark < 15; spark++) { context.beginPath(); context.fillStyle = 'rgba(' + index * 50 + ',' + spark * 17 + ',0,1)'; context.rect(firework.x + Math.random() * spark - spark / 2, firework.y + spark * 4, 4, 4); context.fill(); } if (Math.random() < .001 || firework.y < 200) firework.phase = 'explode'; } }); window.requestAnimationFrame(explode); } </script>
PS: These codes are not made by us, but we happened to like it very much and decided to share with you all too. Do email arikaartcastle@gmail.com if you want us to credit or remove, thanks.

With love, ARIKA ART CASTLE

CONTENT

Click below to read her blog

✧✧

ABOUT
BEHIND THE SITE
CONTACT
GALLERY
PERSONALIZED NAME CARD
PHOTO ALBUM
️ HOME

✧✧

ART TUTORIALS
ART QUOTES
COLORING PAGES
DRAW WITH US
FREE ART
MY DRAWINGS
RANDOM DRAWINGS

✧✧

HIGH TEA IDEAS LIST
HTML TUTORIALS
JOBS IDEAS LIST
MUSIC
MY JOURNAL
PRINTABLES
PAST LAYOUTS
SHOP NOW

✧✧

PIXEL & ART
PHOTOGRAPHY
MANICURE
FOOD

SITE STATS

OWNER: ARIKA TAN

CO-OWNER: ALEX TAN

SITE FOUNDED: 14/3/22

HOST: NEOCITIES

TOPICS UNDER: ART, PHOTOGRAPHY, MANICURE, FOOD, PERSONAL THOUGHTS

FB / IG is kept confidential to protect the owner privacy. But you can visit blog at Tumblr. All artwork is originally drawn by the owner, unless stated otherwise.