Parallax Effect With HTML and CSS

September 02, 2020

Parallax Effect With HTML and CSS

In this blog I'm gonna teach you that how you can create parallax effect in your website using only HTML and CSS.

Below take a peek at the final result.

Slide through the Instagram post to see the final result.

View this post on Instagram

Parallax Effect using CSS and HTML #css3 #cssakuhinpost #csstudents #cssanimation #acss #html5 #htmlcss #htmlcoding #htmlcode #htmlandcssbook #htmldesigner #javascriptdeveloper #javascripts #javascript30 #javascripttutorial #javascripta #javascriptcafe #websitedesign #websitedesigner #websitedevelopment #websitebuilder #websiteagency

A post shared by darkkodar (@_darkkodar_) on Sep 1, 2020 at 10:40am PDT

This tutorial is gonna be so simple that you require only very basic knowledge of HTML and CSS.
here's our code you can copy paste it to play with it:

HTML code :

STEP : 1

Create a section or devision of width 100% and height 100vh (in case you don't know what vh means it's viewport height.)
Example :

<section>

</section>

STEP : 2

apply css as follows to that element that we've created.(assuming we have provided that element the class as container )

.section {
background: url('image.png');
background-size: cover;
background-position: center;
background-attachment: fixed; /* Its the major property which does all the work we want */

}

background-attachment: fixed -- fixes the background at viewport and restrict its scrolling.

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section class="container container1">

</section>
    <div class="text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi aperiam repellat quia nobis explicabo cumque magnam sapiente delectus saepe atque, distinctio quis id ab. Aliquid a dolore ipsum animi atque.
        Nam aperiam porro deleniti rem quisquam, possimus nobis sed ipsam consequuntur, velit ea dolores facilis error. Unde, illo. Nobis dolor ratione fugit repellendus nisi maxime aliquid mollitia incidunt odit pariatur?
        Recusandae consequuntur adipisci ex quisquam obcaecati quasi voluptas dolore, ipsum placeat architecto ut illo sint vel, quod laboriosam deserunt amet quas, beatae mollitia rerum ipsa consectetur labore fuga ea. Asperiores?
        Voluptatibus a ab soluta recusandae, quam tempore alias quas ratione reprehenderit adipisci, deserunt dicta veniam corporis accusantium consequatur provident. Similique, facilis fuga! Expedita provident ipsum quia. Maxime soluta qui ullam.
        Magni quam repellat vel adipisci culpa, error nobis quae atque vero harum suscipit odit ipsa, laborum repellendus neque molestiae. Obcaecati minus deleniti doloremque laborum cumque suscipit illum mollitia voluptates rerum?
        Officia deleniti tenetur voluptates doloribus aut possimus corrupti aperiam sint voluptatibus quisquam vero suscipit laborum nostrum quam iure, dolorem nulla praesentium provident. Quia nobis aliquam, ipsam earum assumenda eius tempora.
        Cum dolores sed cupiditate eveniet sequi doloribus perferendis quibusdam architecto maxime. Harum quasi accusantium, molestiae labore expedita est soluta voluptate beatae. Voluptatibus tempore repudiandae, reiciendis quis excepturi eaque sint? Ullam?
        Blanditiis, ullam atque. Ullam quibusdam doloribus odit voluptatum repellat eos inventore delectus explicabo cumque nostrum. Ut minus, facilis neque eum earum sit ad veritatis sed similique harum excepturi asperiores laboriosam.
        Minus eos beatae quo debitis. Quibusdam, iste officiis deleniti nesciunt harum sed, fugit veritatis quidem repellat a maxime eveniet omnis perspiciatis. Alias fugit quae, libero vitae voluptatibus reiciendis labore quia.
        Voluptate impedit, perspiciatis, totam odio nobis, vitae culpa necessitatibus amet corrupti placeat recusandae cupiditate dolorem beatae temporibus natus architecto a! Delectus nesciunt pariatur exercitationem voluptates? Consequatur tempora cumque nisi autem!
    </div>

</section>
</body>
</html>

CSS code :

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'nunito', sans-serif;
    font-size: 1.1rem;
}

.container {
    width: 100%;
    height: 100vh;
}

.container1 {
    background: url('../1.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.container2 {
    background: url('../2.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.container3 {
    background: url('../3.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.container4 {
    background: url('../4.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.text {
    max-width: 1280px;
    margin: .5em auto;
    padding: 0.7em;
    color: #B2B2B2;
}

if you want more content like this lemme know in the comments. any query or feedback feel free to ask or give.

Here's the full video tutorial :

Search This Blog

Coding Websites - HTML, CSS and Javascript