Please note, this is a STATIC archive of website technosmarter.com from 20 Jul 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.
 
  1. Techno

Website Parallax effect | Fixed background


Website parallax effect is an attractive effect for website design. The parallax effect, effects on visitors. Website parallax effect is known as parallax Background . In the parallax effect, the background of the div block (parallax background, fixed background) should be fixed .div block scroll up and down but the background should be fixed. Website parallax effect is done by the CSS and HTML . We can create a Background div fixed by the CSS and then create the HTML div block that is scroll up and down above the CSS fixed background div.



Create a parallax effect on your website. It's a technique of CSS . We can say parallax web design or fixed background (parallax background).

First of create a CSS for parallax effect . 


.parallax {
    /* The background image used */
    background-image: url("https://technosmarter.com/html/images/website-parallax-effect.jpg");
 
    /* Set a specific height */
    min-height: 500px; 
 
    /* Createt  parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

In above CSS we have created background-attachment: fixed; . The background-attachment is a CSS attribute that is fixed the background (divblock fixed) .

In above CSS we have used a background-image . The background-image will display in fixed div and it also fixed at a position . This is the technique to fixed the background (Website parallax effect) .



Now call the css under the HTML . Create a HTML page that helps to scrolling a page above the fixed div .

Scroll up and down to see parallax effect 




 


Scroll Up and Down this page to see the parallax scrolling effect.When you will scroll up and down the background div will be fixed . So 
Scroll Up and Down this page to see the parallax scrolling effectS croll Up and Down this page to see the parallax scrolling effect .Scroll Up and Down this page to see the parallax scrolling effect

In above HTML we have created two div block . First div block is fixed by the CSS and the second div is not fixed. Second div class will scroll up and down above the fixed div( parallax design).

If you want to parallax effect on your website, you have to clear about how to fix a div block at a position .

A complete demo example for the website parallax effect .

Parallax effect example 


<!DOCTYPE>
<html>
<head>
<title>Simple CSS  </title>


</head>

 
Please note, this is a STATIC archive of website technosmarter.com from 20 Jul 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.

 

Scroll  up and down to see parallax  effect 

 


 


Scroll Up and Down this page to see the parallax scrolling effect.When you will scroll up and down the background div will be fixed . So 
Scroll Up and Down this page to see the parallax scrolling effectScroll Up and Down this page to see the parallax scrolling effectScroll Up and Down this page to see the parallax scrolling effect



</body>
</html>
Run

Run the CSS and HTML code and see the website parallax effect (Template parallax effect).


Please Share

Recommended Posts:-