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

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

藏色散人
藏色散人転載
2020-12-14 17:33:254419ブラウズ

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

1.imagehover

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

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

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

2.ImageTiltEffect

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

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

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

3.Magnifier.js

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

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

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

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

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

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

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

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

4.gl-react-image-Effects

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

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

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

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

5.StickyImageEffect

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

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

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

6.HeatDistortionEffect

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

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

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

7.ImageDraggingEffects

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

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

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

##8.jQuery.BgSwitcher

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

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

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

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

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

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

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

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

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

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

#12.react-native-kenburns-view【おすすめ】ユーザーエクスペリエンスを向上させる画像特殊効果ライブラリ17選

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

13.vintageJS

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

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

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

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

14.ThumbnailGridExpandingPreview

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

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

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

#15.gridder

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

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

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

##16.MotionTransitionEffect

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

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

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

##17.tiltedpage_scroll

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

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

【おすすめ】ユーザーエクスペリエンスを向上させる画像特殊効果ライブラリ17選コードのデプロイ後に存在する可能性のあるバグは、ご存知のとおり、その後これらのバグを解決するために、私はログのデバッグに多くの時間を費やしました。ちなみに、便利なバグ監視ツール Fundebug を推奨したいと思います (アドレス: https://www .fundebug.com/?utm_source=xiaozhi)。

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

声明:
この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。