ホームページ » ツールキット » Philter.js - CSSフィルタを使用した無料の画像変更ライブラリ

    Philter.js - CSSフィルタを使用した無料の画像変更ライブラリ

    インスタグラム 最も人気のある写真ネットワークとして広く知られています。 1日あたり5200万枚以上の写真を処理し、それらの多くは フィルタを含める その場で画像を変更する.

    これはCSSフィルタを使っても可能です。 ブラウザで直接適用する. これらのカスタムフィルタプロパティは、多くのブラウザで幅広くサポートされていて、見栄えがします。.

    とともに Philter JavaScriptプラグイン, このプロセスを拡張して時間を節約し、コードをHTMLに変換することができます。 動的フィルタ効果.

    このプラグインを使用することで、あなたは得ます あなたのイメージをはるかによくコントロール. これにより、個々の画像に適用するフィルタを選択したり、ホバーリングなどのユーザの行動に基づいて特定のフィルタを変更するかどうかを選択できます。.

    CSS アニメーショントランジションをサポート そしてPhilterはこのプロセスをとても簡単にします。あなたは、ホームページまたはGitHubリポジトリからPhilterをダウンロードするだけです。 Webページに追加されたら、 初期化コードを追加する そしてそれを手放す.

    これが サンプルスニペット GitHubリポジトリから:

      

    デフォルトでは、 遷移と追加のデータ属性を設定する HTMLに追加できることの URL パラメータは、フィルタ処理で使用されるカスタムSVGファイルをPhilterが探す場所のパスを定義します。.

    これらの追加フィルタは ライブラリに同梱, そのため、それらを編集する必要はまったくありません。ただし、現在のファイルとは異なる場所に移動したり、別のディレクトリ構造に配置したりすることがあります。 変更する必要があるかもしれません.

    今、あなたはただすることができます カスタムフィルタを追加する あなたのHTMLへの権利 要素またはそのコンテナ.

    これが 簡単な例

     

    あなたは見つけることができます 全フィルタの全リスト GitHubで、 完全なセットアップガイド そして他の多くのコードサンプル.

    Philterは、最もクールなフリープラグインの1つであり、現代のCSSの限界を押し広げています。できます あなた自身のフィルタを設計する あなたがコードベースを掘り下げることを望んでいるなら、周りにいじくり回す.

    簡単な作業を開始するには、Philterのホームページにアクセスしてコピーをダウンロードするだけです。あなたはそれをすぐに稼働させることができます.