Workshop im Rahmen des Moduls Web Technologien: View Transitions, Scroll-Driven Animations und mehr. Hier gibt es die Slides zum Workshop.
Die Inhalte für diese Demo Anwendungsbeispiel sind dem Cranach Digital Archive entliehen und nur für diesen Workshop bestimmt. Sie dürfen nicht verändert, weitergegeben oder veröffentlicht werden. Danke! 🙌🏽
Die Challenges sind im Wurzelverzeichnis als einzelne Markdown Dateien abgelegt. Folgende Challenge machen wir gemeinsam:
Des Weiteren stellen folgende Challenges zur Verfügung:
- Implement Broken Grid Layouts
- Add View Transitions
- Animate Masterpiece Roll
- Animate Cranach Facts
- Animate Wall of Masterpieces
- Design Popover Transition
Im Verzeichnis masterpieces-demo befindet sich die fertige Version des digitalen Cranach Masterpieces Coffeetable Book. Im Verzeichnis masterpieces-playground ist die Version in der gearbeitet werden soll.
Es reicht in das jeweile Verzeichnis zu gehen und einen Web-Server zu starten, z.B. den Embedded Server von Visual Studio Code. Alternativ kann aber auch im jeweiligen Verzeichnis der Version ein npm install ausgeführt werden und ein Dev Server via npm run dev gestartet werden. In diesem Fall wird auch Stylelint installiert und gestartet.
Falls der Linter nervt kann der Server auch via npm run quiet gestartet werden. Dann eben ohne stylelint.
Das ist in der jeweiligen Challenge beschrieben. Grundsätzlich sind aber nur Änderungen in den CSS Dateien zu machen. Diese finden sich im Verzeichnis assets/styles/.
- The Lean Web
- What's new in the Web, Google I/O Talk from Rachel Andrew
- Multi-page application View Transitions are here, Google I/O Talk from Bramus Van Damme
- The state of CSS and Web UI, Google I/O Talk from Una Kravets
Folgende Playgrounds zum Workshop sind auf Codepen verfügbar: