Flashおよびライブコーディングのファイル

Flashのデータは/flashディレクトリ・ライブコーディングのデータは/codingディレクトリに格納されています。
写真はぱくたその素材を利用しています。

スライド

web_animation.pdfに書き出しています。
または下記の手順でブラウザで確認できます。

環境構築

yarn
yarn dev

yarn build // 本番用ビルド

簡単に構造説明

• src/App.svelte: メインです。
  • src/routes/*.svelte: 各ページのコンポーネントです。
    基本的にコンテンツはsrc/constants/の{同一ファイル}.jsに記述して、レイアウトに関する記述がメインです。
  • src/constants/page.js: svelte-spa-router用のルーティング設定です。
  • src/components/page/
    • Page.svelte: src/routes/*.svelteのコンテンツを読み込んでいます
    • FadePage.svelte: ページ切り替えしたときにFadeの効果が付与されます。上記Page.svelteをwrapしています。
    • ScalePage.svelte: ページ切り替えしたときにScaleの効果が付与されます。上記Page.svelteをwrapしています。

ページの操作方法

• 右キーで次のページへ、左キーへ前のページへ
• Enterキーでページ内でコンテンツ切り替え。ページによってはあるなしがあるので、テキトウに操作してみるとわかります

注意事項

• transitionを使用する際に、transition:fadeのようにすると、inとoutの両方が適用されます。
  そうするとunmountされる際（今回の場合、ページ切り替え時）に、outのtransitionが実行されます。
  なので、in:fadeのような記述の仕方をしています。