Nummering animeren

Status
Niet open voor verdere reacties.

Jamie0921

Nieuwe gebruiker
Lid geworden
24 mei 2018
Berichten
2
Dag leden,

Op de pagina online therapie staat een volgorde van therapie starten. Dit zou ik graag willen laten animeren. Welke taal kan ik hiervoor het beste gebruiken? Javascript? Dan weet ik wie ik moet inschakelen namelijk. :)

Hoor het graag, bedankt!
 
animatie kan je mat javafx javascript is te beperkt te zien wat je wil doen .
heel kleine animatie kan met javascript
Onafhankelijk kan je ook svg gebruiken zal meest effectief zijn.
Of gif als er niets dient te veranderen dit is dan zeer klein animaties .

maar eerst wat wil je doen.

Dit neemt niet weg dat ik betwijfel dat een therapie of een animatie ook één persoon zal helpen.
 
Animaties kan je prima in CSS en keyframes maken.
Java is een totaal opzichzelf staande programmeertaal die browsers nu keihard aan het afstoten zijn.

JavaScript is ook heel wat anders dan Java. Maar mogelijk kan je ook wat Javascript nodig hebben.
 
Met php4u eens. CSS is een snelle en goede manier om animaties te maken, tenzij je complexe animaties wilt, dan zal je gebruik moeten maken van librariess.
Paar voorbeeldjes

Een lijst van wat je kan animaten vind je hier (klik). Combineren kan ook.

* aanvulling
Alle moderne browsers ondersteunen css animaties. Bij de wat oudere WebKit browsers (Chrome, Safari) wordt geadviseerd om ook de -webkit- variant in de css te zetten, die zou je over een jaar weg kunnen halen. In het voorbeeld hieronder draait de foto halfom en weer terug als je erop klikt/tapt.
Code:
<img src="http://placekitten.com/200/200" alt="Foto" />

img {
  display: block;
  margin: 80px auto;
}
img:active {
  -webkit-animation: DraaiRond 2s ease-in-out;
          animation: DraaiRond 2s ease-in-out;
}
@-webkit-keyframes DraaiRond {
  0%   { -webkit-transform: rotate(0deg); }
  50%  { -webkit-transform: rotate(180deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@keyframes DraaiRond {
  0%   { -webkit-transform: rotate(0deg);   transform:rotate(0deg); }
  50%  { -webkit-transform: rotate(180deg); transform:rotate(180deg); }
  100% { -webkit-transform: rotate(0deg);   transform:rotate(0deg); }
}

0% is het begin van de animatie en 100% is het einde van de animatie. Daartussen kan je verschillende animaties en css stijlen opgeven. Om te zorgen dat het op alle browsers goed werkt zal je minstens begin (0%) en einde (100%) moeten opgeven.

Suc6. Have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan