Widget Moving Stars

Space... the final frontier, holds secret and deep mistery, veiled in cloud and crowned with unimagined stars.Widget Moving Stars merupakan widget untuk merubah tampilan background website / blog menjadi background yang dinamis dengan tampilan bintang-bintang yang bergerak dan membuat seolah-olah sedang menjelajah luar angkasa, seperti yang di film star trek the next generation. Contoh widget seperti yang terlihat dipostingan ini. Kelemahan widget ini adalah warna latar yang selalu gelap tapi jangan khawatir saya akan buatkan versi keduanya dengan latar menggunakan gambar tapi tetap dengan bintang-bintang yang bergerak seperti ini, untuk sementara yaa cukuplah dengan warna hitam solid sebagai latarnya.

Cara Pemasangan :

Klik "More Options" selector box kemudian klik "Layout" setelah itu pilih "Add a Gadget" kemudian pilih "HTML/JavaScript", seperti gambar dibawah ini.

Copy-paste kode berikut ini di kotak postingan gadget.

<script> if(typeof(jQuery) == 'undefined'){document.write("<scr" + "ipt type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></scr" + "ipt>");} </script> <script> $('body').append("<style>html, body {background-color: #000000; color: #fff; margin: 0px; padding: 0px; width: 100%; height: 100%;}<\/style>"); function flyingStar(oindex) { this.reset = function () { //choose a random bearing and azimuth between -45 degs and 45 degs (the maximum viewing angle of the virtual viewport), //and represent a point 100 units away in that direction as 3D cartesian coordinates var hAng = ( Math.PI / 2.1 ) * ( Math.random() - 0.5 ), vAng = ( Math.PI / 2.1 ) * ( Math.random() - 0.5 ); //not too close to the centre (so we don't 'hit' it) if( Math.abs( hAng ) < 0.02 && Math.abs( vAng ) < 0.02 ) { return false; } this.x = 100 * Math.sin( hAng ) * Math.cos( vAng ); //across screen this.y = 100 * Math.cos( hAng ) * Math.cos( vAng ); //into screen this.z = 100 * Math.sin( vAng ); //up screen return true; } //now draw the stars if( document.layers ) { //relieve netscape 4 bug $('body').append( '<layer name="ostarNum'+oindex+'" height="1" width="1" bgcolor="#ffffff" left="0" top="0" clip="0,0,2,2"> </layer>' ); } else { $('body').append( '<div id="ostarNum'+oindex+'" style="position:absolute;height:1px;width:1px;clip:rect(0px 2px 2px 0px);background-color:#ffffff;left:0px;top:0px;"></div>' ); } } function getRefToDivNest( divID, oDoc ) { if( !oDoc ) { oDoc = document; } if( document.layers ) { if( oDoc.layers[divID] ) { return oDoc.layers[divID]; } else { for( var x = 0, y; !y && x < oDoc.layers.length; x++ ) { y = getRefToDivNest(divID,oDoc.layers[x].document); } return y; } } if( document.getElementById ) { return document.getElementById(divID); } if( document.all ) { return document.all[divID]; } return document[divID]; } function moveStars() { var getWidth = 0, getHeight = 0, getScrollHeight = 0, getScrollWidth = 0; //find screen settings for all variations. doing this every time allows for resizing and scrolling if( typeof( window.innerWidth ) == 'number' ) { getWidth = window.innerWidth; getHeight = window.innerHeight; } else { if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { getWidth = document.documentElement.clientWidth; getHeight = document.documentElement.clientHeight; } else { if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { getWidth = document.body.clientWidth; getHeight = document.body.clientHeight; } } } if( typeof( window.pageYOffset ) == 'number' ) { getScrollHeight = pageYOffset; getScrollWidth = pageXOffset; } else { if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) { getScrollHeight = document.body.scrollTop; getScrollWidth = document.body.scrollLeft; } else { if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { getScrollHeight = document.documentElement.scrollTop; getScrollWidth = document.documentElement.scrollLeft; } } } if( getHeight < 30 || getWidth < 30 ) { return; } //screen is too small, this will only make a mess for( var x = 0; x < flyStarArray.length; x++ ) { var theStar = getRefToDivNest('ostarNum'+x); if( !theStar ) { return; } //not loaded yet or not supported if( theStar.style ) { theStar = theStar.style; } var oPix = document.childNodes ? 'px' : 0; do { //virtual viewport can see max 90deg horizontally and vertically. Check the star is not offscreen var tmpleft = Math.round( ( getWidth / 2 ) + ( ( ( getWidth > getHeight ) ? getWidth : getHeight ) * ( Math.atan( flyStarArray[x].x / flyStarArray[x].y ) / ( Math.PI / 2 ) ) ) ); var tmptop = Math.round( ( getHeight / 2 ) + ( ( ( getWidth > getHeight ) ? getWidth : getHeight ) * ( Math.atan( flyStarArray[x].z / flyStarArray[x].y ) / ( Math.PI / 2 ) ) ) ); } while( ( tmpleft < 0 || tmpleft > getWidth - 20 || tmptop < 0 || tmptop > getHeight - 30 ) && flyStarArray[x].reset() ); //move the star to the position on the virtual viewport that we would see it (in 3D space) theStar.left = ( tmpleft + getScrollWidth ) + oPix; theStar.top = ( tmptop + getScrollHeight ) + oPix; //resize the star if the browser supports it var oDist = Math.sqrt( Math.pow( flyStarArray[x].x, 2 ) + Math.pow( flyStarArray[x].y, 2 ) + Math.pow( flyStarArray[x].z, 2 ) ); oDist = ( oDist < 30 ) ? 3 : ( oDist < 60 ) ? 2 : 1; theStar.width = oDist + oPix; theStar.height = oDist + oPix; theStar.pixelWidth = oDist; theStar.pixelHeight = oDist; if( theStar.clip && theStar.clip.bottom ) { theStar.clip.bottom = oDist; theStar.clip.right = oDist; } else { theStar.clip = 'rect( 0px ' + oDist + 'px ' + oDist + 'px 0px )'; } //move the star closer to the virtual viewport, giving the appearance of movement flyStarArray[x].y -= 4; } } var flyStarArray = []; for( var x = 0; x < 30; x++ ) { flyStarArray[x] = new flyingStar(x); do { flyStarArray[x].reset(); } while( !flyStarArray[x].x ); } window.setInterval('moveStars();',75); </script>