CSS Parallax Scrolling Effect
Posted By : Monu Thakur | 30-Nov-2017
CSS is more useful that people give you credit. A series of simple tasks that are usually based on the Javascript Library, which can be implemented without CSS in many CSSs. This is a great example of it being present at present that the parela effect. (Where background images are too slow for the distance of distance from the content of the page).
While this effect does not lack the libraries which produces the effect, The article shows only a simple approach to CSS.
We will use pictures of placekitten as pictures of placeholder background. There is no such site in the internet, the sole number of content on our use kittens as pictures in the score poses to be the ultimate final result.
We are not going to use much markup.For this:
<main class="wrapper"><section class="section parallax bg1"><h1>Such Adorableness</h1></section>
<section class="section static"><h1>Boring</h1></section>
<section class="section parallax bg2"><h1>SO FWUFFY AWWW</h1></section>
</main>
Which breakdown is there for each class here?
.wrapper - It sets the perspective and scroll properties of the complete page.
.section - It shows the display,Size and text properties. Which are not relevant to the parallax effect.
.static - It adds a background to a section for demo purpose.
.parallax - It adds a psuedo-element ::after with the background image and transforms for the requirement of the parallax effect.
.bg1, .bg2 - These add the particular bg images for every section. we can use img tag also for this.
Styling
let say, what makes magic in real style? below given lines shown are commented.
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.section {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 0 0 5px #000;
}
.parallax::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
.static {
background: red;
}
.bg1::after {
background-image: url('https://placekitten.com/g/900/700';
}
.bg2::after {
background-image: url('https://placekitten.com/g/800/600';
}
Thanks
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Monu Thakur
Monu is an experienced Frontend Developer, having good knowledge of Photoshop, illustrator, HTML5, CSS3, Less, Sass, Javascript, Jquery, Angular 4, Angular 4 theme integration.