1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

JavaScript Dancing Animation Stars Cursor

Discussion in 'Web Development' started by JavaScriptBank, May 4, 2010.

  1. JavaScriptBank

    JavaScriptBank Banned

    One of the many cursor codes in our JavaScript library, this one creates dancing stars animating around your pointers mouse. This cur... detail at
    javascriptbank.com/
    [​IMG]
    Demo:
    ​

    javascriptbank.com/dancing-animation-stars-cursor.html/en/

    ​
    How to setup

    Step 1: Place JavaScript below in your HEAD section
    JavaScript
    Code:
    <script language="JavaScript">
<!--
/*
Dancing Stars cursor (Submitted by Kurt at kurt.grigg@virgin.net)
Modified and permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

if (document.all){
document.write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">')
for (xy=0;xy<7;xy++)
document.write('<div style="position:relative;width:3px;height:3px;background:#FFFF00;font-size:2px;visibility:visible"></div>')
document.write('</div>')
}

if (document.layers)
{window.captureEvents(Event.MOUSEMOVE);}
var yBase = 200;
var xBase = 200;
var yAmpl = 10;
var yMax = 40;
var step = .2;
var ystep = .5;
var currStep = 0;
var tAmpl=1;
var Xpos = 1;
var Ypos = 1;
var i = 0;
var j = 0;

if (document.all)
{
  function MoveHandler(){
  Xpos = document.body.scrollLeft+event.x;
  Ypos = document.body.scrollTop+event.y;
  }
  document.onmousemove = MoveHandler; 
}

else if (document.layers)
{
  function xMoveHandler(evnt){
  Xpos = evnt.pageX;
  Ypos = evnt.pageY;
  }
  window.onMouseMove = xMoveHandler;
}



function animateLogo() {
if (document.all)
{
 yBase = window.document.body.offsetHeight/4;
 xBase = window.document.body.offsetWidth/4;
}
else if (document.layers)
{
 yBase = window.innerHeight/4 ;
 xBase = window.innerWidth/4;
}

if (document.all)
{
var totaldivs=document.all.starsDiv.all.length
 for ( i = 0 ; i < totaldivs ; i++ )
 {
var tempdiv=document.all.starsDiv.all[i].style
  tempdiv.top = Ypos + Math.cos((20*Math.sin(currStep/20))+i*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
  tempdiv.left = Xpos + Math.sin((20*Math.sin(currStep/20))+i*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
 }
}

else if (document.layers)
{
 for ( j = 0 ; j < 7 ; j++ ) 
 {
var templayer="a"+j
  document.layers[templayer].top = Ypos + Math.cos((20*Math.sin(currStep/20))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
  document.layers[templayer].left =Xpos + Math.sin((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
 }
}
currStep += step;
setTimeout("animateLogo()", 15);
}
animateLogo();
// -->
</script>
    Step 2: Copy & Paste HTML code below in your BODY section
    HTML
    Code:
    <LAYER NAME="a0" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a1" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a2" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a3" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a4" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a5" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a6" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>

    JavaScript Spotlight - JavaScript Validate E-Mail - AJAX Page Content Loader​
     
    JavaScriptBank, May 4, 2010
    #1
  2. chithra

    chithra New Member

    ya nice to see.
     
    chithra, May 25, 2010
    #2
  3. proximity3

    proximity3 Banned

    JavaScript Word Clock: Spell the Time

    .NET Framework (160)
    ADO.NET (118)
    Ajax (3523)
    ALL (2162)
    Android (26)
    Asp.Net (473)
    C# (466)
    C言語 (14)
    Ibatis.NET (3)
    IIS (42)
    JAVA (2410)
    Javascript/Xhtml/Css (2855)
    LAMP (753)
    LINQ (53)
    MS SQL Server (871)
    MYSQL (1597)
    Oracle (1426)
    PHP (647)
    Python (86)
    Ruby/Ruby on Rails (693)
    SEO対策 (3)
    SharePoint (40)
    VB/VB.net (29)
    WCF/WPF (3)
    Wordpress (69)
    アーカイブス
    July 2010 (348)
    June 2010 (1585)
    May 2010 (1410)
    April 2010 (1756)
    March 2010 (930)
    February 2010 (507)
    January 2010 (78)
    December 2009 (16)
    November 2009 (11)
    October 2009 (23)
    September 2009 (44)
    August 2009 (52)
    July 2009 (9)
    June 2009 (11)
    May 2009 (5)
    April 2009 (22)
    March 2009 (14)
    February 2009 (17)
    January 2009 (20)
    December 2008 (5)
    November 2008 (14)
    October 2008 (17)
    September 2008 (29)
    August 2008 (42)
    July 2008 (13)
    June 2008 (4)
    May 2008 (7)
    April 2008 (10)
    March 2008 (18)
    February 2008 (14)
    January 2008 (82)
    December 2007 (22)
    November 2007 (45)
    October 2007 (155)
    September 2007 (212)
    August 2007 (4)
    July 2007 (7)
    June 2007 (3)
    May 2007 (4)
    April 2007 (3)
    March 2007 (2)
    January 2007 (8)
    December 2006 (1)
    November 2006 (6)
    October 2006 (2)
    September 2006 (2)
    August 2006 (1)
    July 2006 (2)
    June 2006 (1)
    May 2006 (2)
    April 2006 (4)
    March 2006 (1)
    February 2006 (2)
    January 2006 (2)
    December 2005 (2)
    November 2005 (2)
    October 2005 (2)
    September 2005 (1)
    July 2005 (1)
    May 2005 (1)
    April 2005 (1)
    March 2005 (1)
    February 2005 (1)
    0 (1)
    タグクラウド
    .net access Ajax amsterdam asp asp.net browser c# code css database description developer development dhtml dutch excel experience flash group html JAVA javascript latest linux microsoft MS SQL Server MYSQL open-source Oracle PHP postgre Python Rails ror server sql the-most tutorial VB/VB.net video visual windows world xml
    最近の投稿記事
    jobs.rubynow.com: Ruby on Rails developer wanted
    jobs.rubynow.com: Senior Ruby on Rails Developer Wanted | £50000 …
    jobs.rubynow.com: Senior Ruby on Rails Developer Wanted | £50000 …
    Ajax Post Save (Scripts) 1.1 – Free Ajax Post Save (Scripts …
    Ajax Post Save (Scripts) 1.1 – Free Ajax Post Save (Scripts …
    IBEE Hosting Introduces Ruby On Rails Hosting Packages In India by …
    jobs.rubynow.com: Fun Consultancy looking for Fantastic RoR fanatics
    Technology Bits: learning XSLT and xml to csv to Oracle or MySQL
    Android 2.2 beats iOS 4 in Javascript performance
    Ajax El Ahly Live Stream
    Android 2.2 Crushes iOS4 in JavaScript Benchmark Tests | Android …
    IBEE Solutions Releases Ruby on Rails Hosting Packages in India …
    Android 2.2 Slaughters iOS 4 in JavaScript Test
    JQuery / Ajax Programmer | Projects for Freelancers
    NetBeans? Eclipse? Oracle chooses both, for different people …
    Meta
    Log in
    Entries RSS
    Comments RSS
    WordPress.org
    __________________________________________________

     
    proximity3, Jul 8, 2010
    #3