{"id":4950,"date":"2020-06-30T14:14:00","date_gmt":"2020-06-30T14:14:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=4950"},"modified":"2020-08-18T14:28:19","modified_gmt":"2020-08-18T14:28:19","slug":"create-simple-parallax-scrolling-effect-in-hero-section-using-pure-css","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/create-simple-parallax-scrolling-effect-in-hero-section-using-pure-css\/","title":{"rendered":"Create Simple Parallax Scrolling Effect in Hero Section using Pure CSS"},"content":{"rendered":"\n

In this tutorial you will learn how to create a simple pure CSS parallax scrolling effect in the hero section of your landing page. Parallax scrolling is an effect where different visual elements on the page move at different speeds when the user scrolls. This creates a 3D effect adding a sense of depth and enhancing the visitor\u2019s experience. This GIF shows what you will be able to create by the end of this tutorial.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You need to have basic knowledge of HTML and CSS to begin with. We will dive into a few advanced CSS topics such as perspective<\/code> and transform<\/code> towards the end. Let\u2019s get started.<\/p>\n\n\n\n

We are going to break this tutorial into two parts. In the first part we will be achieving almost the same look and feel of the page except for the parallax effect. That is, there will be no 3D effect. Just simple scrolling. If you already know how to do this, you can quickly rush through\u00a0Part 01<\/strong>. In the second part, we will learn the advanced CSS concepts required and create the parallax scrolling effect.<\/p>\n\n\n\n

Part 01: Without parallax<\/h2>\n\n\n\n

Looking at the GIF, you can see that we have a header section with a background image occupying full viewport width and height, followed by a text section. Let us create this step by step.<\/p>\n\n\n\n

Setting up<\/h4>\n\n\n\n

Create a blank HTML document and name it index.html<\/code>. Add the basic HTML skeleton. If you use Visual Studio Code, all you need to do is type \u201c!\u201d and hit enter. You will end up with this.<\/p>\n\n\n\n

<!<\/code>DOCTYPE<\/code> html><\/code><<\/code>html<\/code> lang<\/code>=<\/code>\"en\"<\/code>><\/code><<\/code>head<\/code>><\/code><<\/code>meta<\/code> charset<\/code>=<\/code>\"UTF-8\"<\/code>><\/code><<\/code>meta<\/code> name<\/code>=<\/code>\"viewport\"<\/code> content<\/code>=<\/code>\"width=device-width, initial-scale=1.0\"<\/code>><\/code><<\/code>title<\/code>>Document<\/<\/code>title<\/code>><\/code><\/<\/code>head<\/code>><\/code><<\/code>body<\/code>> <\/code> <\/<\/code>body<\/code>><\/code><\/<\/code>html<\/code>><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

I have used the font \u2018Roboto\u2019 for the heading and \u2018Lato\u2019 for the paragraphs. So add the following line below the title tag to embed these using Google fonts.<\/p>\n\n\n\n

<<\/code>link<\/code> href<\/code>=<\/code>\"https:\/\/fonts.googleapis.com\/css2?family=Lato:wght@300&family=Roboto<\/a>+Condensed:wght@300;700&display=swap\"<\/code> rel<\/code>=<\/code>\"stylesheet\"<\/code>><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Create your stylesheet and name it style.css<\/code>. Link the stylesheet to your HTML document below the Font Awesome CDN link using<\/p>\n\n\n\n

<<\/code>link<\/code> rel<\/code>=<\/code>\"stylesheet\"<\/code> href<\/code>=<\/code>\"style.css\"<\/code>><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

You can download the background image used in the demo from Pexels<\/a> or choose to include your own. But don\u2019t forget to name it bg.jpg<\/code>.<\/p>\n\n\n\n

HTML<\/h4>\n\n\n\n

Add the following HTML code within body<\/code> for the header:<\/p>\n\n\n\n

<<\/code>header<\/code>><\/code><<\/code>div<\/code>><\/code><<\/code>h1<\/code>>Parallax Scrolling Effect<\/<\/code>h1<\/code>><\/code><<\/code>h2<\/code>>Create this simple parallax effect using pure CSS<\/<\/code>h2<\/code>><\/code><\/<\/code>div<\/code>><\/code><\/<\/code>header<\/code>><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Add the text section below that.<\/p>\n\n\n\n

<<\/code>section<\/code>><\/code><<\/code>div<\/code> class<\/code>=<\/code>\"container\"<\/code>><\/code><<\/code>h3<\/code>>Some cool title here<\/<\/code>h3<\/code>><\/code><<\/code>p<\/code>><\/code>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores harum veritatis nemo magni odio reprehenderit atque, esse animi porro suscipit vero nobis modi quis. Exercitationem quasi beatae, assumenda officia illum sunt. Cum voluptas maiores vitae eius hic inventore deleniti placeat perferendis quam ut nostrum maxime optio voluptatibus ab laboriosam, quia consectetur atque minus?<\/code><\/<\/code>p<\/code>><\/code><<\/code>p<\/code>><\/code>Adipisci amet aut sint voluptates delectus aperiam? Veniam ab illum enim in libero nihil culpa explicabo perspiciatis veritatis non repellendus architecto excepturi nostrum porro voluptatem aperiam animi asperiores, a voluptatibus temporibus minima voluptas ipsa! Recusandae nostrum, aut, voluptates est error iusto, eaque excepturi soluta quas maiores amet.<\/code> <\/<\/code>p<\/code>><\/code><\/<\/code>div<\/code>><\/code><\/<\/code>section<\/code>><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Everything else is now taken care of by CSS.<\/p>\n\n\n\n

CSS<\/h4>\n\n\n\n

In style.css<\/code>, begin with some common styles for all elements:<\/p>\n\n\n\n

* {<\/code>margin<\/code>: <\/code>0<\/code>;<\/code>padding<\/code>: <\/code>0<\/code>;<\/code>box-sizing<\/code>: <\/code>border-box<\/code>;<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Add these styles to html<\/code> and body<\/code>:<\/p>\n\n\n\n

html {<\/code>width<\/code>: <\/code>100%<\/code>;<\/code>height<\/code>: <\/code>100%<\/code>;<\/code>}<\/code>body {<\/code>width<\/code>: <\/code>100%<\/code>;<\/code>height<\/code>: <\/code>100%<\/code>;<\/code>\/* Text styles *\/<\/code>font-family<\/code>: <\/code>'Lato'<\/code>,<\/code>sans-serif<\/code>;<\/code>font-size<\/code>: <\/code>18px<\/code>;<\/code>font-weight<\/code>: <\/code>300<\/code>;<\/code>color<\/code>: <\/code>#212121<\/code>;<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Make the header<\/code> occupy full viewport width and height.<\/p>\n\n\n\n

header {<\/code>width<\/code>: <\/code>100%<\/code>;<\/code>min-height<\/code>: <\/code>100<\/code>vh;<\/code>position<\/code>: <\/code>relative<\/code>;<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Let\u2019s create the ::before<\/code> pseudo element for header and add the background image.<\/p>\n\n\n\n

header::before {<\/code>content<\/code>: <\/code>\"\"<\/code>;<\/code>position<\/code>: <\/code>absolute<\/code>;<\/code>top<\/code>: <\/code>0<\/code>;<\/code>left<\/code>: <\/code>0<\/code>;<\/code>right<\/code>: <\/code>0<\/code>;<\/code>bottom<\/code>: <\/code>0<\/code>;<\/code>display<\/code>: <\/code>block<\/code>;<\/code>background<\/code>: <\/code>url<\/code>(<\/code>'bg.jpg'<\/code>);<\/code>background-size<\/code>: <\/code>cover<\/code>;<\/code>z-index<\/code>: <\/code>0<\/code>;<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

You can now see your image occupying full screen. Now let\u2019s bring the text in front and give it the required styling:<\/p>\n\n\n\n

header div {<\/code>position<\/code>: <\/code>absolute<\/code>;<\/code>z-index<\/code>: <\/code>1<\/code>;<\/code>top<\/code>: <\/code>50%<\/code>;<\/code>padding<\/code>: <\/code>0<\/code> 30px<\/code>;<\/code>font-family<\/code>: <\/code>'Roboto Condensed'<\/code>, <\/code>sans-serif<\/code>;<\/code>}<\/code>header h<\/code>1<\/code> {<\/code>font-size<\/code>: <\/code>4.5<\/code>rem;<\/code>font-weight<\/code>: <\/code>700<\/code>;<\/code>color<\/code>: <\/code>#009688<\/code>;<\/code>}<\/code>header h<\/code>2<\/code> {<\/code>font-size<\/code>: <\/code>2.2<\/code>rem;<\/code>font-weight<\/code>: <\/code>300<\/code>;<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

You can now see this:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Add these to style the text section:<\/p>\n\n\n\n

section{<\/code>width<\/code>: <\/code>100%<\/code>;<\/code>background<\/code>: <\/code>white<\/code>;<\/code>}<\/code>.container {<\/code>margin<\/code>: <\/code>auto<\/code>; <\/code>\/* To center the text horizontally *\/<\/code>max-width<\/code>: <\/code>1000px<\/code>; <\/code>\/* Limiting the width for extra large screens *\/<\/code>padding<\/code>: <\/code>80px<\/code> 40px<\/code>;<\/code>}<\/code>.container h<\/code>3<\/code> {<\/code>font-family<\/code>: <\/code>'Roboto Condensed'<\/code>, <\/code>sans-serif<\/code>;<\/code>font-weight<\/code>: <\/code>700<\/code>;<\/code>font-size<\/code>: <\/code>3<\/code>rem;<\/code>}<\/code>.container p {<\/code>padding-top<\/code>: <\/code>30px<\/code>;<\/code>line-height<\/code>: <\/code>1.8<\/code>;<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

So far we haven\u2019t done anything exciting yet. Let\u2019s get to\u00a0Part 02<\/strong>\u00a0where we create the actual magic (with just 8 more lines of CSS).<\/p>\n\n\n\n

Part 02: Adding parallax effect<\/h2>\n\n\n\n

To create a parallax effect we need to create a sense of depth by introducing a 3rd dimension. The CSS property perspective<\/code> helps us do just that. Let\u2019s say we add perspective:20px<\/code> to an element. This gives a depth of 20px to that element. This means, a 3D space is created, and so the child elements can be transformed to make them appear to be positioned near or far from the viewer, creating a sense of depth.<\/p>\n\n\n\n

So let\u2019s add perspective<\/code> to our body<\/code> element along with overflow<\/code> properties.<\/p>\n\n\n\n

body {<\/code>\/* Existing styles here *\/<\/code>perspective<\/code>: <\/code>4px<\/code>; <\/code>\/* The depth *\/<\/code>overflow-x<\/code>: <\/code>hidden<\/code>;<\/code>overflow-y<\/code>: <\/code>scroll<\/code>;<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

The overflow-x<\/code> is hidden because we do not want any horizontal scrollbar resulting due to the 3D space created.<\/p>\n\n\n\n

We also need to set overflow: hidden<\/code> to the root element.<\/p>\n\n\n\n

html {<\/code>\/* Existing styles here *\/<\/code>overflow<\/code>: <\/code>hidden<\/code>;<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

If you check your browser now, nothing has changed yet. It\u2019s because we have just created the 3D space but not transformed any objects within.<\/p>\n\n\n\n

The parallax effect happens when two or more elements are placed at different distances from the viewer. For that, we use the CSS transform<\/code> property and \u201ctranslate\u201d the objects along the z-axis. So let\u2019s transform the background image and the div<\/code> within the header.<\/p>\n\n\n\n

header::before {<\/code>\/* Existing styles here *\/<\/code>transform<\/code>: translateZ(<\/code>-4px<\/code>);<\/code>}<\/code>header div {<\/code>\/* Existing styles here *\/<\/code>transform<\/code>: translateZ(<\/code>-2px<\/code>);<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

We are moving the background image 4px<\/code> away from the viewer and the headings 2px<\/code> away. So when you scroll down, they seem to move at different speeds. Check your browser now. Still nothing right?<\/p>\n\n\n\n

When we want the objects to be transformed in a 3D space, we need an additional transform-style<\/code> property. This property when applied to an element, determines if that element\u2019s children are positioned in 3D space, or flattened.<\/p>\n\n\n\n

To understand perspective, transforms and all this in more depth, you can refer to the detailed guide to 3D transforms with CSS<\/a>.<\/p>\n\n\n\n

For now, add this property to header:<\/p>\n\n\n\n

header {<\/code>\/* Existing styles here *\/<\/code>transform-style<\/code>: preserve<\/code>-3<\/code>d;<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Now look at the result in your browser. Surprised to see that your background image and headings have shrunk in size? Keeping that aside for a moment, scroll down and you will see that the parallax effect is actually created! Why did these two elements shrink? It\u2019s because they have moved farther away from you, remember? Objects that move farther appear smaller. Simple. But how to fix this? There\u2019s a scale<\/code> factor to be added along with translateZ<\/code> to correct the size. This Google article<\/a> gives us a formula to calculate the scale<\/code> to apply.<\/p>\n\n\n\n

scale = (perspective - distance) \/ perspective<\/code><\/p>\n\n\n\n

For our background image, perspective<\/code> is 4px<\/code> and distance (translateZ<\/code>) is -4px<\/code>. Calculate:<\/p>\n\n\n\n

scale = (4 - (-4))\/4 = 8\/4 = 2<\/code><\/p>\n\n\n\n

Similarly, for header div<\/code>, the scale is 1.5. Let\u2019s include these. Change the transform<\/code> properties of both the elements to include scale<\/code>.<\/p>\n\n\n\n

header::before {<\/code>transform<\/code>: translateZ(<\/code>-4px<\/code>) <\/code>scale<\/code>(<\/code>2<\/code>);<\/code>}<\/code>header div {<\/code>transform<\/code>: translateZ(<\/code>-2px<\/code>) <\/code>scale<\/code>(<\/code>1.5<\/code>);<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

This fixes it. Now scroll down. Do you see the effect? The only issue is that our text section is being overlapped by the header. The solution to this is to set a higher z-index<\/code> to the section<\/code> (along with a position<\/code> property, otherwise z-index<\/code> won\u2019t work).<\/p>\n\n\n\n

section{<\/code>\/* Existing styles here *\/<\/code>position<\/code>: <\/code>relative<\/code>;<\/code>z-index<\/code>: <\/code>2<\/code>;<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

And there it is! A simple neat parallax scrolling effect for our hero section is achieved.<\/p>\n\n\n\n

Extend this newly acquired skill and go create beautiful, pure CSS parallax scrolling websites. But be careful not to overdo it. If you got stuck somewhere in between and couldn\u2019t achieve the desired output, here\u2019s the complete source code.<\/p>\n","protected":false},"excerpt":{"rendered":"

In this tutorial you will learn how to create a simple pure CSS parallax scrolling effect in the hero section of your landing page. Parallax scrolling is an effect where different visual elements on the page move at different speeds when the user scrolls. This creates a 3D effect adding a sense of depth and […]<\/p>\n","protected":false},"author":2,"featured_media":4952,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,145],"tags":[25,56,94,146,136,116,217],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/pure-css-parallax-01.png","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1hQ","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4950"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=4950"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4950\/revisions"}],"predecessor-version":[{"id":4953,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4950\/revisions\/4953"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/4952"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=4950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=4950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=4950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}