Parallax Effect Html Css | Parallax Effect Website Scroll

Table of Contents

Parallax Effect Html Css | Parallax Effect Website Scroll

Welcome to Code With Random blog. We learn how to create a Parallax Effect. We use HTML & CSS  for Parallax Effect. Hope you enjoy our blog so let’s start with a basic HTML structure for the Parallax Effect.

Html Code 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parallax Effect Html Css</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Mountain Star Zlatibor</h1>
        <p>Zlatibor is a mountain of exceptional beauty whose special geographical properties have made this mountain a real gem of western Serbia.</p>
        <a href="#">Learn more</a>
      </div>
      
      <div class="blank"></div>
      
      <div class="container second">
        <div class="item">
          <div class="img img-first"></div>
          <div class="card">
            <h3>Rock climbing</h3>
            <p>The goal is to reach the summit of a formation or the endpoint of a usually pre-defined route without falling</p>
            <a href="#">Learn more</a>
          </div>
        </div>
        <div class="item">
          <div class="img img-second"></div>
          <div class="card">
            <h3>Caving</h3>
            <p>Exploring underground through networks of tunnels and passageways, which can be natural or artificial.</p>
            <a href="#">Learn more</a>
          </div>
        </div>
        <div class="item">
          <div class="img img-third"></div>
          <div class="card">
            <h3>Parachuting</h3>
            <p>Jumping from an aeroplane and falling through the air before opening your parachute.</p>
            <a href="#">Learn more</a>
          </div>
        </div>
      </div>
      
      <div class="blank"></div>
</body>
</html>

There is all HTML code for the Parallax Effect. Now, you can see output without CSS, then we write CSS for the Parallax Effect.

Output

Parallax Effect Html

CSS Code 

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@400;700&display=swap');

:root{
--color: #333; 
}

body {
  font-family: 'Red Hat Text', sans-serif;
}

.container {
  text-align: center;
  color: var(--color);
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url(https://images.unsplash.com/photo-1519120944692-1a8d8cfc107f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80);
  background-size: cover;
  background-position: center;
  
/*  this is where the magic happens:  */
  background-attachment: fixed;
}

h1 {
  font-weight: 700;
  font-size: 3rem;
}

p {
  max-width: 52ch;
  line-height: 1.5;
  padding: 1em;
}

a {
  display: inline-block;
  padding: 1em 3.5em;
  background-color: var(--color);
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 0.3em;
  font-weight: 700;
  letter-spacing: .5px;
  font-size: .875rem;
}

.blank,
.other {
  width: 100%;
  min-height: 60vh;
  background-color: var(--color);
}

.second {
  background-image:url(https://images.unsplash.com/photo-1514496959998-c01c40915c5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80);
  background-attachment: fixed;
  height: 1200px;
}

h3 {
  font-weight: 700;
  font-size: 1.6rem;
  margin-top: 1em;
}

.card > a {
  margin-bottom: 2em;
}

.item {
  display: flex;
  max-width: 320px;
  background-color: white;;
  flex-direction: column;
  align-items: center;
  border-radius: .5em;
  -webkit-box-shadow: 0px 29px 38px -15px rgba(0,0,0,0.43);
  -moz-box-shadow: 0px 29px 38px -15px rgba(0,0,0,0.43);
  box-shadow: 0px 29px 38px -15px rgba(0,0,0,0.43);
}

.img {
  width: 90%;
  height: 200px;
  background-color: lightgrey;
  background-size: cover;
  background-position: center;
  margin-top: 20px;
  border-radius: .3em;;
}

.img-first {
  background-image: url(https://images.unsplash.com/photo-1522163182402-834f871fd851?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1606&q=80);
}

.img-second {
  background-image: url(https://images.unsplash.com/photo-1628746404106-4d3843b231b3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8Y2F2aW5nfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60);
}

.img-third {
  background-image: url(https://images.unsplash.com/photo-1632853073412-782bf0279d65?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
}

.second {
  flex-direction: row;
  gap: 1.6em;
}

We have completed our CSS section,  Here is our final updated output CSS.

Final Output

parallax effect with Html Css

parallax effect with Html Css

We have completed our CSS section,  Here is our updated output with CSS. Hope you like the Parallax Effect, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you

This post teaches us to create a Parallax Effect using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

code by – Dusko Stamenic

Check out more…..

1.Html And Css Projects With Source Code

2. Add To Cart Button Html

3. Notes App Using Html Css Javascript

Share on:

Leave a Comment