HTML-koden for en etterfølgende Markør Effect

HTML er et fleksibelt verktøy for tekst og bildemanipulering, men sine animasjonsmuligheter er begrenset. For å lage en animert markøren løype på websiden, inkluderer noen CSS og Javascript i HTML-koden. En rask inspeksjon av de fleste moderne nettsteder avslører en økende bruk av CSS, Java, PHP og Javascript for å oppnå de oppgaver som er vanskelig eller umulig å utføre med HTML alene.

The Pointer

Trikset bak den bakre markøren effekten er å skape en liten bildefil i form av en peker. Denne bildefilen vises i en rekke skjermkoordinater basert på pekeren posisjon. Mens en bildefil av en peker er et logisk valg, kan noen lite bilde skal brukes. Lagre bildefilen i samme katalog som HTML-filer for sidene dine.

CSS

For å holde animerte markøren i kroppen innholdet på websiden og bort fra noen menyer der det kan føre til problemer, plassere en CSS definisjonen i <head> -delen av HTML-koden. Sett X-aksen flow egenskapen til "skjult" inne i <style> -taggen.

Javascript

Legg noen Javascript-kode i <body> -delen av HTML for å spore posisjonen til markøren. Erklærer en matrise for å holde den siste markørposisjon og vise bildet i stedet lagret i matrisen. Størrelsen på array bestemmer antall bilder som vises. Med andre ord, størrelsen av matrisen bestemmer lengden av markøren spor.

Rydde opp

En viktig egenskap for en etterfølgende markør gjør stien forsvinner når pekeren stopper å bevege seg. En statisk sti som forblir på skjermen når pekeren stopper rote siden og kan forvirre de besøkende. Sett en timeout på "mousemove" hendelse inne i visningsfunksjonen for å holde skjermen fri for uønskede gjenstander.