http://www.opefac.com/
このサイトの見出しテキスト（SERVICE、COMPANY等）のエフェクトはプラグインで実装されているのでしょうか？具体的なプラグイン名をご存じの方がいれば教えていただきたいです。よろしくおねがいいたします。
一緒に読まれている質問
- 1200文字程度の企業理念、会社のスローガン等を全て暗記しないと、正社員になれないと言われました。未経験からの転職ですが...
- 業務に加えて関係ない業務をやらされてる方います？アプリ開発に加えて、翻訳や海外企業とのやり取りをやらされています。それな...
- アスクルでやっているウェブ上で名刺が作れる「名刺作成サービス」のようなウェブシステム開発案件をいただきました。当社ではウ...
- ウェブデザイナーもしくはプログラマーが主人公の漫画、ドラマ、映画は何かありますか?
- #質問 フリーランスの方にお聞きしたいですが、誰かから仕事の話があったとき、自分から料金を提示しますか？コンサルの知り合いから仕...
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
すごいよねー！コード見てやり方わかっても役立て方が難しい！けどいろんなやり方わかるの楽しいよねーー！