Showing how to make a parallax scrolling effect using CSS and HTML. For this effect we are basically fixing an image so the next part of the website will then scroll over the image. The CSS background properties are used for this. In this template I am using background-attachment which will be fixed. Background-position which is centered. Background repeat which is no repeat and Background-size which is cover. This will cover the entire width on any device and will not repeat itself.
Another effect I have used for Parallax scrolling is to add gradients and opacity with extra CSS.
The video demonstrates how you can add an extra element to the parallax scrolling effect. A gradient with a layer of opacity. For this effect I have used the background: linear-gradient CSS rule. To create it you need a combination of two colours so that it will transition from one colour to the next. This can either be a hex code or a rgba colour code.
The two colour combinations are the colors that will be used over the image going from one to the other. The number at the end of each other is the amount of opacity. This example would be from top to bottom but other directions can be applied.
From Bottom to Top
As you can see in the video a Bottom rule is applied in the CSS.
Radial Gradient
Comments
Post a Comment