Background design has become more and more popular in web design in recent years. Especially with the popularity of large screens, designers are increasingly using large resolution background images to fill the screen in their designs, which can create a unique visual effect and better convey what they want to convey to the user.
However, most of the design is just a matter of filling in a large background image. With the power of CSS and JavaScript, you can create some unique visuals that make the experience even more elegant.
Here’s a look at some of the different CSS and JavaScript techniques that have been used to create unique, large background visuals, as well as a brief description of the techniques used to create them, which can be quickly applied to your project.
CSS Blend Mode visual effects
CSS Blend Mode is a new property that implements the Blend Mode effect of layers in Photoshop. Use it and the mouse scrolling to achieve some really cool color scrolling effects. For example, the following example uses CSS Blend Mode and a background image to achieve an effect:
The detailed code can be viewed here.
Parallax scrolling animation
Parallax scrolling is widely used on the Web, and in many ways, this is two different images moving horizontally in different directions:
Detailed code address.
Diagonal cut visual effect
The visual effect of cutting the background image at an Angle has become all the rage in design circles these days. It may have taken a lot of extra work to achieve this effect before. Now, the transform property of CSS makes it very easy to achieve this effect:
Detailed code address.
Gradient animation visual effects
If you use a lot of background image animation, it may distract the user. In some scenarios, this is not a problem, because the animation effect of the gradient color is very weak, so it is not very visually disturbing:
Detailed code address.
Scroll to blur the visual effect
Scroll blur is also a very useful visual effect, especially if you want to use a background image to attract the user and allow the user to read the text on the image while scrolling. Just a little JavaScript is needed to change the background-size property of the image to achieve this effect:
Detailed code address.
Parallax scrolling Hero Image effect
The following effect is also used a lot. First, there is a large image at the top of the article with a mask layer on top of it to create a different color visual effect. Then we used a fade and fade animation to introduce the image, and finally we used a parallax effect to hide the image while scrolling. This effect requires absolutely little CSS code, no JavaScript.
Code address.
Move images to zoom in and out
The following effect is more commonly used on some e-commerce sites. When the mouse moves over the image, the image will follow the position of the mouse so that more details can be seen. This simple interaction is a great way to get the user’s attention.
Code address.
Before and after visual effects
This effect is often used to compare images. For example, on some compressed image websites, it is often used to compare before and after compression images, to highlight the compression effect.
Code address.
Scroll to change the color visual effect
Sometimes something as simple as changing the color of the background can make a difference. For example, the following effect, which changes the background color by listening to where the page is scrolling, can simply create a different visual effect.
Code address.
A bit of perspective
In the new design concept, the background image is no longer just a means of design expression, but a part of the content. This can also be seen on much of the Web today, where there are various ways to enhance the importance of images in content and various techniques to enhance the user experience through the use of images.
This article is based on the 10 Snippets for Creating Unique CSS Background Effects article.