-
1:ID:q78TOV · 1週間前

http://www.opefac.com/

このサイトの見出しテキスト(SERVICE、COMPANY等)のエフェクトはプラグインで実装されているのでしょうか?具体的なプラグイン名をご存じの方がいれば教えていただきたいです。よろしくおねがいいたします。

16 件の回答

2:ID:bRiBrr · 1週間前

https://www.4digit.jp/

ここが作ったみたいだから聞いてみたら

3:ID:Ixv5Ol · 1週間前

Re:2
ご丁寧にありがとうございます!
直接聞くのは少し憚れると思いますので遠慮しますが、他の制作実績からたどれるかもしれません。ありがとうございます!

5:ID:d.sOYb · 1週間前

cssのmask使ってますね。画像でマスクするやつです。
webkitのプレフィックスつければモダンブラウザだいたいカバーできるっぽい。
mask-imageで指定したマスク画像をpositionでコマアニメにしてる。

6:ID:KJVAqz · 1週間前

よくこういうの作れるよね。
こういうサイトスゲーっていうと、作れもしないデザイナーは「見にくい」から意味ないって言うけど、ブランディングにおいては超優秀だよね。

7:ID:KQrEHG · 1週間前

ざっくり見てみたけどプラグインじゃない。
main.jsというのに書いているっぽい。
基本読み込みとともにclassを振ってcssアニメーションをさせてる。直接jsでstyle要素に書いている部分もある。
文字のなかを黒いもやもやが移動してるのはcssのマスク。黒いもやもやのpngを移動させてるかんじ。
文字の動きはletter-spacingを変更することでですいっと動かしている。

わからなかったのはEの文字がアニメーション完了時にきちっと白黒に分断されているところ。この時点ではmask-imageはnoneになってるんだけど、どうやって分断してるんだろう?
気になってきたので分かる方いらっしゃいましたらお聞きしてみたいです。

8:ID:.24TVZ · 1週間前

「エフェクト」が何を指してるのかわからんけど、
文字色反転させてるのは複製した後に何かしてるっぽいな。ソースにコメント書いてある。

9:ID:IExa1n · 1週間前

Re:7
見てみたら、白文字は動画の要素内でoverflow:hidden;
黒文字は動画の下レイヤーにあって、2つの同じテキストの要素が重なってる感じ。
動画要素を削除すれば、黒文字のみ残る

10:ID:Yt5YnS · 1週間前

Re:6
金かけてる感はあるけど、ブランディングになってるかなぁ?
技術はすごい。でも見づらいから余計に製作者(クライアント含め)の自己満足っぽく感じてしまうんだけど。
まぁ金かけてる感が伝わればブランディングにもなるのかな。

11:ID:DIZ4Hz · 1週間前

コンテンツより見栄えが先にユーザーに届くからね。Re:10

12:ID:HlfTk8 · 1週間前

Re:10
Webサイトのデザインにいくら使うのが適切なのか分からない...。

14:ID:KDomiw · 1週間前

「.p-mask-wrap」にDOMとコメントが入ってたよ!あとmain.jsの/* 341 */が多分ここのJSなんじゃないかな!他は頑張って見つけて!

15:ID:jObuSP · 1週間前

Re:10
見にくいのは確か

16:ID:NjrUX/ · 1週間前

Re:14
Re:9
7です。ありがとうございます。やっと見つかった!こんなところに書いてたのか。
これめちゃくちゃ大変だね…。こういうの思いつきもしないし思いついたとしても実装できないし、人に頼むにしてもややこしくて頼みづらいわ…。
ひとりでやったにしてもチームでやったにしてもすごいね。
主じゃないけど勉強になった。

17:ID:KDomiw · 1週間前

Re:16
すごいよねー!コード見てやり方わかっても役立て方が難しい!けどいろんなやり方わかるの楽しいよねーー!

2 件の回答が除外されました。[詳細]
コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る