[Empfohlen] 17 Bildspezialeffektbibliotheken zur Verbesserung der Benutzererfahrung

1.imagehover

Adresse: https://github.com/ciar4n/imagehover.css

imagehover.css – Reine CSS3-Mouse-over-Bildeffekt-Animationsbibliothek, 44 Arten von Mouse-over-Effekten

2. ImageTiltEffect

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

TiltEffect ist ein Plug-in, das es dem Bild ermöglicht, der Maus zu folgen, um einen subtilen dreidimensionalen Neigungseffekt zu erzeugen ein Gefühl von Schichtung und Tiefe.

3.Magnifier.js

Adresse: https://github.com/mark-rolich/Magnifier.js

Magnifier ist ein praktisches Bildlupen-Plug-in von pure js. Es verfügt über folgende Funktionen:

• Mit dem Mausrad können Sie das Bild vergrößern und verkleinern.

• Optionen können über js oder Datenattribute festgelegt werden.

• Sie können mehrere Bilder in einem Anruf anhängen.

• Benutzer können Ereignisse beim Betreten, Verlassen und Bewegen der Maus anpassen.

• Wartetext kann beim Laden großer Bilder angezeigt werden.

4.gl-react-image-effects

Adresse: https://github.com/gre/gl-react-image-effects

Universell mit React-Beispielanwendung mit dem Web. Die iOS- und Android-Implementierungen führen gemeinsam eine Codebasis aus (einige spezifische Codes dienen dazu, unterschiedliche Benutzeroberflächen auf den Plattformen zu erstellen).

5. StickyImageEffect

Von der Ultanoir-Website inspirierte Diashow mit Sticky-Image-Effekten.

Adresse: https://github.com/Anemolo/StickyImageEffect

6. HeatDistortionEffect

WebGL-Wärmeverzerrungseffekt im Vollbildmodus.

Adresse: https://github.com/lbebber/HeatDistortionEffect

7.ImageDraggingEffects

Eine Reihe interessanter Zieheffekte für Bilder mit verschiedenen Techniken.

Adresse: https://github.com/codrops/ImageDraggingEffects

8.jQuery.BgSwitcher

jQuery.BgSwitcher implementiert den Hintergrundbildwechseleffekt.

Adresse: https://github.com/rewish/jquery-bgswitcher

9.FullImageReveal

Ein Vollbild zeigt einen schönen Miniaturbild-Gleiteffekt.

Adresse: https://github.com/codrops/FullImageReveal

10.diaporama

Diaporama ist eine Bild-/Video-/Inhalts-Diashow-Engine, die hochwertige Animationseffekte bereitstellt, einschließlich Kenburns-Effekten und GLSL Übergänge.

Adresse: https://github.com/gre/diaporama

11. FollowCursor

Die Drehung des Bildes ändert sich, wenn sich der Cursor bewegt.

Adresse: https://github.com/bersLucas/FollowCursor

12.react-native-kenburns-view

KenBurns-Bildeffekte für React Native-Anwendungen

Adresse: https://github. com/nHiRanZ/react-native-kenburns-view

13.vintageJS

VINTAGEJS ist ein jQuery-Plugin, das HTML5-Canvas verwendet, um Ihren Bildern/Fotos atemberaubende Vintage-Effekte hinzuzufügen. Es verfügt über drei voreingestellte Effekte und kann einfach angepasst werden.

Adresse: https://github.com/lindelof/awesome-web-effect

14. ThumbnailGridExpandingPreview

Ein Tutorial zum Erstellen eines Rasters mit Miniaturansichten mithilfe erweiterter Bildvorschauen, ähnlich dem bei Google Images beobachteten Effekt.

Adresse: https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

15.gridder

Ein jQuery-Plugin, das eine Miniaturansicht-Rastererweiterungsvorschau anzeigt, ähnlich dem Effekt, der bei Google Images beobachtet wird.

Adresse: https://github.com/oriongunning/gridder

16. MotionTransitionEffect

Schneller Bewegungsübergangseffekt für Bildfolien.

Adresse: https://github.com/codrops/MotionTransitionEffect

17.tiltedpage_scroll

tiltedpage_scroll.js ist ein Plug-in, das das Scrollen mit der Maus und das Einstellen des Bildwinkels unterstützt. Wenn die Seite gescrollt wird, hat das Bild einen geneigten 3D-Effekt, was eine gute Wahl für die Produktdarstellung ist.

Adresse: http://peachananr.github.io/tiltedpage_scroll/demo/tiltedpage_scroll_demo.html

Es gibt keine Möglichkeit, die möglichen Fehler in Echtzeit zu erkennen, nachdem der Code bereitgestellt wurde, um diese Fehler zu beheben Danach wurde viel Zeit aufgewendet. Für das Log-Debugging möchte ich ein nützliches BUG-Überwachungstool namens Fundebug empfehlen (Adresse: https://www.fundebug.com/?utm_source=xiaozhi).

Originaltext: https://github.com/lindelof/awesome-web-effect