css のanimationがtransitionでマスク？アニメーションをしたい

Question

以下のサイトのvisionやcompamyをクリックしていただくと画像が表示されるアニメーションが分かるかと思います。
マスクアニメーションのような気がしています。

https://zoccon.me/company/

何かしらマスクをして中央から上下にマスク？らしい要素がアニメーションしていますが、これを再現するにはどうしたらいいのでしょうか？
参考サイトはいろいろなアニメーションやらJSやらの関係でいろんなクラスなどついていてよく分かりません。

よろしくお願いします。

Answer 1

要素を検証して見たところ、
HTML、CSS、JavaScriptをうまく使ってやってるようですね。
CSSのtransitionの使い方が上手だと思います。
JavaScriptの使用は最小限にしてるのもいいですね。
というわけで、どう再現するかは、結論は上記のものをうまく使うです。

細かいところは、ご自身で研究してみていただくしかないというのが、正直なところです。
要素を検証などを活用し、使われているCSSのプロパティをキーワードにし、細かく調べてみるとか、
そういった、細かく潜って、一機能、一機能についてとフォーカスして調べられてはいかがでしょうか。
よって、CSS アニメーション マスクとか大雑把な調査のキーワードでは、
質問者さんの満足するものは出てこない可能性が高いので、
（というか、調査済みなら、満足されてないとお見受けします）
もっと細かく、CSSのプロパティや、JSの実装方法の一部など、フォーカスして、調査してみましょう。

ソースコードは、質問者さんのソースコードによる具体的な質問ではないので、割愛いたします。

追記

まだ解決に至らなかったようなので、少し追記させていただきます。
一度、要素検証、ソースコードを表示にて、必要な要素、JS、CSSを洗い出し、自分の手元環境にて再現するのも一つ手かと思います。
所謂、模写というやつです。
そうすることによって、CSSではこう動くのか、JSはこう使うのか、など理解が深まるかと思います。
なんにせよ、勉強して、実際に作ってみて、が一番の技術習得になるかと思います。

それ以外に、この要素はこうあって、このクラスはこの役目で、なんて、細かいところを言うと、回答者に開発をさせるハメになりますし、このCSSが効いてる、マウスアクションではこうなってとかは、
要素を検証・デベロッパーツールでわかる話なので、こちらが解説することではないかと思います。
これで、フレームワークゴリゴリ使っててわけわかんないってなら話は別ですが、幸いにして、デベロッパーツールを使いさえすれば、見ていくのはそこまで難しくない参考サイトかと思います。
つまり、上記のように要素を検証などを活用し、いろいろやってみよう、調べてみよう、としか回答しようがありません。

どうか頑張ってください。

以上です。

Comments

[退会済みユーザー]

その構成が分からないから聞いてるんだろうが。
いちいち上手く使う事ですとかアホな回答してくるな

[kyoya0819]

アホな回答だと思うなら、そんな質問するな、考えろ

[退会済みユーザー]

考えて不明だから質問してんだろカス

[miyabi_pudding]

kirkirimaiさん >
要素を検証などを使って、自分で研究しましょう。
（という意味も込めて太字にしてます）
ぶっちゃけ、本件はこういう回答するしかないです。
もっと細かくなんてやったら、正直、サイト解剖、研究レベルになります。
（金もらわないとやれないレベルってこと）

[退会済みユーザー]

miyabi_takasuk
もちろん自分で試してはいます。
単純に言い方がイラとするという事です。
上記のように「この説明だと足りないのでまずは研究してみましょうしか言えません」といった言い方ならわかりますが。

[miyabi_pudding]

わかりました。
回答修正させていただきます。

[退会済みユーザー]

こんばんは。
>その構成が分からないから聞いてるんだろうが。
>いちいち上手く使う事ですとかアホな回答してくるな
いくら回答者であっても作成した本人でないのですからコードから読み取るしかありません。

>参考サイトはいろいろなアニメーションやらJSやらの関係でいろんなクラスな どついていてよく分かりません。
なにが分からないのかは分かりません。どのclassでスタイリングされているのか,JavaScriptが分からないのか。そこを明示してもらわないと答えようがありません。
ちなみに,大概のサイトはいろいろなアニメーションやらJSやらの関係があると思います。その際にもまた同じ質問をするのですか?

==
miyabi_takatsukさんの回答にもあった様に要素を検証してみてください。
https://teratail-v2.storage.googleapis.com/uploads/contributed_images/0eb97ab091d80debd884f1c4a012b6df.png

[退会済みユーザー]

>単純に言い方がイラとするという事です。
言い方に問題があるなら、アホな回答という表現は適切ではないかと。。

[退会済みユーザー]

apple

自分の説明が足りなかったもの問題ですが、例えば参考サイト見て、これならcss　の●●で実装できますといったヒントが分かればという感じでした。

[退会済みユーザー]

kirkirimaiさん
ご確認ありがとうございます。
>自分の説明が足りなかったもの問題ですが、例えば参考サイト見て、これならcss　の●●で実装できますといったヒントが分かればという感じでした。
申し訳ありませんが、意味が分かりません。
●●にはプロパティが入るという認識でよろしいでしょうか？だとすると、一つや二つでできるものではありません。

繰り返しますが、大概のサイトはいろいろなアニメーションやらJavaScriptやらの関係があると思います。その際にもまた同じ質問をするのですか?

***************
質問者さんの実装したいものを自身で作成してみてはどうでしょうか？勿論実装は簡単ではなく、時間もかかると思います。しかし、自身で試して見る事は重要だと思います。
自分の試した事や実際のコードも含め質問したら想定していた回答を得られやすくなるかと思います。

[m.ts10806]

kirkirimaiさん
初めての相手、赤の他人に呼び捨てを貫かれる方針には賛同できませんが、
それは置いといて、
ここまで読んで全く解決した感がないのですが、どのように解決とされたのでしょうか。
https://teratail.com/help/question-tips#questionTips4-2

[kyoya0819]

「無料でやってるんだから、そういう態度で答えを求めるならお金を払って欲しい」と自分がmiyabi_takatsukさんだったら思う

Answer 2

何かしらマスクをして中央から上下にマスク？らしい要素がアニメーションしていますが、これを再現するにはどうしたらいいのでしょうか？

参考サイトはいろいろなアニメーションやらJSやらの関係でいろんなクラスなどついていてよく分かりません。

単にその部分を再現するだけなら、CSSとJS（さらにいうと、アニメーションだけならCSSだけで多分できる）のある程度の知識があればできるでしょう。

答えから求めるのはよくありません、理解しづらいです。
まず１つずつ動作を作っていきそれから組み合わせていくと良いでしょう。
例え、我々が答えを提示したとしてもそれは質問者さんの知識にはなりません。手元に完成形のコードとして残るだけです。

もし、コードが欲しいならランサーズやらなんやらで有料で依頼して下さい。それでも、全く同じコードは書かないとおもいますが