デザインとアニメーションが秀逸だけどJSが難読化されてないサイト集【つまりお得】
おはようございます。今日も良い一日を。
sankou!などのギャラリーサイトを見ていると
『このアニメーションかっこいい！』
とか
『どうやって実装するんだろー』
と思うことありますよね。
ただ、かっこいいアニメーションを作るプロダクションであればあるほど、しっかり難読化・圧縮されているというJSあるある現象に遭遇します。
そんな絶望的な状況の中、私は探しました。
デザインとアニメーションが秀逸だけどJSが難読化されてないサイト
を。
その結果をご紹介します。
JSやCSSでのアニメーションに自信がない
『このサイトのアニメーションみたなの作って』と無茶ぶりされがち
将来的にSH◯FT◯RA◯Nに入りたい
と思っているウェブデザイナーは必見です。
気づかれる前にパクれ！非難読化JSサイトたち
MILBON
ポイント
シンプルながらかっこいいrevealアニメーションを使ったスプラッシュ
ヌルヌルのテキストアニメーション
GSAPとjQueryの両刀づかい
コメント
美容系のコーポレートサイト。『ブランドイメージを損なわず、かっこよさも演出してほちぃ』というクライアントからの要望が間違いなくあったであろう案件。
高いハードルを見事に乗り越えた秀逸アニメーションが満載です。
JSファイルに日本語コメントが満載なので読むだけでも勉強になります。
Dennis Snellenberg • Freelance Designer & Developer
ポイント
ベージ遷移にbarba.jsを使用
GSAPの書き方を学びたい人必見
英語だからこそできるミニマルなデザイン
コメント
オランダ在住のフリーランス、デニスのポートフォリオサイト。笑顔が素敵ですね。
特におすすめなのがbarba.jsを使っている点。Next.jsが便利すぎて最近はあまり登場しなくなってきましたが・・・。
まだNext.jsやNuxt.jsには手が出ないけどページ遷移のアニメーションをクライアントから要望されている、というデザイナーのあなたには大いに参考になるハズです。
それにしてもアルファベットってそれだけでかっこよくなりますよね。ひらがなと漢字ってどうしてももっちゃりしますよね。かわいいからいいけど。
Ban Design Studio
ポイント
シンプルで柔らかなデザインにマッチしたマイクロインタラクション
jQueryメソッドの勉強に最適
デザインもアニメーションも『これでいいんだよ』感
コメント
私が一番好きなウェブサイトはWikipediaなのですが、このサイトも似た哲学を感じます。
情報が見やすく整理されていていい塩梅のアニメーションがある、これ以上は蛇足ですよね。ええ、そうだと思います。
デザイナーとしてとても考えさせられたウェブサイトです。
Regrit Partners
ポイント
ヌルヌルパララックスなスクロールアニメーション
高級感を損なわないアニメーションアイデアが満載
Javascriptライブラリの選定がうまいッ
コメント
世界中の高級感を集めてブッコみました！テヘッ。
的なウェブサイト。
言葉を操れない赤ちゃんでも
『高級感に溢れとるなー』
と思うに違いない徹底ぶり。
ヌルヌルスクロールパララックスアニメーションをかんたんに実装できるLocomotive Scrollなど、ライブラリ選定が見事です。
Supplement.
ポイント
あえてアルファベットのみで構成
文字サイズの強弱が見事
アニメーションの引き算
コメント
センスしか見当たらないかっこいいサイトです。
おそらくですが、アニメーションを厳選して作られています。
『アニメーションの引き算やー。』
って言います、彦摩呂なら。
決して難しい実装ではないです。ぜひ参考にしましょう。
最後に
この世界は秀逸なサイトで溢れていますね。
圧倒的な実力差にくじけそうになりますが、なんとか歯を食いしばり、JSを盗んで血肉にしてくださいね。