tbz-repos/aktuelle.kurse
1
0
Fork 0
mirror of https://gitlab.com/harald.mueller/aktuelle.kurse.git synced 2024-11-24 02:31:58 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Harald G. Mueller 2021-05-19 20:48:33 +00:00
parent 957052bb3c
commit 3aa43ad21f
1 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
m152/h/README.md
View File

@ -1,26 +1,30 @@
# Aufgabe M152-h: Animationen erstellen (anim-CSS, anim-GIF, SVG, Keyframes, Transitions)
Zeitbedarf: minimal 180 min, eher das Doppelte
# Aufgabe M152-h: Animationen erstellen (anim-CSS, anim-GIF, SVG, Keyframes, Transitions, Canvas)
Zeitbedarf: minimal 180 min, eher das Doppelte oder Dreifache
Übersicht über Techniken
- https://yalantis.com/blog/web-animation-technologies-and-tools
## 1.) Animationen mit CSS
1a.) Lesen Sie Kapitel 4 aus dem Buch (S. 98-121)
https://bscw.tbz.ch/bscw/bscw.cgi/d31695006/SaewertRiempp2019_Digital-Storytelling-im-Web_9783658230555.pdf
- https://bscw.tbz.ch/bscw/bscw.cgi/d31695006/- SaewertRiempp2019_Digital-Storytelling-im-Web_9783658230555.pdf
1b.) Schauen Sie sich das Video dieses Web-Entwicklers an
https://www.youtube.com/watch?v=AAsybyVjXss (11 min)
- https://www.youtube.com/watch?v=AAsybyVjXss (11 min)
1.c) Und zeigen Sie auf **3 separaten** HTML-Seiten (oder .php) **je eine** der gezeigten Animationsarten und erklären Sie auf der selben Seite, wie diese funktionieren.
1c.) Und zeigen Sie auf **3 separaten** HTML-Seiten (oder .php) **je eine** der gezeigten Animationsarten und erklären Sie auf der selben Seite, wie diese funktionieren.
(machen Sie zunächst dafür mal eine eigene Seite z.B. "cssanimation.html" und verlinken Sie diese aus "index.html" her über ein Menü-Punkt)
## 2.) Animietes GIF
Nehmen Sie eine Bilderserie (ca 8-12 kleine aufeinanderfolgende Bilder / vorher mit Irfanview herunterrechnen damit es nicht zu gross wird) und erstellen Sie ein animirtes Gif. Es gibt verschiedene Tools dafür. Es gibt auch Videosoftware, die ein Video auf ein animiertes GIG herunterrechnen können.
- https://gif-erstellen.com
- https://gif-erstellen.online-umwandeln.de
- https://www.netzwelt.de/download/foto-grafik/animierte-gifs/index.html
*_Binden Sie alles in Ihre Webseite ein und beschreiben Sie kurz, wie Sie das gemacht/erstellt haben._*
@ -32,8 +36,25 @@ Weitere Unterlagen
## 3.) SVG
Studieren Sie die Links und versuchen Sie SVG für sich anzuwenden und zu dokumentieren auf Ihrer WebSite.
- https://inkscape.org/de/release/inkscape-1.0
- https://bscw.tbz.ch/bscw/bscw.cgi/31745068
- https://bscw.tbz.ch/bscw/bscw.cgi/d32656958/70_Animated-SVG-Beispiel.svg
- https://www.youtube.com/watch?v=ttwUKpzKYLw&list=PL055Epbe6d5bQubu5EWf_kUNA3ef_qbmL&index=6
- https://wiki.selfhtml.org/wiki/SVG/Elemente/Grundformen
- https://greensock.com/ https://greensock.com/cheatsheet
## 4.) Keyframes und Transitions
- https://developer.mozilla.org/de/docs/Web/CSS/@keyframes
## 5.) Canvas
- https://bscw.tbz.ch/bscw/bscw.cgi/31747503
- https://developer.mozilla.org/de/docs/Web/Guide/HTML/Canvas_Tutorial/Basic_animations
- https://james-priest.github.io/100-days-of-code-log-r2/CH12-Canvas.html
- https://wiki.selfhtml.org/wiki/JavaScript/Canvas
## 6.) Scroll-Animations
- https://bscw.tbz.ch/bscw/bscw.cgi/d31695006/SaewertRiempp2019_Digital-Storytelling-im-Web_9783658230555.pdf (S. 175 ff)
- https://bscw.tbz.ch/bscw/bscw.cgi/32670484?op=edit&textedit=Abbrechen%20und%20Quelltext%20bearbeiten&refresh_op=preview
- https://bscw.tbz.ch/bscw/bscw.cgi/32670484
- https://bscw.tbz.ch/bscw/bscw.cgi/d32670490-9/*/*/*/*/*/*/*/*/*/scrollActivated.html