Kouzlíme s DHTML: Kuličky na pružince

Tomáš Holčík 12. dubna 2000

Další
článek Již za týden se spouští Prague Internet World SDÍLET NA FACEBOOKU TWEETNOUT

Moc hezkou věc jsem našel. Možná jste již viděli různé efektíky pobíhající za myší, když vlezete na nějakou stránku na Internetu, ale gumové kuličky si mne opravdu získaly.

Moc hezkou věc jsem našel. Možná jste již viděli různé efektíky pobíhající za myší, když vlezete na nějakou stránku na Internetu, ale gumové kuličky si mne opravdu získaly. Pokud čtete tento článek v Internet Exploreru nebo Navigatoru 4 až 4.72 (verze 6 ne), pobíhají vám již po obrazovce určitě modré kuličky. Originál tohoto skriptu najdete na DynamicDrive a při vkládání do své stránky nechejte i kredity autorům, zaslouží si to. Kód můžete do stránky umístit v podstatě kamkoli, doporučuje se těsně za <BODY>. Na Živě ho máme tady uprostřed kvůli tahání textů z databáze, ale to nemusí být váš případ.

Stačí z následujícího boxíku vzít kompletní text (Ctrl-A, Ctrl-C) a přenést ho do vaší stránky. Můžete si dát také vlastní obrázek místo našeho puclíku. Rychlost kuliček je závislá na složitosti stránky a výkonu počítače, na jednodušších stránkách to běhá opravdu svižně.

/*
Elastic Trail script (By Philip Winston @ pwinston@yahoo.com, URL:http://members.xoom.com/ebullets)
Script featured on Dynamicdrive.com
For this and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

// Thanks to Troels Jakobsen <tjak@get2net.dk>
// for fix which makes it work when the page is scrolled

var nDots = 7;
if (document.all&&window.print)
document.body.style.cssText="overflow-x:hidden;overflow-y:scroll"
var Xpos = 0;
var Ypos = 0;

// fixed time step, no relation to real time
var DELTAT = .01;
  // size of one spring in pixels
var SEGLEN = 10;
  // spring constant, stiffness of springs
var SPRINGK = 10;
  // all the physics is bogus, just picked stuff to
  // make it look okay
var MASS = 1;
var GRAVITY = 50;
var RESISTANCE = 10;
  // stopping criterea to prevent endless jittering
  // doesn't work when sitting on bottom since floor
  // doesn't push back so acceleration always as big
  // as gravity
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
  // BOUNCE is percent of velocity retained when 
  // bouncing off a wall
var BOUNCE = 0.75;

var isNetscape = navigator.appName=="Netscape";

// always on for now, could be played with to
  // let dots fall to botton, get thrown, etc.
var followmouse = true;

var dots = new Array();
init();

function startanimate() {	
    setInterval("animate()", 20);
}

// This is to line up the bullets with actual LI tags on the page
// Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why
// Still doesn't work great
function setInitPositions(dots)
{
    // initialize dot positions to be on top 
    // of the bullets in the <ul>
    var startloc = document.all.tags("LI");
    var i = 0;
    for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
        dots[i+1].X = startloc[i].offsetLeft
            startloc[i].offsetParent.offsetLeft - DOTSIZE;
        dots[i+1].Y = startloc[i].offsetTop +
            startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
    }
    // put 0th dot above 1st (it is hidden)
    dots[0].X = dots[1].X;
    dots[0].Y = dots[1].Y - SEGLEN;
}

// just save mouse position for animate() to use
function MoveHandler(e)
{
    Xpos = e.pageX;
    Ypos = e.pageY;	  
    return true;
}

// just save mouse position for animate() to use
function MoveHandlerIE() {
    Xpos = window.event.x + document.body.scrollLeft;
    Ypos = window.event.y + document.body.scrollTop;	  
}

if (isNetscape) {
    document.captureEvents(Event.MOUSEMOVE);
    document.onMouseMove = MoveHandler;
} else {
    document.onmousemove = MoveHandlerIE;
}

function vec(X, Y)
{
    this.X = X;
    this.Y = Y;
}

// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring)
{
    var dx = (dots[i].X - dots[j].X);
    var dy = (dots[i].Y - dots[j].Y);
    var len = Math.sqrt(dx*dx + dy*dy);
    if (len > SEGLEN) {
        var springF = SPRINGK * (len - SEGLEN);
        spring.X += (dx / len) * springF;
        spring.Y += (dy / len) * springF;
    }
}

// end code hiding -->
</script>

Diskuze (27) › Další článek: Již za týden se spouští Prague Internet World

Témata článku: Software, Internet, Programování, Move, Elsa, Spring, Just, Endless, Mass, Trail, Still, Hidden, Justo, Real, Work, Forum, Save, Gravity

Micro:bit V2: Tuto destičku plnou čipů dokáže naprogramovat i vaše babička

Doporučujeme

Lednový Computer

Jak prodloužit výdrž notebooku

Velké testy: gamepady a inkoustové tiskárny

Důkladný test Sony Playstation 5

Kupte si časopis nebo předplatné

O webu

Napište nám | Redakce | Inzerce

Kouzlíme s DHTML: Kuličky na pružince

Micro:bit V2: Tuto destičku plnou čipů dokáže naprogramovat i vaše babička

Neuvěřitelná soudní tahanice: Majitel ukradeného notebooku shání na HitHitu peníze na soudní výlohy

AMD se směje a Nvidia má problém. Nová hra Godfall vyžaduje v maximální kvalitě 12 GB grafické paměti

Google našel ve Windows 10 a Chromu zcela novou díru. Hackeři ji podle něj aktivně využívali

Ochráncům autorských práv se nelíbí stahování videí z YouTubu, zasáhli proti oblíbenému nástroji

26 užitečných rozšíření pro Chrome: Naučte prohlížeč nové věci

Šéf Spotify: Budeme zdražovat. Náš obsah se zlepšil

AMD uvádí grafické karty Radeon RX 6800, 6800 XT a 6900 XT. Útočí přímo na modely od Nvidie

Správce úloh je přežitek – Windows 10 získají nový nástroj pro ukončování procesů aplikací

Elon Musk podpořil Signal jako náhradu WhatsAppu. Aplikaci okamžitě zavalili uživatelé

Doporučujeme

Lednový Computer

O webu

Test Amazfit GTS 2: Po rozchodu vždycky nejvíc trpí děti

Pikaču, sporák, nebo kokos. iPhony 11 jsou terčem vtipů, vybrali jsme ty nejlepší

Bělorusové nejsou šťastní, říká Bříza. Tlak sponzorů jednání urychlil

FOTO: Plážové sporty. Díky roztleskávačkám pastva pro (mužské) oči

Držte si úroveň, zkuste být zdvořilá aneb Když se ministryni financí nelíbí kritika

Za nezvládnutý registrační systém na očkování budou padat... ne hlavy, ale vyznamenání!

Malý Londýn, včetně virtuálního Davida Beckhama. V Macau se otevírá kopie britské metropole

OBRAZEM: Hasičský záchranný sbor si připomíná 20 let zásahů. Hořící Výstaviště, 93 dopravních nehod v jedné

K mání je naftová Octavia RS druhé generace s výkonem 400 koní

Mercedes-Benz AA Vision: Trojcípá hvězda do lehčího terénu debutovala před 25 lety