De HTML-code voor een Trailing Cursor Effect

HTML is een flexibel instrument voor tekst en beeldmanipulatie, maar de animatie mogelijkheden zijn beperkt. Om een ​​geanimeerde cursor kaart op je webpagina te maken, ook enkele CSS en JavaScript in uw HTML-code. Een snelle controle van de meeste moderne websites toont een toenemend gebruik van CSS, Java, JavaScript en PHP om haar taken moeilijk of onmogelijk kan worden uitgevoerd met alleen HTML worden getild.

The Pointer

De truc achter de slepende cursor effect is om een ​​kleine afbeelding bestand te maken in de vorm van een pointer. Deze afbeelding bestand wordt weergegeven in een reeks van het scherm coördinaten op basis van de positie van de aanwijzer. Terwijl een imagebestand van een pointer is een logische keuze, kan elke kleine afbeelding worden gebruikt. Sla het image-bestand in dezelfde map als de HTML-bestanden voor uw pagina's.

CSS

Om uw geanimeerde cursor in het lichaam inhoud van de webpagina en de weg van alle menu's te houden waar ze problemen kunnen veroorzaken, plaatst u een CSS-definitie in de <head> -gedeelte van uw HTML-code. Stel de X-as overflow woning aan "verborgen" binnen de <style> tag.

JavaScript

Voeg wat JavaScript-code in de <body> sectie van uw HTML om de positie van de cursor te volgen. Verklaren een array om de laatste cursorpositie te houden en weergeven van uw afbeelding op de locatie opgeslagen in het array. De grootte van de matrix bepaalt het aantal beelden getoond. Met andere woorden, de grootte van de matrix bepaalt de lengte van het spoor van de cursor.

Opruimen

Een belangrijke eigenschap voor een trailing cursor is het maken van het pad verdwijnen wanneer de aanwijzer niet meer beweegt. Een statische pad dat blijft op het scherm wanneer de aanwijzer stopt clutters de pagina en kunnen bezoekers van uw site te verwarren. Stel een time-out op uw "mousemove" event in de display functie om uw scherm vrij van ongewenste artefacten te houden.