[Share] a colorful Bubble Screen Saver effect (JS + CSS)

During File Sorting, a special Bubble Screen Saver effect that was made a long time ago was obtained, which was made by pure JS + CSS. In retrospect, we saw the popular bubble screensaver under XP at the beginning of last year and suddenly wanted to transplant it to the JS version. However, it was found that a lot of troublesome problems were not solved, so they did not continue.

Demo: http://www.etherdream.com/funnyscript/bubbles/

　　

Like the screen saver that comes with the XP system, a lot of bubbles emerge from one corner of the screen, and then bounce in the screen. The bubble has a translucent gradient, and the color is constantly changing.

At that time, this effect was analyzed for a lot of time. If Flash is used, it would be much simpler. just copy the gray channel of the bubble mask to the alpha channel of a solid background layer. However, unless HTML5 canvas is used in a webpage, pure CSS alone is not as powerful as Bitmap Processing. In CSS, there are only a few items related to transparency: PNG images, CSS Alpha values, rgba (), chroma filters, mask filters, alphaimageloader filters, and CSS 3 gradient.

　　

　　

 

You may say that this is not very simple. If you set various background-color for the PNG Image Layer, can you change the color. As a matter of fact, the background color is not only mixed into translucent pixels, but even the four corners outside the bubble are filled, so it becomes a square instead of a bubble, and the color is incorrect. Obviously not that simple.

　　

Because bubbles are translucent gradient materials, filters such as chroma and mask that filter monochrome are useless. The background color of rgba is also redundant. After the alphaimageloader filter is tested, the image actually displayed is on the background, which is the same as loading PNG. The gradient of css3 is difficult to work with the mask in this example, and the compatibility is also problematic.

The difficulty of this example is:The image itself is not only a translucent gradient, but the color of these gradient points can also be changed through scripts.. For a long time, since there is no simple method, it is better to use complicated ones ~

 

As we all know, the colors are composed of RGB. Adjust the ratio of the three primary colors to change the colors. We may leave the gray mask in three solid colors: R, G, and B and save them as three images. In this way, there are 100% red bubbles, green bubbles, and blue bubbles.Fold them in the same position, and set different CSS Alpha values for the three images, so they have bubbles of various colors and the translucent pixels are retained!

　　

　　

 

So the color problem is solved. However, it is worth noting that blue is at the top, while red is at the bottom. Even if the red layer is 100% opaque, it will be exploited by the PNG layers of the blue and green layers, which is obviously reduced. Therefore, you must add weights to the blue and green layers to ensure that the red channel is not so weak, while the blue channel is so obvious.However, the display effect in IE is still blue, which is very obvious., I don't know what is the difference between the IE transparency calculation method and the standard browser... (2010/2/1)

 

Later: At that time, I didn't understand the IE mask filter. The mask filter is not a monochrome filter,:Replace the RGB color of all vertices in the container with the specified RGB color, and the Alpha '= 255-alpha. Therefore, in IE, you only need to reverse the alpha channel of the masked image, and then use the alphaimageloader and mask filters at the same time to achieve the effect. The color parameter of the mask filter is the bubble color. In addition, in the WebKit kernel browser, you can use-WebKit-mask-image to directly apply an Image Mask! )