http://www.opefac.com/
このサイトの見出しテキスト（SERVICE、COMPANY等）のエフェクトはプラグインで実装されているのでしょうか？具体的なプラグイン名をご存じの方がいれば教えていただきたいです。よろしくおねがいいたします。
一緒に読まれている質問
- 今 転職エージェントに登録してコンテンツマーケか制作会社のディレクターに転職しよかと思うのだが残業時間ってぶっちゃけ一日...
- #webフォント google fontで欧文を指定しているのですが、safariのみ表示されません。html<link href=...
- #修正 修正内容を具体的に指摘してこないクライアントにあたってしまい、非常に困っています。クライアントからの修正の指摘といえば、...
- フリーランスの地方移住について。私は30代の東京に住んでいるフリーランスなのですが、福岡あたりに移住を考えています。理由...
- #質問 こちらのサイトのローディング時のアニメーションの仕組みがわからないのですが、分かる方いらっしゃいますでしょうか。http...
16 件の回答
https://www.4digit.jp/
ここが作ったみたいだから聞いてみたら
Re:2
ご丁寧にありがとうございます！
直接聞くのは少し憚れると思いますので遠慮しますが、他の制作実績からたどれるかもしれません。ありがとうございます！
cssのmask使ってますね。画像でマスクするやつです。
webkitのプレフィックスつければモダンブラウザだいたいカバーできるっぽい。
mask-imageで指定したマスク画像をpositionでコマアニメにしてる。
よくこういうの作れるよね。
こういうサイトスゲーっていうと、作れもしないデザイナーは「見にくい」から意味ないって言うけど、ブランディングにおいては超優秀だよね。
ざっくり見てみたけどプラグインじゃない。
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
すごいよねー！コード見てやり方わかっても役立て方が難しい！けどいろんなやり方わかるの楽しいよねーー！