(The speaker list is slow/heavy)
スピーカーの画像の一覧は一つ一つ CSS を使って色が変わります。
Every image of the speaker list receives a color transformation treatment:
|
filter: brightness(75%) grayscale(10%) sepia(0%) |
そのエフェクトは結構 CPU/GPU を使っています。Android 端末は何回も Firefox が落ちました。
解決方法を考えると二つの方法を考えました。表示の前にフィルターされているバーションがあれば、軽い CSS のフェードエフェクトを使って同じエフェクトできると思います。
This effect uses a lot of CPU/GPU. My Android's firefox crashed more than once.
There are other ways to achieve the same effect: If we have two versions of the same image we can get the same effect by doing a simple cross-fade.
二つのバーションを用意できる方法
Ways we could create those two versions:
- ビルドスクリプト。
npm run build の時に Node プロゼスを使って同じエフェクトの画像を用意する。
Build script: with npm run build a node process generates a image with the same filter.
- クライアントのJS でフィルターがつけている画像を Canvas を使って用意する。
Client script: Prepare a pre-filtered canvas image before displaying the image in the DOM.
- 手作業。誰かが全ての画像を手作業で作っている (あんまりよろしくない方法です、自動に動いていないし、ドキュメンテーションが必要となっています）
Hand work: One could just simply create all by hand. (I dont like this variant, because its not automated and needs documentation.)
(The speaker list is slow/heavy)
スピーカーの画像の一覧は一つ一つ CSS を使って色が変わります。
Every image of the speaker list receives a color transformation treatment:
nodefest.github.com/2018/src/scss/main.scss
Line 1078 in 8674259
そのエフェクトは結構 CPU/GPU を使っています。Android 端末は何回も Firefox が落ちました。
解決方法を考えると二つの方法を考えました。表示の前にフィルターされているバーションがあれば、軽い CSS のフェードエフェクトを使って同じエフェクトできると思います。
This effect uses a lot of CPU/GPU. My Android's firefox crashed more than once.
There are other ways to achieve the same effect: If we have two versions of the same image we can get the same effect by doing a simple cross-fade.
二つのバーションを用意できる方法
Ways we could create those two versions:
npm run buildの時に Node プロゼスを使って同じエフェクトの画像を用意する。Build script: with
npm run builda node process generates a image with the same filter.Client script: Prepare a pre-filtered canvas image before displaying the image in the DOM.
Hand work: One could just simply create all by hand. (I dont like this variant, because its not automated and needs documentation.)