1:ID:Iy/FLK · 2019-01-15

tt-load-w.pngとtt-load.png（黄色文字）と（白文字）pngを重ねて動かしているのかと思いましたが、
そうすると、文字の間にも動かしている色が見えてしまいます。
宜しくお願い致します。

いいね! 9 あとで

9 件の回答

時系列表示 — 階層表示

2:ID:SSfNYa · 2019-01-15

気になって調べてみました。

1.黄色文字と白文字ははじめからぴったり重ねてある。（文字自体は動かしてない）
2.jsで親divにdata-progressという属性を付与され、ページの読み込みに応じて0~100%と変化している。
3.黄色文字が入っているdiv（.tt-load）にそれ（2）に応じて幅が与えらえている。（gifted.css）
#film-skinned.gifted .pace .pace-progress[data-progress-text="60%"] .tt-wrap .tt-load {
width: 126.96px;
}
というかんじで。
4.その幅からはみ出る場合はoverflow:hiddenとなってる。

つまり、読み込み時60%のときは黄色文字のdivの幅は126.96pxでそれからはみ出る黄色文字は見えなくしてる。
読み込み度合が100に近づくにつれ黄色文字の表示領域が多くなり、最終的に文字は全部黄色になるってかんじ。

説明へただったらごめんなさい。

3:ID:主 · 2019-01-15

ご丁寧にありがとうございました。
同じ様に再現したかったのですが、知識不足の為なかなか難しそうです。

ご説明ありがとうございました。勉強します。

4:ID:Z9Nsap · 2019-01-16

サイト通りのやり方自体は２で済んでるから補足。
もし同じ演出をしたいのなら、別にそのサイトと同じ方法でやる必要はないと思うぞ。
①backgroundで白文字指定したdivと黄色文字指定したdivを重ねて、それぞれbackground-positionでleft指定。
あとは黄色文字の横幅を0から100%にする。
②文字部分透明、それ以外ピンクの画像を用意してその画像の後ろにdiv敷いてbackgroundで黄色指定。
そのdivの横幅を0から100%にする。
③svgで文字を配置してfillで・・・は多分できないだろうから省略。
通信速度としての最適解はもちろんあるけど、それとは別に実装するために自分の持ってる引き出しからコーディングする力があったらいいよね。

5:ID:主 · 2019-01-17

Re:4
4様
ご教授ありがとうございます。似た様な形で
divの擬似要素のbackgroundに黄色指定し、width: 0; → width: 100%にanimationさせ、その上にsvgをclipPathさせ対応しました。

質問サイトはローディングが終わるタイミングと演出の終わりを合わせている様ですが、そこまでは出来ませんでした。
引き出しを増やしたいと思います。ありがとうございました。

6:ID:0Lxra3 · 2019-01-19

問題になってるのは、アニメーションの部分じゃないってまず気づこう。
その上で、CSSでマスクできるって知ってる？

7:ID:mhnCPu · 2019-01-20

4の方のやり方なら何も悩む必要なく再現できそうですが…

8:ID:aj4Lxu · 2019-01-20

デザイン側は開発ツール見ればわかるんだけど、デザイン的なところの話じゃないのでは？
ローディングのインジケーターとしてどう値を受けて表示上の処理をするかってとこでしょ？

9:ID:mhnCPu · 2019-01-21

Re:8
そんなのググったらいくらでも出てくるけどね、、

10:ID:aj4Lxu · 2019-01-22

Re:9
それを言ったらここの全てがググるだけで十分なんだが。

コメントの受付は終了しました。

9 件の回答

一緒に読まれている質問