Granim.jsで美しいグラデーショントランジションを作成する

ウェブデザインは美しさと楽しいインターフェースデザインでいっぱいです。いくつかの機能は機能しますが、他の機能はショー専用です。. グラデーショントランジション あります ショー専用 しかし、彼らはかなりパンチを詰める!

あり Granim.js, あなたは建てることができます カスタムフルカラーグラデーショントランジション 滑らかに見え、どのWebサイトともうまく調和している.

発見できる たくさんのカスタム例 背景画像を使用した単純なトランジションからより複雑なアニメーションまで、さまざまなスタイルのメインのサンプルページに.

Granimは私が知っている唯一のJSライブラリです グラデーショントランジションへの取り組み. これは私がいつも疑問に思っていたし、本当に良い答えを見つけたことがない質問です。 Granimは完璧なソリューションです バニラのJavaScriptに基づいて構築された, そのため、jQueryや他のJSライブラリと一緒に実行できます。.

ただ 落とす granim.js あなたのページにファイルする 始めるために。 GitHubからコピーをダウンロードするか、ライブCDNからホストすることができます。.

これが 基本的なコードサンプル GitHubリポジトリから：

物事はこれよりはるかに複雑になることがあるので、本当にすべきです 例を掘り下げる 詳しく知ることができ。あなたは見つけるでしょう 各例の下のコードスニペット だからあなたはできる グラデーショントランジションを作成する 画像の背景や画像マスク用.

イメージマスクは、ロゴ、たとえばPNGイメージなど、グラデーションの背後に隠れるようにするために使用できます。これはあなたが作成することができます JSアニメーションのロゴ どこグラデーション テキスト全体にゆっくりと遷移する.

この例は たくさん JS / CSSコードの例 単純な実装ではありません.

しかし、Granimで練習すればするほど、セットアップとカスタマイズが簡単になります。そしてこれがオンラインで唯一の真のグラジエントトランジションライブラリであることから、それはあらゆるプロジェクトにとって絶対的な最善の解決策です。.

ライブラリはまだ半頻繁に更新されているので、問題のタブで詳細を確認できます。.

それは とても小さな図書館 そのため、問題が発生したり、更新する必要があることはあまり多くありません。これがGranim.jsを小規模または大規模サイトの信頼性の高いソリューションにしている理由です。.

に コピーをダウンロードする GitHubのリリースページにアクセスするか、またはのコピーを入手してください。 .js cdnjsから直接ファイル。そして 実例でソースを見る Jonathan Schneiderによって作成されたこのCodePenデモを覗いてみてください。.