Skip to main content

My new Desert Vehicle

Parallax scrolling effect using CSS and HTML


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

Popular posts from this blog

Cyberpunk 2077_ go to red dirt in the evening

Rumble link

Using bravenet site builder 2020

Using the free bravenet site builder which is on some hosting sites. Bravenet allows free hosting with a subdomain like wordpress and own domain with premium account. Bravenet site builder has several themes. In the video I am trying one of the themes and showing how you can edit and build a site with the site builder.

Install Pyautogui and Pip in Python

Install Pyautogui in Python The video above shows how you can easily download and install pyautogui into Python. Pyautogui is a Python library. For any python library to be installed you need to have Pip installed. Watch the video below to see how this is done. Install Pip in Python