Anime.js: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 1: | Zeile 1: | ||
Anime.js ist ein Animation Framework. | Anime.js ist ein Animation Framework. | ||
| − | Links | + | == Links == |
| + | |||
https://animejs.com/ | https://animejs.com/ | ||
https://www.youtube.com/watch?v=uRDLFXxihgc - guter Einstieg | https://www.youtube.com/watch?v=uRDLFXxihgc - guter Einstieg | ||
https://codepen.io/rexjbull/pen/RwRRezq Beispiel mit Scrollmagic | https://codepen.io/rexjbull/pen/RwRRezq Beispiel mit Scrollmagic | ||
| − | Quickstart | + | == Quickstart == |
| + | |||
* create anime object | * create anime object | ||
anime({}); | anime({}); | ||
| Zeile 15: | Zeile 17: | ||
targets: '.square', | targets: '.square', | ||
translateX: '250px', | translateX: '250px', | ||
| + | }); | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | === Mehr Properties === | ||
| + | |||
| + | <syntaxhighlight lang="javascript"> | ||
| + | anime({ | ||
| + | targets: '.square', | ||
| + | translateX: '250px', | ||
| + | rotateZ: 360, | ||
| + | scale: 2, | ||
| + | loop: true, | ||
| + | duration: 5000, | ||
}); | }); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Version vom 16. Januar 2021, 07:42 Uhr
Anime.js ist ein Animation Framework.
Links
https://animejs.com/ https://www.youtube.com/watch?v=uRDLFXxihgc - guter Einstieg https://codepen.io/rexjbull/pen/RwRRezq Beispiel mit Scrollmagic
Quickstart
- create anime object
anime({});
- target (CSS selector)
- css properties die animiert werden sollen
anime({
targets: '.square',
translateX: '250px',
});
Mehr Properties
anime({
targets: '.square',
translateX: '250px',
rotateZ: 360,
scale: 2,
loop: true,
duration: 5000,
});
