This post will describe about how to design a web page with a parallax scrolling effect. This is beginner friendly project which requires minimum HTML and CSS skills. But before designing, you have to knowledge about what is parallax scrolling website.
 |
| Parallax scrolling effect |
Let’s start with a definition of the parallax scrolling effect.
What is parallax scrolling?
Parallax scrolling is one kind of effect that creates an optical illusion when the user scrolls a webpage. Parallax scrolling effect is related to the background of the webpage. The content of the background moves at different speeds than the content in the foreground. The web designer creates a parallax scrolling website for a better user experience.
Skills required:-
HTML:-
Only <div> container, heading tags, and paragraph tags are used.
CSS:-
Any CSS skills you can use. The most important properties are background, padding, margins, and position.
In this post, we have to design a simple parallax scrolling webpage. Here in the webpage design five images are taken as div container’s background images. To fix all images at their positions background-attachment to fixed. To set the image position in the background background-position property is used. Other contents like headers and paragraphs are set using padding, position, and top, and left properties.
Source code of parallax scrolling effect:-
HTML:-
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Parallax scrolling webpage</title> <link rel="stylesheet" href="parallaxscroling.css" /> </head> <body> <div class="container-1"> <h1>Beutiful Flowers</h1> </div> <div class="container-2"> <h2>Tulips</h2> <p>Tulip flower was originally found in Kazakhastan in 16th century. Tulips plants required direct sunlight and brightness 6 hours per day. Tulips are known for perfact and deep love.The lifespan of tulip bulb is 2 to 5 years. Temprature is most important factor in tulip flower growth. generally tulip flowers grows in meadows,steppes and chaparral. you can also grow in pots with fast drainning solis. Tulips are grown in many colors like red, yellow, purple,white and many more.Blooming time of tulip is March to April and mid season types. The growing time of tulip is 12 to 14 weeks and it need veey little water. Tulips largly produced in Halland.</p> </div> <div class="container-3"> <h2>Lotus</h2> <p>Lotus actual name is Nelumbo nucifera also known as scared lotus, Laxmi lotus and indian lotus. It is refer to the family of Nymphaeaceae. The lotus flower is symbol of purity, because it grows in mud. Lotus is also symbols of strength, resilience and rebirth. The lotus also useful for human body because chemical in lotus kills cells of cancer,bacteria,reduce blood sugar and fat,purify heart and also used in skincare products. The loyus flowers are most probably found in asian countries. Lotus is the national flower of Thailand.lotuses are growns in various colors like red,white,pink,violet. Lotus is also national flower of India.</p> </div> <div class="container-4"> <h2>Dahila</h2> <p>The native of Dahila flower is Central America and Mexico. Dahila flowers are come from Asteraceae family. Dahila flowers are blooms in middle of summer. This flower is grown up under full sunlight. They are tall and living to love in dirt. It requires draining solis for grown up. The height range of this floer is 15 inches to more than 6 feet tall. The symbol of dahila flower is beauty,commitment and kindness. Dahila plants are live last at least three years. Dahila flowers are easy to grow and also planted in pots. Dahila flowers are also symbolize for good luck,to express support. Dahila plants can be multiply by dividing their tubes in winters.</p> </div> <div class="container-5"> <h2>Rose</h2> <p>Rose is comes from Rosaceae family. Rose needs moist,rich and fast water drained soil. Roses plant requires waters regularly. Roses are used for making skincare products. Rose is symbol of love, specially red roses are used to express love. The orignal name of rose was Roese or Rohese. Roses are called queen of flowers because of their pleasent smell, memory and easy caring. Roses are available in many colors white,pink,yellow,black and much more. It is most probably used in weddings. Roses are most popular flowers in world. Scientific name of rose is Rosa. Kngdom of roses are plantea. Roses are beneficial for skin,nails and hair. Rose water is widely used to wash face.</p> </div> </body> </html>
CSS:-
body { padding:0; margin:0; } .container-1,.container-2,.container-3,.container-4,.container-5 { height:500px; width:100%; margin:0; } .container-1 { position:absolute; top:0; bottom:0; background:url(pink-g191a07d79_1920.jpg); background-attachment:fixed; background-position:center; } .container-2 { position:absolute; top:505px; background:url(tulips-gff3713b67_1920.jpg); background-attachment:fixed; background-position:top; } .container-3 { position:absolute; top:1010px; background:url(lotus-gcac6519ae_1920.jpg); background-attachment:fixed; background-position:center; } .container-4 { position:absolute; top:1520px;; background:url(dahlia-g84ff66504_1920.jpg); background-attachment:fixed; background-position:center; } .container-5 { position:absolute; top:2030px; background:url(roses-gd98420a7b_1920.jpg); background-attachment:fixed; background-position:bottom; } h1 { position:absolute; top:200px; left:42%; background-color:#CC00FF; box-shadow:5px 5px 30px #CC00FF; color:#CCFF33; border-radius:10px; padding:15px; } h2 { position:absolute; top:-50px; left:0; width:1319px; border-radius:50px; padding:15px; text-align:center; background-color:#d6e3dc; box-shadow:3px 3px 20px #d6e3dc; color:#CC0000; } p { position:absolute; top:70px; left:40%; display:inline-block; height:50px; width:250px; background-color:#666666; opacity:0.7; box-shadow:4px 4px 25px #000000; color:#ffffff; border-radius:10px; padding:20px; text-align:justify; }
The output of the parallax scrolling effect
Summary
In this post, we learned how to design a webpage with a parallax scrolling effect. The "background-attachment:fixed" property plays a key role to create a parallax effect.
0 Comments