Community post
How to Make Parallax Effect with HTML and CSS
Hi Everyone
I will represent how to make The Parallax Effect
***
***
***
***
***
***
***
***
***
***
***
***
***
***
***
***
***
***
***
***
Code HTML
***
```
Parallax Effect
Section one
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio quas molestias pariatur omnis laborum, cumque accusantium ratione explicabo, sunt molestiae earum illo facere quaerat qui corporis. Nam, quibusdam? Repudiandae accusamus quia inventore nostrum dolore molestias neque corporis architecto, voluptate quasi? Quas accusantium eius provident corporis ratione aperiam, laudantium similique natus suscipit dolorem temporibus tempora nobis facere ad itaque voluptatum nihil? Quae totam architecto quos excepturi. Consectetur placeat velit culpa aliquam itaque veniam eligendi commodi pariatur repellendus illo? Ipsam animi odio, maiores cumque adipisci error fugit maxime quod quam, quisquam aperiam facere? Blanditiis officia rerum tempora accusantium culpa similique quidem nihil?
Section two
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio quas molestias pariatur omnis laborum, cumque accusantium ratione explicabo, sunt molestiae earum illo facere quaerat qui corporis. Nam, quibusdam? Repudiandae accusamus quia inventore nostrum dolore molestias neque corporis architecto, voluptate quasi? Quas accusantium eius provident corporis ratione aperiam, laudantium similique natus suscipit dolorem temporibus tempora nobis facere ad itaque voluptatum nihil? Quae totam architecto quos excepturi.
Section three
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio quas molestias pariatur omnis laborum, cumque accusantium ratione explicabo, sunt molestiae earum illo facere quaerat qui corporis. Nam, quibusdam? Repudiandae accusamus quia inventore nostrum dolore molestias neque corporis architecto, voluptate quasi.
***
Code CSS
***
```
body, html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
.img-1, .img-2, .img-3 {
position: relative;
opacity: 0.70;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.img-1 {
background-image: url('../img/1.jpg');
min-height: 100%;
}
.img-2 {
background-image: url('../img/2.jpg');
min-height: 500px;
}
.img-3 {
background-image: url('../img/3.jpg');
min-height: 500px;
}
.section-dark {
text-align: center;
padding: 50px 80px;
background-color: #282e34;
color: #ddd;
}
.section-light {
text-align: center;
padding: 50px 80px;
background-color: #f4f4f4;
color: #666;
}
.contant {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
font-size: 30px;
letter-spacing: 6px;
text-transform: uppercase;
}
.contant .border {
background-color: #111;
color: #fff;
padding: 20px;
}
@media(max-width:500px){
.img-1, .img-2, .img-3 {
background-attachment: scroll;
}
}
***
<img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmYWJFK3dXNb1sWiwX8UUFai7NA4oMq5JG3MH5PmWxLrCF/DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg" alt="DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg">
<center><h3>🎄Thanks and have a nice day🎄</h3></center>
<img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmYWJFK3dXNb1sWiwX8UUFai7NA4oMq5JG3MH5PmWxLrCF/DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg" alt="DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg">
Replies (2)
Thank you for collaborating with me to promote this post as explained at https://steemit.com/steemit/@jerrybanfield/10-ways-to-fund-a-steem-growth-project.
Hey there,
judging from the code this doesn't seem to be a true parallax (I written pure css+html one). Parallax requires two moving elements with different speeds relative to each other. Your example seems to be basically a fixed position image (scrolled position in this case) with a scrollable element on top.
If you are interested in these things, pure css&html parallaxes is, as far as I know, always based on perspective. Check out an example here (it's a quite nice to learn from): https://codepen.io/keithclark/pen/JycFw
For the future, I'd advice you to put your demo e.g. here: https://codepen.io/ so we can all see them working first hand.