پی سی دی ال این سری از پست های خودش رو برای شما به لودینگ سایت اختصاص داده. همان طور که تو پست های قبلی از خوبی های کد لودینگ سایت گفتم ، لودینگ سایت باعث میشه سایت نمای بدی که هنگام لود شدن داره رو به کاربر نشون نده و صبر کنه تا سایت به صورت کامل لود بشه. این لودینگ هم نمای بسیار زیبایی داره. همان طور که داخل عکس میبینید به صورت قطره پاش از انتهای نوار لود تیکه های رنگی پخش میشه و رنگش هم نسبت به مکانی که هست تغییر میکنه.
تنها کاری که باید انجام بدهید این هست که کد زیر را در ابتدای سایت خود قرار دهید و نیاز به هیچ گونه ویرایشی ندارد.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | <!--Code by : WwW.Pi3iDL.cOM--> <style> #pi3idlloader{ margin: 0; padding: 0; background: #272822; position:fixed; top:0px; left:0px; width:100%; height:100%; } .canvass{ position: absolute; top: calc(50% - 50px); top: -webkit-calc(50% - 100px); left: calc(50% - 200px); left: -webkit-calc(50% - 200px); } </style> <div id="pi3idlloader"><canvas class="canvass"></canvas></div> <h2><a href="http://pi3idl.com">کد لودینگ سایت </a></h2> <script> particle_no = 25; window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); var canvas = document.getElementsByTagName("canvas")[0]; var ctx = canvas.getContext("2d"); var counter = 0; var particles = []; var w = 400, h = 200; canvas.width = w; canvas.height = h; function reset(){ ctx.fillStyle = "#272822"; ctx.fillRect(0,0,w,h); ctx.fillStyle = "#171814"; ctx.fillRect(25,80,350,25); } function progressbar(){ this.widths = 0; this.hue = 0; this.draw = function(){ ctx.fillStyle = 'hsla('+this.hue+', 100%, 40%, 1)'; ctx.fillRect(25,80,this.widths,25); var grad = ctx.createLinearGradient(0,0,0,130); grad.addColorStop(0,"transparent"); grad.addColorStop(1,"rgba(0,0,0,0.5)"); ctx.fillStyle = grad; ctx.fillRect(25,80,this.widths,25); } } function particle(){ this.x = 23 + bar.widths; this.y = 82; this.vx = 0.8 + Math.random()*1; this.v = Math.random()*5; this.g = 1 + Math.random()*3; this.down = false; this.draw = function(){ ctx.fillStyle = 'hsla('+(bar.hue+0.3)+', 100%, 40%, 1)';; var size = Math.random()*2; ctx.fillRect(this.x, this.y, size, size); } } bar = new progressbar(); function draw(){ reset(); counter++ bar.hue += 0.8; bar.widths += 2; if(bar.widths > 350){ if(counter > 215){ reset(); bar.hue = 0; bar.widths = 0; counter = 0; particles = []; } else{ bar.hue = 126; bar.widths = 351; bar.draw(); } } else{ bar.draw(); for(var i=0;i<particle_no;i+=10){ particles.push(new particle()); } } update(); } function update(){ for(var i=0;i<particles.length;i++){ var p = particles[i]; p.x -= p.vx; if(p.down == true){ p.g += 0.1; p.y += p.g; } else{ if(p.g<0){ p.down = true; p.g += 0.1; p.y += p.g; } else{ p.y -= p.g; p.g -= 0.1; } } p.draw(); } } function animloop() { draw(); requestAnimFrame(animloop); } animloop(); window.onload = function() {var pi3idl=document.getElementById('pi3idlloader');pi3idl.style.display='none';pi3idl.style.visibility='hidden';} </script> <!--Code by : WwW.Pi3iDL.cOM--> |