كريات مضيئة تنبثق من وسط المدونة...اداة رائعة

السلام عليكم ورحمة الله اليوم جئتكم بأداة جديدة ستزيد من اعجاب الزوار بمدونتكم فهي عبارة عن كريات صغيرة يمكن ان تنبثق في وسط الصفحة وتعطي لها جمالا واترككم مع المعاينة اما تركيبها في المدونة فهو سهل ولا يحتاج الى تعقيد وسأشرحه في اسفل المعاينة

المعاينة المباشرة

 لوحة القيادة >>  تصميم  >>  صفحة العناصر  >> إضافة أداة الجافا سكربت

  قم بنسخ الكود التالي والصقه في الاداة:

<script type="text/javascript">

// <![CDATA[

var speed=33; // lower number for faster

var warp=3; // from 1 to 10

var stars=100; // number of stars

var colour="#66FF66"; // colour of stars

var position=0; // set to '-1' for stars to appear behind text on page

/****************************

* Star Warp Effect *

* (c) 2005 mf2fm web-design *

* http://www.mf2fm.com/rv *

* Tutorial by Polskahackrew *

****************************/

var i;

var strs=new Array();

var strx=new Array();

var stry=new Array();

var stdx=new Array();

var stdy=new Array();

var swide=800;

var shigh=600;

warp/=100;

window.onload=function() { if (document.getElementById) {

var b, s, temp;

set_width();

b=document.createElement("div");

s=b.style;

s.position="absolute";

s.zIndex=position;

b.setAttribute("id", "bod");

document.body.appendChild(b);

set_scroll();

for (i=0; i<stars; i++) {

strs[i]=document.createElement("div");

strs[i].style.backgroundColor=colour;

strs[i].style.overflow="hidden";

strs[i].style.position="absolute";

stdy[i]=Math.random()*4-2;

stdx[i]=Math.random()*6-3;

temp=Math.random()*100;

strx[i]=swide/2+temp*stdx[i];

stry[i]=shigh/2+temp*stdy[i];

if (Math.abs(stdx[i])+Math.abs(stdy[i])>2.66) {

strs[i].style.width="2px";

strs[i].style.height="2px";

}

else {

strs[i].style.width="1px";

strs[i].style.height="1px";

}

b.appendChild(strs[i]);

}

setInterval("warp_drive()", speed);

}}

function warp_drive() {

for (i=0; i<stars; i++) {

stry[i]+=stdy[i];

strx[i]+=stdx[i];

stdx[i]*=1+warp;

stdy[i]*=1+warp;

if (stry[i]>0 && stry[i]<shigh-3 && strx[i]>0 && strx[i]<swide-3) {

strs[i].style.left=Math.floor(strx[i])+"px";

strs[i].style.top=Math.floor(stry[i])+"px"

}

else {

strx[i]=swide/2;

stry[i]=shigh/2;

stry[i]+=stdy[i]=Math.random()*4-2;

strx[i]+=stdx[i]=Math.random()*6-3;

if (Math.abs(stdx[i])+Math.abs(stdy[i])>2.66) {

strs[i].style.width="2px";

strs[i].style.height="2px";

}

else {

strs[i].style.width="1px";

strs[i].style.height="1px";

}

}

}

}

window.onresize=set_width;

function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth-13;

shigh=self.innerHeight-13;

}

else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

else {

swide=800;

shigh=600;

}

swide-=2;

shigh-=2;

}

window.onscroll=set_scroll;

function set_scroll() {

var sleft, sdown;

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

var s=document.getElementById("bod").style;

s.top=sdown+"px";

s.left=sleft+"px";

}

// ]]>

</script>

يمكنكم التعديل على لون الكريات وذلك بتغيير الكود الذي باللون الاخضر  66FF66 ولقد ادرجت موقع اكواد الالوان بالاسفل ويمكنكم اختيار كود اللون المناسب
        
           

روابط هذا المـــوضوع قــابلــة للنــــسخ
URL
HTML

تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا

fortek