-
1:ID:09rcoT · 2018-06-17

#質問 最近ウェブサイトでよく見かける技術について知りたいのですが、
こちらのウェブサイト(https://n-ken.net/)の画像部分が表示される際に
青一色→画像が表示される
のような動きはどうやって動かしているのでしょうか、、?
そういった動きが実装できる便利なjsがあるのでしょうか?
それともcss3でしょうか?

実装について詳しく教えていただけますと嬉しいです。
よろしくお願いいたします。

27 件の回答

2:ID:MFR4Hb · 2018-06-17

俺も知りたす

3:ID:FAEzkl · 2018-06-17

ソースの一番下のjsですな

4:ID:69pcPi · 2018-06-17

ソースを見るまでもなく割と簡単だと思う
複雑なものではないので、ぜひ頑張って完成させてください
でも、CSSがわからないとかそういうレベルならば、買う(作ってもらう)ほうが早いですよ

5:ID:3bXi5O · 2018-06-17

jsとcssで3分もあればできるだろこんなん

6:ID:ECdydI · 2018-06-18

3分は無理だけど15分あればいける

7:ID:9UxBQ4 · 2018-06-18

このサイトでも使われてるね
https://www.m-hand.co.jp

8:ID:CkJJ2T · 2018-06-18

::beforeとかのpsuedo-classを重ねてtransitionで幅を動かせばいけると思う

9:ID:xiD1FK · 2018-06-18

画像の上にabsoで青ブロック配置、t0l0のw0。画像はop0。
スクロール検知してTweenMaxのtoでw100%。Tween終了時画像op1、少し時間おいてTweenMaxのset使って青ブロックt0r0に。to使ってw0に。おわり。

10:ID:kUVMoZ · 2018-06-18

可変対応含めると想定より時間かかるから気をつけてね。
クソメンドクセーから。

11:ID:E8Zyjp · 2018-06-18

すぐできるわ!と啖呵切ってる連中ほど、具体的にどうやるか言えなくてワロタw
jsなんて発火させるスイッチだけしか必要ないし、レスポンシブ対応も楽だよ。
疑似要素でも、空divでも良いから、隠したい要素の上にベタ塗りのボックスを絶対位置で用意して、
transform: scaleXでベタ塗り要素を1から0に小さくしていく。
その際に、transform-origin: 100% 50% 0;を指定しないと、縮小が中央から始まるので注意。
可視範囲に入ってから動くように、アニメーションをclassに入れて、jsで発火。

12:ID:kUVMoZ · 2018-06-18

Re:11
transform-originってあるんだね。
昔、実装したときoverflow:hiddenとJSで再計算したりして手間だったわ。
そろそろCSS3ちゃんと勉強しないといかんね。

13:ID:9nZz7n · 2018-06-18

Re:11
これだと最初に出てくる動きを再現出来てないよ。

15:ID:cCaPFw · 2018-06-18

GIFアニメーションでできるよ

16:ID:93BM6v · 2018-06-18

Re:9
詳細まで記載くださりありがとうございます!
TweenMax、、少し前に使おうとして断念した記憶がありますが、この機会に頑張ってみます!
教えてくださりありがとうございました!

17:ID:93BM6v · 2018-06-18

Re:11
とてもわかりやすく書いてくださりありがとうございます!
今までこの動きをどうやって検索したらいいのかすら不明でしたので、やっと光明が見えたような気がします!
実装できるよう、頑張ってみます!

18:ID:xC9izf · 2018-06-19

Re:11 この程度でドヤ顔して煽るコメ主もなかなかやぞ

19:ID:CwgpCu · 2018-06-19

この動きって名前あるのかな。
クラス名つける時、悩むんだけど...
revealでいいのかな?

20:ID:L6JWtc · 2018-06-19

Re:18
煽られるコメントする方が悪いよね

21:ID:40fNAi · 2018-06-19

Re:19
自分もこの動きの名前知りたいです。

22:ID:YcAreo · 2018-06-19

すいません、便乗で質問。
↑でTweenMaxのやり方と、普通に生のJSとCSSのやり方が挙げられていますが、CSSアニメーションが理解出来ている人は、後者のやり方に自然とたどり着くと思います。
そんなに工数かかるようなことではないと思いますが、それをあえてTweenMaxでやるのは、何か理由があるのでしょうか。
TweenMaxに慣れている人は、そっちのほうが速いとか?
私はTweenMax使ったことないのですが、こういう動きにこだわってる系の事例ではよく使われているのを見かけるので、興味があります。

23:ID:xiD1FK · 2018-06-19

厳密に決めるならここが参考になるかも。Google developerのやつ。
https://goo.gl/ofwmiv

俺も昔はCSS3で実装してたけど、以下の理由で変えた。
・CSSはあくまでビジュアルを作るもの、JSはアニメーションをするものと分けて考えることができる。発火のタイミング等もJSに書いてあるので、ファイルとして見やすい。アニメーションの調整をしたい時はJSファイルだけを見ればいい。
・transitionするプロパティの指定がめんどい。今回のような動きを作る時はall指定ができない。allでいいならCSS3のが楽だけど、プロパティ指定をするなら記述量にそこまで差がでない。とくに、アニメーションが複雑になってタイムラインによって動かしたいプロパティが変化するとかなるとCSS3だとしんどい。
・CSS3のtransitionで書く場合、アニメーション終了時の挙動をJSファイルにtransitionEndを書くことで処理することになるけど、正直これもめんどい。クロスブラウザとフラグが。TweenMaxならアニメーション終了時に関数を実行できる。
・CSSアニメーションとJSって実は挙動が少し異なる。CSSアニメーションだと別タブから戻ってきた時の処理でバグる場合がある。これの対応もめんどいってか、複雑なアニメーションだと対応できない場合もある。
・TweenMaxはJSのアニメーションの中では総合的に見るとパフォーマンスが高いし、記述もわかりやすい。
・TweenMaxはデフォルトで独自easingがあって、それが結構使える。

要するに細かいモーションになるとCSSだと記述も管理もしんどいからJSのが楽で、何かしらをTweenMax等で書くならそれで統一した方がいいよってこと。
異論は認める。

24:ID:xiD1FK · 2018-06-19

Re:23
あれ、、返信切れてた。これ22の返信で。

25:ID:kUVMoZ · 2018-06-19

Re:20
なかなかのクズ発言だなw

26:ID:E8Zyjp · 2018-06-19

Re:25
相手がクズだししかたないよね

27:ID:YcAreo · 2018-06-19

Re:24
ありがとうございます。
すごく腑に落ちました。
ある程度複雑になってくると、TweenMaxのほうが便利なんですね。
先程自分でも調べ直しましたが、Flash時代からあるとのことで、
Flasherの経験がある人はこちらのほうが馴染みやすいんでしょうね。
よく理解できました。ありがとうございます。

28:ID:BwGnC/ · 2018-06-19

Re:22
自分ならJS+CSSでやるかな。何故なら訪問者はコレを見に来てるわけじゃないから時間をかけるべきところは中身だと思うので。

1 件の回答が除外されました。[詳細]
コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る