Home Web Design CSS Parallax Effect In CSS | Parallax Scrolling Pure CSS

Parallax Effect In CSS | Parallax Scrolling Pure CSS

April 30, 2019

8743

Can we create Parallax effect without JavaScript? Yes, Today I will show you how to create Parallax Effect In CSS without JS. In other words, Parallax Scrolling in Pure CSS.

What is parallax?

First, You should know what is parallax. The parallax effect attempts to replicate this experience of foreground objects moving faster than their counterparts from the background. Understand it better: When we are in the car, we see trees, houses, etc. which passes through our eyes in front. Things which are closest to you and the road itself quickly moves into a blur, while the things that are away, the move slowly.

These types of effects we use in web design or development. Mostly parallax effects are built-in JavaScript or any javascript framework, But today I am sharing a Parallax effect in CSS only. You can see this effect when you scroll up or down on the webpage. This pure CSS parallax scrolling program is easy to understand for beginners.

Using this program you can create an awesome single page website with a stunning look. This effect will be perfect for your personal or portfolio website. Maybe now you thinking how this program actually is. Don’t worry there is a preview for you. See the video preview given below for getting an idea of how it looks like.

Preview Of Program

This is the video preview of this pure CSS parallax program.

https://webdevtrick.com/wp-content/uploads/parallax-effect-in-css.mp4?_=1

Now you can this program visually. If you like this then go for the source code.

Parallax Effect In CSS Source Code

Before sharing source code, Let’s talk about this program. As you know this is a pure CSS program, I created this program with the help of CSS background-attachment property. This is a good example of what you can do with CSS. This is fully based on HTML and CSS only no javascript used.

Also, another CSS property helps in this program, which is position. Previously I had shared many pure CSS programs, But I think this program will be much effective and useful for beginners.

You have to create only 2 files for this program. One for HTML and One for CSS. Follow the steps for creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Parallax | Webdevtrick.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
</head>

<body>
<div class="firstimg">
      <div class="text">
        <span class="border">
          Webdevtrick
        </span>
      </div>
    </div>

    <section class="section section-dark">
      <h2>About</h2>
      <p>
        Web Dev Trick is a blog for web designers, graphic designers, web developers &amp; SEO Learner as well as freelancers seeking to broaden their mind and also enhance their skills. We highly believe that top quality is much better than quantity. We share resources regarding design &amp; development, graphics, WordPress as well as Coding.
      </p>
    </section>

    <div class="secondimg">
      <div class="text">
        <span class="border trans">
          webdevtrick
        </span>
      </div>
    </div>

    <section class="section section-dark">
      <h2>What We Do?</h2>
      <p>
        We share HTML5, CSS3,  Bootstrap, JavaScript, PHP and many more web language’s  Examples, Tutorials &amp; Source Code as well as Graphic Desing and SEO’s stuff.
      </p>
    </section>

    <div class="thirdimg">
      <div class="text">
        <span class="border trans">
          webdevtrick
        </span>
      </div>
    </div>

    <section class="section section-dark">
      <h2>What Make Us Different?</h2>
      <p>
        Web Dev Trick is a digital playground for individuals who want to learn. Our study will keep you on top of the most recent trends with some of the most effective and interesting content. You’ll discover here guidelines, case studies, development, design &amp; advancement sources, suggestions &amp; methods, and various other associated internet articles to help you develop beneficial ability in your individual and also specialist job.
      </p>
    </section>

    <div class="forthimg">
      <div class="text">
        <span class="border">
			<a href="https://webdevtrick.com">Visit webdevtrick</a>
        </span>
      </div>
    </div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>CSS Parallax | Webdevtrick.com</title>

</head>

<body>

Webdevtrick

</span>

</div>

<h2>About</h2>

<p>

Web Dev Trick is a blog for web designers, graphic designers, web developers & SEO Learner as well as freelancers seeking to broaden their mind and also enhance their skills. We highly believe that top quality is much better than quantity. We share resources regarding design & development, graphics, WordPress as well as Coding.

</p>

</section>

webdevtrick

</span>

</div>

<p>

We share HTML5, CSS3, Bootstrap, JavaScript, PHP and many more web language’s Examples, Tutorials & Source Code as well as Graphic Desing and SEO’s stuff.

</p>

</section>

webdevtrick

</span>

</div>

<h2>What Make Us Different?</h2>

<p>

Web Dev Trick is a digital playground for individuals who want to learn. Our study will keep you on top of the most recent trends with some of the most effective and interesting content. You’ll discover here guidelines, case studies, development, design & advancement sources, suggestions & methods, and various other associated internet articles to help you develop beneficial ability in your individual and also specialist job.

</p>

</section>

<a href="https://webdevtrick.com">Visit webdevtrick</a>

</span>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/* code by webdevtrick ( https://webdevtrick.com ) */
body,
html {
  height: 100%;
  margin: 0;
  font-size: 16px;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.8em;
  color: #666;
}

.firstimg,
.secondimg,
.thirdimg,
.forthimg {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.7;
  /*
    fixed = parallax
    scroll = normal
  */
  background-attachment: fixed;
}

.firstimg {
  background-image: url(https://images.pexels.com/photos/943096/pexels-photo-943096.jpeg);
  min-height: 100%;
}

.secondimg {
  background-image: url(https://images.pexels.com/photos/1342460/pexels-photo-1342460.jpeg);
  min-height: 400px;
}

.thirdimg {
  background-image: url(https://images.pexels.com/photos/34580/pexels-photo.jpg);
  min-height: 400px;
}

.forthimg {
  background-image: url(https://images.pexels.com/photos/248515/pexels-photo-248515.png);
  min-height: 100%;
}

.section {
  text-align: center;
  padding: 50px 80px;
}


.section-dark {
  background-color: black;
  color: #ddd;
}

.text {
  position: absolute;
  top: 50%; 
  width: 100%;
  text-align: center;
  color: #000;
  font-size: 27px;
  letter-spacing: 8px;
  text-transform: uppercase;
}

.text .border {
  background-color: #111;
  color: #fff;
  padding: 20px;
}

@media (max-width: 568px) {
  .firstimg,
  .secondimg,
  .thirdimg,
  .forthimg {
    background-attachment: scroll;
  }
}
a { 
  text-decoration: none;
	color: white;
}

/* code by webdevtrick ( https://webdevtrick.com ) */

body,

html {

height: 100%;

margin: 0;

font-size: 16px;

font-family: "Lato", sans-serif;

font-weight: 400;

line-height: 1.8em;

color: #666;

}

.firstimg,

.secondimg,

.thirdimg,

.forthimg {

position: relative;

background-position: center;

background-size: cover;

background-repeat: no-repeat;

opacity: 0.7;

fixed = parallax

scroll = normal

background-attachment: fixed;

}

.firstimg {

background-image: url(https://images.pexels.com/photos/943096/pexels-photo-943096.jpeg);

min-height: 100%;

}

.secondimg {

background-image: url(https://images.pexels.com/photos/1342460/pexels-photo-1342460.jpeg);

min-height: 400px;

}

.thirdimg {

background-image: url(https://images.pexels.com/photos/34580/pexels-photo.jpg);

min-height: 400px;

}

.forthimg {

background-image: url(https://images.pexels.com/photos/248515/pexels-photo-248515.png);

min-height: 100%;

}

.section {

text-align: center;

padding: 50px 80px;

}

.section-dark {

background-color: black;

color: #ddd;

}

.text {

position: absolute;

top: 50%;

width: 100%;

text-align: center;

color: #000;

font-size: 27px;

letter-spacing: 8px;

text-transform: uppercase;

}

.text .border {

background-color: #111;

color: #fff;

padding: 20px;

}

@media (max-width: 568px) {

.firstimg,

.secondimg,

.thirdimg,

.forthimg {

background-attachment: scroll;

}

a {

text-decoration: none;

color: white;

}

That’s It. Now you have successfully created a parallax effect in CSS. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

56 COMMENTS

Syed Sirat Ullah May 1, 2019 At 5:22 am

just love your simple tricks. it’s really fun

Reply
- shaan May 1, 2019 At 8:39 am
  
  Thank you very much, Stay Connected.
  
  Reply
Igor Nardo May 1, 2019 At 9:53 am

The post is nice and well written, and I was super curious to have a look, but then I got very disappointed by the major misleading substance of the tutorial: this, in fact, is not parallax, is just a static image!
It takes literally 2 like of code to do that:
background-size: 100vw 100vh;
Background-position: fixed.

And that’s all! But is NOT parallax. Parallax is a movement of tha backgorund at a different speed than the page.

There is no backgorund movement in the final result of this strategy.

Also, in mobile, you can achieve the same with some small tricks (putting the backgorund inn a 100% fixed container, that fills the safari size problem).

So, meh…

Reply
- shaan May 1, 2019 At 1:02 pm
  
  Sorry bro, But I can create this only using CSS. Thank you for your comment, I will improve myself.
  
  Reply
Como Agrandar El Pene May 8, 2019 At 1:50 pm

Please let me know if you’re looking for a writer for your
weblog. You have some really great articles and I believe I would be a
good asset. If you ever want to take some of the load off, I’d love to write
some articles for your blog in exchange for a link back to mine.
Please send me an e-mail if interested. Thank you!

Reply
como agrandar el pene May 8, 2019 At 2:10 pm

Hi, everything is going fine here and ofcourse every one is sharing information, that’s truly excellent, keep up writing.

Reply
- shaan May 8, 2019 At 2:24 pm
  
  Thank you very much
  
  Reply
pastillas para alargar el pené May 8, 2019 At 2:46 pm

Nice blog here! Also your web site loads up fast!
What web host are you using? Can I get your affiliate link to your host?
I wish my site loaded up as quickly as yours lol

Reply
- shaan May 8, 2019 At 3:11 pm
  
  Hey bro, Thanks for commenting. I don’t have an affiliate account. I am using a cloud hosting of Hostgator.
  
  Reply
almentar o penes May 10, 2019 At 2:14 pm

Hello! I know this is kinda off topic but I was wondering which blog platform are you using for this site?
I’m getting sick and tired of WordPress because I’ve
had problems with hackers and I’m looking at options for another platform.
I would be awesome if you could point me in the direction of a good platform.

Reply
- shaan May 10, 2019 At 3:06 pm
  
  Bro, I am also using WordPress, Don’t install cracked plugin or themes.
  
  Reply
alargamiento pene May 14, 2019 At 9:58 am

Good day very cool site!! Man .. Beautiful .. Superb ..
I’ll bookmark your site and take the feeds additionally? I am glad to find numerous
helpful info here within the submit, we’d like develop more techniques on this regard, thank
you for sharing. . . . . .

Reply
- shaan May 14, 2019 At 12:12 pm
  
  Thank you very much, stay connected.
  
  Reply
agrandamiento de pene May 14, 2019 At 4:26 pm

Good post! We are linking to this great article on our
site. Keep up the good writing.

Reply
- shaan May 14, 2019 At 5:14 pm
  
  Thank you very much.
  
  Reply
como almentar o penes naturalmente May 15, 2019 At 10:27 am

Very shortly this website will be famous amid all blogging and site-building
viewers, due to it’s nice content

Reply
- shaan May 15, 2019 At 12:56 pm
  
  Thank you very much!
  
  Reply
como aumentar o penes May 15, 2019 At 10:39 am

Because the admin of this web site is working, no hesitation very soon it will be renowned, due to its feature
contents.

Reply
- shaan May 15, 2019 At 12:57 pm
  
  Thank you very much, Please stay connected.
  
  Reply
aumento peniano natural May 15, 2019 At 2:55 pm

Nice weblog right here! Additionally your site so
much up very fast! What host are you the usage of? Can I am getting your
affiliate hyperlink in your host? I want my web site loaded up as quickly as yours lol

Reply
- shaan May 15, 2019 At 3:41 pm
  
  Many peoples asking for my hosting, I will add my affiliate link soon. If you in hurry, take any cloud hosting and optimize your site
  
  Reply
- shaan May 15, 2019 At 4:01 pm
  
  Hey now you can check I have added on my header, named My Hosting
  
  Reply
tamano del pene May 15, 2019 At 7:31 pm

You really make it seem really easy together with your presentation but I to find this matter to be really one thing that I think I’d by no means understand.
It seems too complex and very huge for me. I’m having a look forward to
your subsequent post, I’ll attempt to get the cling of
it!

Reply
pene grande May 15, 2019 At 7:47 pm

Thank you for the auspicious writeup. It in truth was a entertainment account it.
Look advanced to far added agreeable from you!
By the way, how can we communicate?

Reply
- shaan May 16, 2019 At 3:55 am
  
  You can massage me on facebook – https://www.facebook.com/webdevtrick
  
  Reply
pene grande May 15, 2019 At 9:25 pm

If some one desires expert view regarding
blogging and site-building afterward i suggest
him/her to pay a visit this website, Keep up the nice job.

Reply
- shaan May 16, 2019 At 3:57 am
  
  Thank you, buddy! Stay connected.
  
  Reply
agranda tu pene May 16, 2019 At 12:28 am

Wonderful blog! Do you have any recommendations for aspiring writers?
I’m planning to start my own site soon but I’m a little lost on everything.
Would you suggest starting with a free platform like WordPress or go
for a paid option? There are so many options out there that I’m
completely confused .. Any suggestions? Thanks!

Reply
- shaan May 16, 2019 At 3:59 am
  
  Bro, get a hosting then install WordPress.
  
  Reply
como agrandar el pene May 16, 2019 At 1:35 am

You need to take part in a contest for one of the finest blogs on the net.
I will highly recommend this website!

Reply
- shaan May 16, 2019 At 3:59 am
  
  Thank you for your compliment, stay connected.
  
  Reply
como agrandar el pene May 16, 2019 At 5:14 am

Paragraph writing is also a fun, if you be acquainted with after that you can write otherwise it is complicated to write.

Reply
- shaan May 16, 2019 At 5:40 am
  
  hehe, thank you.
  
  Reply
agrandar el pene May 16, 2019 At 8:56 am

I would like to thank you for the efforts you’ve put in writing this website.
I am hoping to see the same high-grade blog posts by you later on as well.
In truth, your creative writing abilities has motivated me to
get my own blog now 😉

Reply
- shaan May 16, 2019 At 10:11 am
  
  Thank you very much.
  
  Reply
Agrandar El Pene May 16, 2019 At 2:14 pm

Nice post. I learn something totally new and challenging
on websites I stumbleupon on a daily basis. It’s always exciting to read
through articles from other writers and use something from their sites.

Reply
- shaan May 16, 2019 At 2:16 pm
  
  Thank you very much. I regularly update this type of program. Stay connected.
  
  Reply
alargamiento pene May 16, 2019 At 2:40 pm

What’s up Dear, are you genuinely visiting this web page regularly, if so after that you will absolutely take good know-how.

Reply
- shaan May 16, 2019 At 3:07 pm
  
  hehe! thank you very much.
  
  Reply
pene mas grande May 16, 2019 At 4:51 pm

It is actually a great and helpful piece of info. I am glad that you
shared this helpful info with us. Please keep us up to date like this.
Thanks for sharing.

Reply
- shaan May 16, 2019 At 5:01 pm
  
  Thank you very much, Subscribe our notification for daily updates.
  
  Reply
pene mas grande May 16, 2019 At 5:04 pm

Neat blog! Is your theme custom made or did you download it from somewhere?
A design like yours with a few simple adjustements would
really make my blog shine. Please let me know where
you got your theme. Thank you

Reply
- shaan May 16, 2019 At 5:09 pm
  
  Hey, thank you for your comment. I am using a free theme called “Ionmag”. you can download it for free.
  
  Reply
Cbd Olej May 28, 2019 At 4:43 pm

It’s great that you are getting thoughts from this piece of writing as well
as from our argument made here.

Reply
- shaan May 28, 2019 At 5:11 pm
  
  Thank you very much, Please stay connected.
  
  Reply
detaining May 28, 2019 At 10:42 pm

Hello! I’ve been following your web site for a long time now and finally got the bravery to go
ahead and give you a shout out from Houston Tx! Just
wanted to say keep up the good work!

Reply
- shaan May 29, 2019 At 3:55 am
  
  Thank you very much, Stay connected.
  
  Reply
jaeger May 29, 2019 At 2:37 am

Appreciate this post. Let me try it out.

Reply
- shaan May 29, 2019 At 3:57 am
  
  Sure, Thanks for your comment.
  
  Reply
olejek cbd May 29, 2019 At 6:15 am

I will immediately seize your rss as I can not find your email subscription hyperlink or e-newsletter service.
Do you have any? Kindly permit me recognise in order that I may subscribe.
Thanks.

Reply
cbd olej May 29, 2019 At 9:49 am

I’m really enjoying the theme/design of your weblog. Do you ever
run into any internet browser compatibility problems?
A number of my blog visitors have complained about my blog not working correctly
in Explorer but looks great in Opera. Do you have any tips to help fix this issue?

Reply
result syd May 29, 2019 At 2:29 pm

Excellent website. Lots of useful information here. I am sending it to some pals ans additionally sharing in delicious. And of course, thanks for your effort!

Reply
achieves May 30, 2019 At 2:08 am

I know this if off topic but I’m looking into starting my
own blog and was curious what all is required
to get set up? I’m assuming having a blog like yours
would cost a pretty penny? I’m not very internet smart
so I’m not 100% sure. Any tips or advice would be greatly appreciated.
Kudos

Reply
olej cbd May 30, 2019 At 2:46 am

You’re so awesome! I don’t believe I have read through
anything like this before. So great to discover someone with a few unique thoughts on this
subject. Seriously.. thank you for starting this up. This web
site is one thing that’s needed on the internet, someone
with a little originality!

Reply
olejek cbd rzeszów May 30, 2019 At 5:10 am

I constantly emailed this webpage post page to all my associates, as if like to read it afterward my contacts will too.

Reply
Anthony Chandler August 15, 2021 At 5:05 am

It is an amazing post and you explained it in a detailed way. Nice to see this here. I will bookmark your blog for more details. Keep sharing new things like this.

Reply