俺も知りたす
ソースの一番下のjsですな
ソースを見るまでもなく割と簡単だと思う複雑なものではないので、ぜひ頑張って完成させてくださいでも、CSSがわからないとかそういうレベルならば、買う(作ってもらう)ほうが早いですよ
jsとcssで3分もあればできるだろこんなん
3分は無理だけど15分あればいける
このサイトでも使われてるねhttps://www.m-hand.co.jp
::beforeとかのpsuedo-classを重ねてtransitionで幅を動かせばいけると思う
画像の上にabsoで青ブロック配置、t0l0のw0。画像はop0。スクロール検知してTweenMaxのtoでw100%。Tween終了時画像op1、少し時間おいてTweenMaxのset使って青ブロックt0r0に。to使ってw0に。おわり。
可変対応含めると想定より時間かかるから気をつけてね。クソメンドクセーから。
Re:11 transform-originってあるんだね。昔、実装したときoverflow:hiddenとJSで再計算したりして手間だったわ。そろそろCSS3ちゃんと勉強しないといかんね。
Re:11 これだと最初に出てくる動きを再現出来てないよ。
GIFアニメーションでできるよ
Re:9 詳細まで記載くださりありがとうございます！TweenMax、、少し前に使おうとして断念した記憶がありますが、この機会に頑張ってみます！教えてくださりありがとうございました！
Re:11 とてもわかりやすく書いてくださりありがとうございます！今までこの動きをどうやって検索したらいいのかすら不明でしたので、やっと光明が見えたような気がします！実装できるよう、頑張ってみます！
Re:11 この程度でドヤ顔して煽るコメ主もなかなかやぞ
この動きって名前あるのかな。クラス名つける時、悩むんだけど...revealでいいのかな？
Re:18 煽られるコメントする方が悪いよね
Re:19 自分もこの動きの名前知りたいです。
すいません、便乗で質問。↑でTweenMaxのやり方と、普通に生のJSとCSSのやり方が挙げられていますが、CSSアニメーションが理解出来ている人は、後者のやり方に自然とたどり着くと思います。そんなに工数かかるようなことではないと思いますが、それをあえてTweenMaxでやるのは、何か理由があるのでしょうか。TweenMaxに慣れている人は、そっちのほうが速いとか？私はTweenMax使ったことないのですが、こういう動きにこだわってる系の事例ではよく使われているのを見かけるので、興味があります。
厳密に決めるならここが参考になるかも。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等で書くならそれで統一した方がいいよってこと。異論は認める。
Re:23 あれ、、返信切れてた。これ22の返信で。
Re:20 なかなかのクズ発言だなｗ
Re:25 相手がクズだししかたないよね
Re:24 ありがとうございます。すごく腑に落ちました。ある程度複雑になってくると、TweenMaxのほうが便利なんですね。先程自分でも調べ直しましたが、Flash時代からあるとのことで、Flasherの経験がある人はこちらのほうが馴染みやすいんでしょうね。よく理解できました。ありがとうございます。
Re:22 自分ならJS+CSSでやるかな。何故なら訪問者はコレを見に来てるわけじゃないから時間をかけるべきところは中身だと思うので。
27 件の回答
俺も知りたす
ソースの一番下のjsですな
ソースを見るまでもなく割と簡単だと思う
複雑なものではないので、ぜひ頑張って完成させてください
でも、CSSがわからないとかそういうレベルならば、買う(作ってもらう)ほうが早いですよ
jsとcssで3分もあればできるだろこんなん
3分は無理だけど15分あればいける
このサイトでも使われてるね
https://www.m-hand.co.jp
::beforeとかのpsuedo-classを重ねてtransitionで幅を動かせばいけると思う
画像の上にabsoで青ブロック配置、t0l0のw0。画像はop0。
スクロール検知してTweenMaxのtoでw100%。Tween終了時画像op1、少し時間おいてTweenMaxのset使って青ブロックt0r0に。to使ってw0に。おわり。
可変対応含めると想定より時間かかるから気をつけてね。
クソメンドクセーから。
Re:11
transform-originってあるんだね。
昔、実装したときoverflow:hiddenとJSで再計算したりして手間だったわ。
そろそろCSS3ちゃんと勉強しないといかんね。
Re:11
これだと最初に出てくる動きを再現出来てないよ。
GIFアニメーションでできるよ
Re:9
詳細まで記載くださりありがとうございます！
TweenMax、、少し前に使おうとして断念した記憶がありますが、この機会に頑張ってみます！
教えてくださりありがとうございました！
Re:11
とてもわかりやすく書いてくださりありがとうございます！
今までこの動きをどうやって検索したらいいのかすら不明でしたので、やっと光明が見えたような気がします！
実装できるよう、頑張ってみます！
Re:11 この程度でドヤ顔して煽るコメ主もなかなかやぞ
この動きって名前あるのかな。
クラス名つける時、悩むんだけど...
revealでいいのかな？
Re:18
煽られるコメントする方が悪いよね
Re:19
自分もこの動きの名前知りたいです。
すいません、便乗で質問。
↑でTweenMaxのやり方と、普通に生のJSとCSSのやり方が挙げられていますが、CSSアニメーションが理解出来ている人は、後者のやり方に自然とたどり着くと思います。
そんなに工数かかるようなことではないと思いますが、それをあえてTweenMaxでやるのは、何か理由があるのでしょうか。
TweenMaxに慣れている人は、そっちのほうが速いとか？
私はTweenMax使ったことないのですが、こういう動きにこだわってる系の事例ではよく使われているのを見かけるので、興味があります。
厳密に決めるならここが参考になるかも。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等で書くならそれで統一した方がいいよってこと。
異論は認める。
Re:23
あれ、、返信切れてた。これ22の返信で。
Re:20
なかなかのクズ発言だなｗ
Re:25
相手がクズだししかたないよね
Re:24
ありがとうございます。
すごく腑に落ちました。
ある程度複雑になってくると、TweenMaxのほうが便利なんですね。
先程自分でも調べ直しましたが、Flash時代からあるとのことで、
Flasherの経験がある人はこちらのほうが馴染みやすいんでしょうね。
よく理解できました。ありがとうございます。
Re:22
自分ならJS+CSSでやるかな。何故なら訪問者はコレを見に来てるわけじゃないから時間をかけるべきところは中身だと思うので。