What is Parallax?
Parallax is a section allows to scroll the elements by keeping the background image, video or color fixed thus creating an attractive effect. It is more suitable for 100% width themes nevertheless you can add on any part of the page. It is very easy to create a full width CSS parallax page layouts with simple piece of code. In this article let us show you how to create full width parallax page using CSS with an image, heading, short description and a button. You can learn more about Bootstrap full width parallax page in this article.
CSS for Parallax Section
First we will define the base style for the parallax element as below. The height of the section is fixed as 500px and the image is aligned with “background-size” and “background-position” properties.
/* Base Parallax Element Style*/
.paral {
height: 500px;
background-attachment: fixed;
background-size: cover;
background-position: 50% 50%;
}Next we will define styles for paragraph and heading elements.
/* Heading for Parallax Section */
.paral h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 80px;
text-align: center;
padding-top: 100px;
line-height: 100px;
}The button can be defined as a custom element or you can use default HTML button element. Below is the CSS for custom button element:
/* Custom Button Element for Parallax Section */
.paral button {
font-size: 30px;
border-radius: 5px;
color: #808080;
background-color: #a0f0f0;
padding: 6px 12px;
line-height: 40px;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
}
div.button {
text-align: center;
}Now we are ready with the base styles and the only thing needed more is the background images for parallax sections. We will create three sections in this example, you can create as many as sections you want.
/* Background Images for 3 Parallax Sections */
.paralsec1 {
background-image: url("https://img.webnots.com/2015/11/parallax1.jpg");
}
.paralsec2 {
background-image: url("https://img.webnots.com/2015/11/parallax2.jpg");
}
.paralsec3 {
background-image: url("https://img.webnots.com/2015/11/parallax3.jpg");
}Ensure to have images with appropriate width so that it can spread to the full width. Also instead of image you can use solid or gradient background color using “background-color” property. If you want to have only one parallax section then add the “background-image” code to the base class “.paral”.
The complete CSS will look like below and you should add the code between <head>…</head> tags of your page.
<style>
/* Base Parallax Element Style*/
.paral {
height: 500px;
background-attachment: fixed;
background-size: cover;
background-position: 50% 50%;
}
/* Paragrapgh for Parallax Section */
.paral p {
font-size: 40px;
color:#f5f5f5;
text-align: center;
line-height: 100px;
}
/* Heading for Parallax Section */
.paral h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 80px;
text-align: center;
padding-top: 100px;
line-height: 100px;
}
/* Custom Button Element for Parallax Section */
.paral button {
font-size: 30px;
border-radius: 5px;
color: #808080;
background-color: #a0f0f0;
padding: 6px 12px;
line-height: 40px;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
}
div.button {
text-align: center;
}
/* Images for 3 Parallax Sections */
.paralsec1 {
background-image: url("https://img.webnots.com/2015/11/parallax1.jpg");
}
.paralsec2 {
background-image: url("https://img.webnots.com/2015/11/parallax2.jpg");
}
.paralsec3 {
background-image: url("https://img.webnots.com/2015/11/parallax3.jpg");
}
</style>HTML for Parallax Sections
Since we have three parallax sections, we need to have three sets of HTML code. Basically you can add any HTML elements on the parallax section, in our example we play around with heading, short description and a custom button element.
<!-- First Parallax Section with Heading and Paragraph -->
<div class="paral paralsec1">
<h1>Here is Heading 1</h1>
<p>This is a sample text.</p>
</div>
<!-- Second Parallax Section with Heading, Paragraph and Custom Button -->
<div class="paral paralsec2">
<h1>Here is Heading 2</h1>
<p>This is a sample text.</p>
<div class="button"><button><a href="#">This is a button</a></button></div>
</div>
<!-- Third Parallax Section Heading, Paragraph and Weebly Button -->
<div class="paral paralsec3">
<h1>Here is Heading 3</h1>
<p>This is a sample text.</p>
<a class="wsite-button wsite-button-small wsite-button-normal" href="#">
<span class="wsite-button-inner">This is a link</span></a>
</div>Add this HTML code inside the <body> of your page. Publish your site and see the attractive parallax page with full width. You can add more parallax sections by simply adding more HTML blocks with different image and elements.
Leave a Reply
Your email is safe with us.