[권장] 사용자 경험을 개선하기 위한 17개의 이미지 특수 효과 라이브러리

1.imagehover

주소: https://github.com/ciar4n/imagehover.css

imagehover.css - 순수 CSS3 마우스 오버 이미지 효과 애니메이션 라이브러리, 44종의 마우스 오버 효과

2. ImageTiltEffect

주소: https://github.com/codrops/ImageTiltEffect

TiltEffect는 이미지가 마우스를 따라가면서 미묘한 3차원 기울기 효과를 만들어내는 플러그인입니다. 레이어링감과 깊이감.

3.Magnifier.js

주소: https://github.com/mark-rolich/Magnifier.js

돋보기는 순수 js로 만든 실용적인 그림 돋보기 플러그인입니다. 다음과 같은 기능이 있습니다:

• 마우스 휠을 사용하여 사진을 확대 및 축소할 수 있습니다.

• 옵션은 js 또는 데이터 속성을 통해 설정할 수 있습니다.

• 한 번의 통화로 여러 장의 사진을 첨부할 수 있습니다.

• 사용자는 마우스 입력, 나가기 및 이동 이벤트를 사용자 정의할 수 있습니다.

• 큰 이미지를 로드할 때 대기 텍스트가 표시될 수 있습니다.

4.gl-react-image- Effects

주소: https://github.com/gre/gl-react-image- Effects

웹과 함께 사용 가능한 Universal withReact 샘플 애플리케이션입니다. iOS 및 Android 구현은 코드 기반으로 함께 실행됩니다(일부 특정 코드는 플랫폼에서 다른 UI를 생성하도록 설계되었습니다).

5. StickyImageEffect

끈적끈적한 이미지 효과를 갖춘 ultanoir 웹사이트에서 영감을 받은 슬라이드쇼입니다.

주소: https://github.com/Anemolo/StickyImageEffect

6. HeatDistortionEffect

WebGL 열 왜곡 효과 전체 화면 배경.

주소: https://github.com/lbebber/HeatDistortionEffect

7.ImageDraggedEffects

다양한 기술을 사용하여 이미지에 대한 흥미로운 드래그 효과 세트입니다.

주소: https://github.com/codrops/ImageDraggedEffects

8.jQuery.BgSwitcher

jQuery.BgSwitcher는 배경 이미지 전환 효과를 구현합니다.

주소: https://github.com/rewish/jquery-bgswitcher

9.FullImageReveal

전체 이미지에는 아름다운 썸네일 슬라이딩 효과가 표시됩니다.

주소: https://github.com/codrops/FullImageReveal

10.diaporama

Diaporama는 Kenburns 효과 및 GLSL을 포함한 고품질 애니메이션 효과를 제공하는 이미지/비디오/콘텐츠 슬라이드쇼 엔진입니다. 전환.

주소: https://github.com/gre/diaporama

11. FollowCursor

커서의 움직임에 따라 이미지의 회전이 변경됩니다.

주소: https://github.com/bersLucas/FollowCursor

12.react-native-kenburns-view

KenBurns React Native 애플리케이션용 이미지 효과

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

13.vintageJS

VINTAGEJS는 HTML5 캔버스를 사용하여 이미지/사진에 멋진 빈티지 효과를 추가하는 jQuery 플러그인입니다. 세 가지 사전 설정된 효과가 제공되며 쉽게 사용자 정의할 수 있습니다.

주소: https://github.com/lindelof/awesome-web- effect

14. ThumbnailGridExpandingPreview

Google 이미지에서 볼 수 있는 효과와 유사한 확장된 이미지 미리보기를 사용하여 썸네일 그리드를 만드는 방법에 대한 튜토리얼입니다.

주소: https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

15.gridder

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

코드 배포 이후 발생할 수 있는 버그는 실시간으로 알 수 없습니다. 로그 디버깅에 시간이 많이 걸렸습니다. 유용한 BUG 모니터링 도구인 Fundebug(주소: https://www.fundebug.com/?utm_source=xiaozhi)를 추천하고 싶습니다.

원문: https://github.com/lindelof/awesome-web- effect