Membuat Sebuah Login Form dengan Latar Background Javascript Polygonizr

Kita akan membuat sebuah laman login yang menggunakan Javascript, dimana jQuery ini akan diaplikasikan sebagai tampilan background.

Membuat File Javascript Polygonzr

Buat sebuah file Javascript yang isinya adalah sebagai berikut :

/*
 * ----------------------------------------------------------------------------
 * "THE BEER-WARE LICENSE" (Revision 42):
 * <Martin@Revoltera.com> wrote this file. As long as you retain this notice,
 * you can do whatever you want with this stuff. If we meet some day, and you
 * think this stuff is worth it, you can buy me a beer in return.
 * ----------------------------------------------------------------------------
 */

!function(t){class e{constructor(e,n){this.$this=e,this.settings=t.extend({},t.fn.polygonizr.defaults,n),this.canvasElement=document.createElement("canvas"),this.$this.append(this.canvasElement),this.ctx=this.canvasElement.getContext("2d"),this.m_nodeMovementDistance=this.settings.nodeMovementDistance;const s={Animation:{EASING_LINEAR:"linear",EASING_EASEIN:"easeIn",EASING_EASEOUT:"easeOut",EASING_EASEINOUT:"easeInOut",EASING_ACCELERATE:"accelerateDecelerate",EASING_DESCENDING:"descendingEntrance"}};function i(t,e,n,o,a){switch(t){case s.Animation.EASING_LINEAR:return e/a*(o-n)+n;case s.Animation.EASING_EASEIN:return e/=a,(o-n)*Math.pow(e,2)+n;case s.Animation.EASING_EASEOUT:return-(o-n)*(e/=a)*(e-2)+n;case s.Animation.EASING_EASEINOUT:return(e/=a/2)<1?(o-n)/2*Math.pow(e,2)+n:-(o-n)/2*((e-1)*(e-1-2)-1)+n;case s.Animation.EASING_ACCELERATE:return(e/=a/2)<1?(o-n)/2*Math.pow(e,3)+n:(o-n)/2*(Math.pow(e-2,3)+2)+n;case s.Animation.EASING_DESCENDING:return(e/=a/2)<1?(o-n)/Math.pow(e,3)+n:(o-n)/(Math.pow(e-2,3)+2)+n;default:return i(s.Animation.EASING_LINEAR,e,n,o,a)}}function o(t,e){return Math.sqrt(Math.pow(t.currentX-e.currentX,2)+Math.pow(t.currentY-e.currentY,2))}this.setupClusterNodes=function(){this.nodes=[];for(let t=0;t<this.settings.numberOfNodes+this.settings.numberOfUnconnectedNode;t++){let e={x:0,y:0};if(this.settings.randomizePolygonMeshNetworkFormation?(e.x=Math.random()*this.settings.canvasWidth,e.y=Math.random()*this.settings.canvasHeight):e=this.settings.specifyPolygonMeshNetworkFormation(t),0==this.settings.nodeOverflow){let t=this.settings.nodeMovementDistance+this.settings.nodeDotSize,n=this.settings.canvasHeight-t,s=this.settings.canvasWidth-t;this.m_nodeMovementDistance=Math.min(Math.min(this.settings.nodeMovementDistance,s),Math.min(this.settings.nodeMovementDistance,n)),e.x=Math.floor(e.x+t>this.settings.canvasWidth?s:e.x),e.x=Math.floor(e.x-t<t?t:e.x),e.y=Math.floor(e.y+t>this.settings.canvasHeight?n:e.y),e.y=Math.floor(e.y-t<t?t:e.y)}this.nodes.push({currentX:e.x,originX:e.x,startX:e.x,targetX:e.x,currentY:e.y,originY:e.y,startY:e.x,targetY:e.y}),this.nodes[t].UnconnectedNode=this.settings.numberOfUnconnectedNode>t}for(let t=0;t<this.nodes.length;t++){let e=[],n=this.nodes[t];for(let t=0;t<this.nodes.length;t++){let s=this.nodes[t];if(n!=s)for(let t=0;t<this.settings.nodeRelations;t++){if(null==e[t]){e[t]=s;break}if(o(n,s)<o(n,e[t])){e[t]=s;break}}}n.Closest=e,this.setAlphaLevel(n)}},this.Animator=function(t,e,n,s,o,a,l){function r(s){m||(m=s),p||(p=s);let i=Math.floor((s-m)/(1e3/n));if(f<i){f=i;let n=s-p;n<=c?(v&&(!function(){for(let e in t.nodes){let n=t.calculateNewTargetPossition(t.nodes[e].originX),s=t.calculateNewTargetPossition(t.nodes[e].originY);t.nodes[e].targetX=n,t.nodes[e].targetY=s,t.nodes[e].startX=t.nodes[e].currentX,t.nodes[e].startY=t.nodes[e].currentY,t.nodes[e].NodePrediction=t.settings.nodeDotPrediction>0&&Math.random()<=t.settings.nodeDotPrediction}}(),v=!1),h(w&&a?t.Constants.Animation.EASING_DESCENDING:e,n,c),l&&"function"==typeof l&&l(t)):n>=c+d&&(p=s,v=!0,w=!1)}A=g(r)}function h(e,n,s){for(let o in t.nodes)t.nodes[o].currentX=i(e,n,t.nodes[o].startX,t.nodes[o].targetX,s),t.nodes[o].currentY=i(e,n,t.nodes[o].startY,t.nodes[o].targetY,s)}this.isRunning=!1,this.start=function(){this.isRunning||(this.isRunning=!0,c=1e3*s,d=1e3*o,A=g(r))},this.stop=function(){this.isRunning&&(u(A),this.isRunning=!1,m=null,f=-1)};let c,d,g=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame,u=window.cancelAnimationFrame||window.mozCancelRequestAnimationFrame||window.webkitCancelRequestAnimationFrame||window.oCancelRequestAnimationFrame||window.msCancelRequestAnimationFrame,m=null,f=-1,A=null,p=null,v=!0,w=!0},this.calculateNewTargetPossition=function(t){return t+(Math.random()<.5?-Math.random():Math.random())*this.m_nodeMovementDistance},this.setAlphaLevel=function(t){let e=Math.sqrt(Math.pow(this.settings.canvasWidth,2)+Math.pow(this.settings.canvasHeight,2)),n=0;for(let e in t.Closest)n+=o(t.Closest[e],t.Closest[(e+1)%t.Closest.length]);let s=1-n/e;t.lineAlpha=s*this.settings.nodeLineAlpha,t.dotAlpha=s*this.settings.nodeDotAlpha,s>.85?(t.fillAlpha=s*this.settings.nodeFillAlpha,t.lineAlpha=this.settings.nodeLineAlpha,t.dotAlpha=this.settings.nodeDotAlpha):s<.8&&s>.7?(t.fillAlpha=.5*s*this.settings.nodeFillAlpha,t.lineAlpha=this.settings.nodeLineAlpha,t.dotAlpha=this.settings.nodeDotAlpha):t.fillAlpha=s<.7&&s>.4?.2*s*this.settings.nodeFillAlpha:0},this.draw=function(t){t.ctx.clearRect(0,0,t.settings.canvasWidth,t.settings.canvasHeight);for(let e in t.nodes)t.drawLines(t,t.nodes[e]),t.drawCircle(t,t.nodes[e])},this.drawLines=function(t,e){if(!(!e.lineAlpha>0&&!e.fillAlpha>0))for(let n in e.Closest){let s=0==e.Closest[n].UnconnectedNode&&0==e.UnconnectedNode,i=1==t.settings.ConnectUnconnectedNodes&&o(e,e.Closest[n])<=t.settings.ConnectUnconnectedNodesDistance;(s||i)&&(e.lineAlpha>0&&t.drawLineNodeConnection(t,e,n),t.settings.nodeFillSapce&&e.fillAlpha>0&&1==s&&t.drawFillNodeConnection(t,e,n))}},this.drawLineNodeConnection=function(t,e,n){t.ctx.beginPath(),t.ctx.moveTo(e.currentX,e.currentY),t.ctx.lineTo(e.Closest[n].currentX,e.Closest[n].currentY),t.ctx.strokeStyle="rgba("+t.settings.nodeLineColor+","+e.lineAlpha+")",t.ctx.stroke()},this.drawFillNodeConnection=function(t,e,n){if(t.ctx.beginPath(),t.ctx.moveTo(e.currentX,e.currentY),t.ctx.lineTo(e.Closest[n].currentX,e.Closest[n].currentY),t.ctx.lineTo(e.Closest[(n+1)%e.Closest.length].currentX,e.Closest[(n+1)%e.Closest.length].currentY),null!==t.settings.nodeFillGradientColor&&isFinite(e.currentX)&&isFinite(e.currentY)&&isFinite(e.Closest[n].currentX)&&isFinite(e.Closest[n].currentY)){var s=t.ctx.createLinearGradient(e.currentX,e.currentY,e.Closest[n].currentX,e.Closest[n].currentY);s.addColorStop(0,"rgba("+t.settings.nodeFillColor+","+e.fillAlpha+")"),s.addColorStop(1,"rgba("+t.settings.nodeFillGradientColor+", "+e.fillAlpha+")"),t.ctx.fillStyle=s}else t.ctx.fillStyle="rgba("+t.settings.nodeFillColor+","+e.fillAlpha+")";t.ctx.fill()},this.drawCircle=function(t,e){if(!(!e.dotAlpha>0)){if(t.ctx.beginPath(),t.ctx.arc(e.currentX,e.currentY,t.settings.nodeDotSize,0,2*Math.PI,!1),t.ctx.fillStyle="rgba("+t.settings.nodeDotColor+", "+e.dotAlpha+")",t.settings.nodeGlowing&&(t.ctx.shadowBlur=10,t.ctx.shadowColor="rgba("+t.settings.nodeDotColor+", "+e.dotAlpha+")"),1==e.NodePrediction){let n=t.settings.nodeDotSize*Math.PI,s=n/2;t.ctx.font=n+"px Arial",t.ctx.strokeRect(e.targetX-s,e.targetY-s,n,n),t.ctx.fillText(e.targetX+", "+e.targetY,e.targetX+n,e.targetY-s)}t.ctx.fill()}}}refresh(){this.clear(),this.canvasElement.width=this.settings.canvasWidth,this.canvasElement.height=this.settings.canvasHeight,this.canvasElement.style.position=this.settings.canvasPosition,this.canvasElement.style.top=this.settings.canvasTop,this.canvasElement.style.bottom=this.settings.canvasBottom,this.canvasElement.style.right=this.settings.canvasRight,this.canvasElement.style.left=this.settings.canvasLeft,this.canvasElement.style.zIndex=this.settings.canvasZ,this.setupClusterNodes(),this.animation=new this.Animator(this,this.settings.nodeEase,this.settings.animationFps,this.settings.duration,this.settings.restNodeMovements,this.settings.nodeFancyEntrance,this.draw),this.animation.start()}start(){void 0!==this.animation&&this.animation.start()}stop(){void 0!==this.animation&&this.animation.stop()}clear(){this.stop(),void 0!==this.ctx&&this.ctx.clearRect(0,0,this.settings.canvasWidth,this.settings.canvasHeight)}options(t){if(void 0!==this.$this)for(let e in t)this.settings[e]=t[e]}destroy(){void 0!==this.$this&&(this.clear(),this.$this.removeData("polygonizr"),delete this.$this)}}t.fn.polygonizr=function(n){let s="object"==typeof n&&n;return this.each(function(){let i=t(this),o=i.data("polygonizr");o?s&&o.options(s):(o=new e(i,s),i.data("polygonizr",o)),"string"==typeof n?o[n]():o.refresh()})},t.fn.polygonizr.defaults={restNodeMovements:1,duration:3,nodeMovementDistance:100,numberOfNodes:15,numberOfUnconnectedNode:25,ConnectUnconnectedNodes:!0,ConnectUnconnectedNodesDistance:250,nodeDotSize:2.5,nodeEase:"easeOut",nodeFancyEntrance:!1,randomizePolygonMeshNetworkFormation:!0,specifyPolygonMeshNetworkFormation:null,nodeRelations:3,animationFps:30,nodeDotColor:"200, 200, 200",nodeLineColor:"150, 150, 150",nodeFillColor:"100, 100, 100",nodeFillGradientColor:null,nodeFillAlpha:.5,nodeLineAlpha:.5,nodeDotAlpha:1,nodeDotPrediction:0,nodeFillSapce:!0,nodeOverflow:!0,nodeGlowing:!1,canvasWidth:t(this).width(),canvasHeight:t(this).height(),canvasPosition:"absolute",canvasTop:"auto",canvasBottom:"auto",canvasRight:"auto",canvasLeft:"auto",canvasZ:"auto"}}(jQuery);

Simpan file di atas dengan nama poligonizr.min.js. Masukan file tersebut ke dalam folder src.

Buat File index.html Sebagai Halaman Utama

Buat sebuah file index.html yang isinya adalah file untuk menampilkan form login. Form login ini dibuat dari Bootstrap.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
	
	 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
	 <!-- Polygonizr JS -->
	 <script src="src/polygonizr.min.js"></script>
    <title>Template Login dengan Background Polygonizr</title>
    
    <style>
   	 html,
    	 body {
      		background-color: rgb(30, 30, 30);
      		height: 100%;
      		width: 100%;
      		margin: 0;
    	}
    	
    	body {
		display: flex;    	
    	}
    	
    	.wa {
		margin: auto;  
		background: transparent;  	
    	} 

    	#site-landing {
     		position: relative;
      	        height: 100%;
      	        width: 100%;
      	        background-color: rgb(30, 30, 30);
    }
     .judul-atas {
     		color: orange;
     		font-size: 36px;
     }
     .form-group {
     		color: whitesmoke; 
     }
   </style>
  </head>
  
  <body>
  			<div class="container" id="site-landing">
			<script>
    					let $sitelading = $('#site-landing');
   					 $sitelading.polygonizr();

    					// Update size.
    					$(window).resize(function () {
     					$sitelading.polygonizr("stop");
      				$sitelading.polygonizr({
       				canvasHeight: $(this).height(),
       				canvasWidth: $(this).width()
      			});

 			     $sitelading.polygonizr("refresh");
  				  });	  
  			</script>  			
				<h1 class="mt-4 ml-5"> </h1><br>
				   <div class="card col-md-6 wa">
  					 	<div class="card-body mt-5">
    						<h2 class="card-title judul-atas" ><b>Login Form</b></h2>
   							 <p class="card-text"></p>	
   							 <form>
  										<div class="form-group">
   									 <label for="exampleInputEmail1">Email</label>
  										 <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
  										  <small id="emailHelp" class="form-text text-muted">Alamat email dirahasiakan.</small>
 										 </div>
  										<div class="form-group">
   									 <label for="exampleInputPassword1">Password</label>
   									 <input type="password" class="form-control" id="exampleInputPassword1">
 										 </div>
									  <button type="submit" class="btn btn-success float-right">LOG IN</button>
								</form>						 
  						</div>	 	
					</div>
					

		
		 </div>
	 
    <!-- Optional JavaScript -->
    <!-- Popper.js, then Bootstrap JS -->
   
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

Hasil Akhir Halaman Login

Untuk melihat hasil dari halaman login yang telah dibuat, maka klik saja file html-nya.

Selesai.

Download Source Code

File ini adalah hasil fork dari Github. Download disini