http://www.opefac.com/
このサイトの見出しテキスト（SERVICE、COMPANY等）のエフェクトはプラグインで実装されているのでしょうか？具体的なプラグイン名をご存じの方がいれば教えていただきたいです。よろしくおねがいいたします。
一緒に読まれている質問
- HTMLをはじめとした言語の知識が一切無い代理店からの依頼について知り合いからの紹介で、言語の知識を持っている人間が一人...
- #アイコン デザイナーの方に質問です。WEBサイトやアプリのデザインでつかうアイコンって自分で一から作ってますか？それともアイコンフ...
- 大手のデザイナーです。日まで暇で仕方ありません。毎日定時で帰れます。皆さん忙しいですか？忙しいのが羨ましいです。
- #転職 webデザイナーの転職について相談今年25歳になる webデザイナーです。入社して5年目で、現在行きたい会社があり転職活...
- #php 条件分岐についてアンケート的な質問です。以下の条件分岐では、同じ動きをすると思うのですが、皆さんはどちら派でしょうか？f...
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
すごいよねー！コード見てやり方わかっても役立て方が難しい！けどいろんなやり方わかるの楽しいよねーー！