Tegning og animasjon

Tegning med <canvas>

Ved å bruke taggen canvas kan du bruke en rekke kommandoer til å tegne og skrive på HTML-siden.

Prøv selv!
Prøv å endre koden selv
JS Bin

Animasjon med GSAP

Det finnes flere gode biblioteker for å lage animasjoner med JavaScript. Et av disse er GSAP (GreenSockAnimationPlatform) som gjør det mulig å lage flere typer animasjoner med enkle kommandoer.

For å komme i gang må du inkludere filen TweenMax.min.js html-dokumentet, på samme måte som du lenker til en ekstern javascriptfil. Du kan enten laste ned filen på din egen maskin, eller du kan lenke til den direkte ved å legge inn følgende kode i HTML-dokumentet:

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script>

Du har nå tilgang til flere nye kommandoer som er spesiallaget for å enkelt kunne animere ved hjelp av CSS.

Se selv! - Animasjon med GSAP

Prøv selv!

Trykk på JS Bin-ikonet for større skjerm, eller bruk fanene for å se mer kode. Du kan selv endre på koden hvis du ønsker.

JS Bin

  • TweenMax.to betyr at vi skal animere til et nytt sted
  • minDiv er id til diven som skal animeres
  • 2 er varigheten til animasjonen
  • Koden mellom { } er CSS-koder
  • rotation: 360 betyr at diven skal roteres 360 grader
  • x:100 betyr at diven skal flyttes 100 piksler mot høyre.