https://www.4digit.jp/ここが作ったみたいだから聞いてみたら
Re:2 ご丁寧にありがとうございます！直接聞くのは少し憚れると思いますので遠慮しますが、他の制作実績からたどれるかもしれません。ありがとうございます！
よくこういうの作れるよね。こういうサイトスゲーっていうと、作れもしないデザイナーは「見にくい」から意味ないって言うけど、ブランディングにおいては超優秀だよね。
ざっくり見てみたけどプラグインじゃない。main.jsというのに書いているっぽい。基本読み込みとともにclassを振ってcssアニメーションをさせてる。直接jsでstyle要素に書いている部分もある。文字のなかを黒いもやもやが移動してるのはcssのマスク。黒いもやもやのpngを移動させてるかんじ。文字の動きはletter-spacingを変更することでですいっと動かしている。わからなかったのはEの文字がアニメーション完了時にきちっと白黒に分断されているところ。この時点ではmask-imageはnoneになってるんだけど、どうやって分断してるんだろう？気になってきたので分かる方いらっしゃいましたらお聞きしてみたいです。
「エフェクト」が何を指してるのかわからんけど、文字色反転させてるのは複製した後に何かしてるっぽいな。ソースにコメント書いてある。
Re:7 見てみたら、白文字は動画の要素内でoverflow:hidden;黒文字は動画の下レイヤーにあって、２つの同じテキストの要素が重なってる感じ。動画要素を削除すれば、黒文字のみ残る
Re:6 金かけてる感はあるけど、ブランディングになってるかなぁ？技術はすごい。でも見づらいから余計に製作者（クライアント含め）の自己満足っぽく感じてしまうんだけど。まぁ金かけてる感が伝わればブランディングにもなるのかな。
コンテンツより見栄えが先にユーザーに届くからね。Re:10
Re:10 Webサイトのデザインにいくら使うのが適切なのか分からない...。
「.p-mask-wrap」にDOMとコメントが入ってたよ！あとmain.jsの/* 341 */が多分ここのJSなんじゃないかな！他は頑張って見つけて！
Re:10 見にくいのは確か
Re:14 Re:9 7です。ありがとうございます。やっと見つかった！こんなところに書いてたのか。これめちゃくちゃ大変だね…。こういうの思いつきもしないし思いついたとしても実装できないし、人に頼むにしてもややこしくて頼みづらいわ…。ひとりでやったにしてもチームでやったにしてもすごいね。主じゃないけど勉強になった。
Re:16 すごいよねー！コード見てやり方わかっても役立て方が難しい！けどいろんなやり方わかるの楽しいよねーー！
16 件の回答
https://www.4digit.jp/
ここが作ったみたいだから聞いてみたら
Re:2
ご丁寧にありがとうございます！
直接聞くのは少し憚れると思いますので遠慮しますが、他の制作実績からたどれるかもしれません。ありがとうございます！
よくこういうの作れるよね。
こういうサイトスゲーっていうと、作れもしないデザイナーは「見にくい」から意味ないって言うけど、ブランディングにおいては超優秀だよね。
ざっくり見てみたけどプラグインじゃない。
main.jsというのに書いているっぽい。
基本読み込みとともにclassを振ってcssアニメーションをさせてる。直接jsでstyle要素に書いている部分もある。
文字のなかを黒いもやもやが移動してるのはcssのマスク。黒いもやもやのpngを移動させてるかんじ。
文字の動きはletter-spacingを変更することでですいっと動かしている。
わからなかったのはEの文字がアニメーション完了時にきちっと白黒に分断されているところ。この時点ではmask-imageはnoneになってるんだけど、どうやって分断してるんだろう？
気になってきたので分かる方いらっしゃいましたらお聞きしてみたいです。
「エフェクト」が何を指してるのかわからんけど、
文字色反転させてるのは複製した後に何かしてるっぽいな。ソースにコメント書いてある。
Re:7
見てみたら、白文字は動画の要素内でoverflow:hidden;
黒文字は動画の下レイヤーにあって、２つの同じテキストの要素が重なってる感じ。
動画要素を削除すれば、黒文字のみ残る
Re:6
金かけてる感はあるけど、ブランディングになってるかなぁ？
技術はすごい。でも見づらいから余計に製作者（クライアント含め）の自己満足っぽく感じてしまうんだけど。
まぁ金かけてる感が伝わればブランディングにもなるのかな。
コンテンツより見栄えが先にユーザーに届くからね。Re:10
Re:10
Webサイトのデザインにいくら使うのが適切なのか分からない...。
「.p-mask-wrap」にDOMとコメントが入ってたよ！あとmain.jsの/* 341 */が多分ここのJSなんじゃないかな！他は頑張って見つけて！
Re:10
見にくいのは確か
Re:14
Re:9
7です。ありがとうございます。やっと見つかった！こんなところに書いてたのか。
これめちゃくちゃ大変だね…。こういうの思いつきもしないし思いついたとしても実装できないし、人に頼むにしてもややこしくて頼みづらいわ…。
ひとりでやったにしてもチームでやったにしてもすごいね。
主じゃないけど勉強になった。
Re:16
すごいよねー！コード見てやり方わかっても役立て方が難しい！けどいろんなやり方わかるの楽しいよねーー！