분류 design

awesome-web-effect

컨텐츠 정보

  • 조회 10 (작성일 )

본문

일련의 정교하고 컴팩트 한 웹 페이지 멋진 효과.


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


img 


배경 장식 

  • particles-bg - 입자 배경에 대한 반응 구성 요소
  • particles-bg-vue - vue.js 입자 애니메이션 배경 구성 요소입니다. 웹 사이트를 멋지게 보이도록 사용하세요.
  • sparticles - 배경이나 용기에서 사용할 수있는 바닐라 입자, 매우 빠르고 가볍습니다.
  • jquery.ripples - WebGL을 사용하여 배경에 물결 효과를 추가합니다.
  • MorphingBackgroundShapes - SVG 모양이 스크롤시 변형되고 변형되는 장식 웹 사이트 배경 효과 ..
  • SegmentEffect - [Filippo Bello의 포트폴리오]에서 보이는 배경 이미지 세그먼트 효과.
  • jquery-bgswitcher - 효과를 사용하여 배경 이미지를 전환합니다.
  • BackgroundScaleHoverEffect - CSS 클립 경로를 사용하여 DDD 호텔 웹 사이트에서 볼 수있는 배경 스케일 호버 효과 재현.
  • ImageGridMotionEffect - 이미지의 배경 격자에 대한 모션 호버 효과 .
  • jquery.adaptive-backgrounds.js - 이미지의 주요 색상을 추출하여 상위 요소의 배경에 적용하는 간단한 jQuery 플러그인입니다.
  • fixed-background-effect - 배경 첨부 CSS 속성을 활용하여 고정 배경 효과를 만드는 간단한 템플릿입니다.
  • jquery-warpdrive-plugin - 워프 드라이브는 멋진 대화식 구성 가능한 HTML5 캔버스 기반 워프 드라이브 / 스타 필드 효과를 만드는 데 도움이되는 경량 jQuery 플러그인입니다.


Mouse Effect 

  • mouse-particles - AboutA mouse particle effect react component
  • ImageTrailEffects - A set of effects for mouse-following image trails that show a random series of images.
  • webgl-mouseover-effects - Demos for the tutorial on how to achieve an interactive mouseover/hover effect
  • cursor-effectss - Only 90's kids remember... well not really, but these beloved effects that would follow your mouse around will always be classic reminders of the old, beloved internet.
  • mouse-text-shadow - CSS shadow effect & JavaScript mouse move
  • vuepress-plugin-cursor-effects - Add a cute click effect to your mouse in your vuepress!
  • jquery-animate3d - jQuery plugin that gives elements a 3d mouse over effect
  • magneticHover - magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet
  • react-tilt - Parallax tilt hover effect for React JS - tilt.js
  • hover3d - Simple jQuery plugin for 3d Hover effect

Css 3D Effect 

  • quintessential-css-cube - The Quintessential Responsive 3D CSS Cube
  • Tarjetas-3D - Código del Tutorial de Tarjetas 3D usando HTML5 y CSS3
  • 3dtransforms-3D - Intro to CSS 3D transforms
  • Makisu - An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin.
  • cube.less - 3D (animated) cube using only CSS (Less), originally used by LeanCloud
  • super-mario - Pure CSS animated 3D Super Mario Icon
  • CSS3D.js - This experimental renderer was built for the design of Acko.net. It lets you manage simple CSS 3D objects using Three.js.
  • Solar-System - Solar System data visualisation done in HTML/CSS and a bit of Javascript.
  • css-space-shooter - An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms
  • photon - CSS 3D Lighting Engine photon.attasi.com
  • gl-css3d - Synchronize CSS 3D transformations to a WebGL scene

Image Effect

Input Effect

Transition Effect

Rain & Snow

Button Effect

Loading Effect

Audio Effect