【おすすめ】ユーザーエクスペリエンスを向上させる画像特殊効果ライブラリ17選

1.imagehover

アドレス: https://github.com/ciar4n/imagehover.css

imagehover。 css - Pure CSS3 マウスオーバー画像効果アニメーション ライブラリ、44 種類のマウスオーバー効果

2.ImageTiltEffect

Address : https://github.com/codrops/ImageTiltEffect

TiltEffect は、画像がマウスに追従して微妙な 3 次元の傾き効果を生み出し、レイヤーと奥行きの感覚を与えるプラグインです。 。

3.Magnifier.js

アドレス: https://github.com/mark-rolich/Magnifier.js

Magnifier は、純粋な JS で作られた実用的な画像拡大鏡プラグインです。これには次のような特有の機能があります:

• マウス ホイールを使用して画像を拡大および縮小できます。

• オプションは、js または data 属性を通じて設定できます。

• 1 回の呼び出しで複数の画像を添付できます。

• ユーザーは、マウスの入力、出発、および移動イベントをカスタマイズできます。

• 大きな画像を読み込むと、待機中のテキストが表示されることがあります。

4.gl-react-image-Effects

アドレス: https://github. com/gre/gl-react-image-Effects

React サンプル アプリケーションと Web でユニバーサル。 iOS と Android の実装は、コード ベースを一緒に実行します (一部の特定のコードは、プラットフォーム上で異なる UI を作成するように設計されています)。

5.StickyImageEffect

ultanoir Web サイトからインスピレーションを得た、スティッキー画像効果を備えたスライドショー。

アドレス: https://github.com/Anemolo/StickyImageEffect

6.HeatDistortionEffect

WebGL熱歪み効果の全画面背景。

アドレス: https://github.com/lbebber/HeatDistortionEffect

7.ImageDraggingEffects

使用さまざまなテクニックを使用して画像に設定されたドラッグ効果の興味深いセット。

アドレス: https://github.com/codrops/ImageDraggingEffects

##8.jQuery.BgSwitcher

jQuery.BgSwitcher は背景画像の切り替え効果を実装します。

アドレス: https://github.com/rewish/jquery-bgswitcher

9.FullImageReveal

美しいサムネイルのスライド効果による完全な画像表示。

アドレス: https://github.com/codrops/FullImageReveal

10.diaporama

ディアポラマは、Kenburns エフェクトや GLSL トランジションなどの高品質のアニメーション効果を提供する画像/ビデオ/コンテンツ スライドショー エンジンです。

アドレス: https://github.com/gre/diaporama

##11.FollowCursor

画像カーソルの移動に応じて回転も変化します。 アドレス: https://github.com/bersLucas/FollowCursor

#12.react-native-kenburns-view

React Native アプリケーション用 KenBurns 画像エフェクト #アドレス: https://github.com/nHiRanZ/react-native-kenburns-view

13.vintageJS

VINTAGEJS は、HTML5 キャンバスを使用して画像/写真に見事なヴィンテージ効果を追加する jQuery プラグインです。 3つのプリセットエフェクトが付属しており、簡単にカスタマイズできます。

アドレス: https://github.com/lindelof/awesome-web-effect

14.ThumbnailGridExpandingPreview

Google 画像効果で表示されるものと同様の、画像プレビューが展開されたサムネイル グリッドを作成する方法のチュートリアル。

アドレス: https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

#15.gridder

A Google 画像で見られる効果と同様の、サムネイル グリッドの展開プレビューを表示する jQuery プラグイン。

アドレス: https://github.com/oriongunning/gridder

##16.MotionTransitionEffect

画像高速スライドのモーショントランジションエフェクト。

アドレス: https://github.com/codrops/MotionTransitionEffect

##17.tiltedpage_scroll

tiltedpage_scroll 。 js は、マウススクロールと画像角度の設定をサポートするプラグインです。ページをスクロールすると、画像が傾いた 3D 効果を持ち、製品の表示に適しています。

アドレス: http://peachananr.github.io/tiltedpage_scroll/demo/tiltedpage_scroll_demo.html

コードのデプロイ後に存在する可能性のあるバグは、ご存知のとおり、その後これらのバグを解決するために、私はログのデバッグに多くの時間を費やしました。ちなみに、便利なバグ監視ツール Fundebug を推奨したいと思います (アドレス: https://www .fundebug.com/?utm_source=xiaozhi)。

原文: https://github.com/lindelof/awesome-web-effect