Collect ashes, 12 cool background effects library

Author: lindelof
Translator: Front-end Xiaozhi
Source: github

If you have dreams and dry goods, search [Moving the World] pay attention to this brush bowl wisdom who is still washing dishes in the early morning.

This article has been included in GitHub https://github.com/qq449245884/xiaozhi . There are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.

The Vue3 source code is actually out: is afraid of being asked about the Vue source code during the interview, or if you want to show the interviewer through your own Vue source code, you can learn about it.

1.particles-bg

Address: https://github.com/lindelof/particles-bg

Effect:

2.particles-bg-vue

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

This is a VUE based particle animation component.

3.jquery.ripples

Address: https://github.com/sirxemic/jquery.ripples

jQuery Ripples Plugin adds a layer of water element to HTML to interact ripple cursor with WebGL. You can use this effect to make your static CSS background images more interactive.

4.MorphingBackgroundShapes

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

This is a very decorative website background effect. When the user scrolls to a certain page, the SVG graphics of this background will deform and move with it.

5. SegmentEffect

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

Background split decoration effect.

6.jQuery.BgSwitcher

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

jQuery.BgSwitcher implements the background image switching effect.

7.BackgroundScaleHoverEffect

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

Use CSSclip paths to reproduce the background zoom hover effect.

8.ImageGridMotionEffect

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

Provides a motion hover effect to the image of the background grid.

9.jquery.adaptive-backgrounds.js

Address: https://github.com/briangonzalez/jquery.adaptive-backgrounds.js

adaptive-background.js is a jQuery plugin that can dynamically adjust the background color of the parent tag according to the border color of the image in the div and img tags, which is somewhat similar to the effect of iTunes' album details.

10.fixed-background-effect

Address: https://codyhouse.co/demo/fixed-background-effect/index.html#0

Full screen scrolling background suspension effect.

11.jquery-warpdrive-plugin

Address: https://github.com/NiklasKnaack/jquery-warpdrive-plugin

query-warpdrive-plugin is a jquery plugin that can create cool starry sky background effects based on HTML5 canvas. This starry sky background effect can be flexibly configured through configuration parameters and can be interacted with the mouse.

Everyone said that there is no project to write on the resume, so I helped you find a project, and also attached [Building Tutorial] .

12.RainEffect

Some experimental rain and water droplet effects in different scenarios using WebGL.

Talents' [Three Links] is the biggest motivation for Xiaozhi to keep sharing. If there are any mistakes and suggestions in this blog, please leave a message from the talents. Finally, thank you for watching.

---

The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool Fundebug .

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

---

communicate with

If you have dreams and dry goods, search [Moving the World] pay attention to this Shawanzhi who is still washing dishes in the early morning.

This article has been included in GitHub https://github.com/qq449245884/xiaozhi , and there are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.