Season Parallax in CSS
Before We Start
A slider is one of the main components of a website, It contain pictures and a user interface element within a website. The most important one and the first section that the user sees when he/she enters a website. simple pure JavaScript image slider
How to create Fire watch Parallax in CSS. So if you are a person who wishes to develop a website, you have to know how to create a slider properly.
Season Parallax in CSS
We are here to solve your problem. In this article we discuss how to create a slider. Before we start please read the below articles which easier you to understand the process, if you are new to development.
Step 1 – Add HTML
It’s too easy and simple. Just copy and paste below code in your HTML editor between <body> </body> tag.
<body>
<div class="parallax-wrapper">
<div class="background background--spring">
<h2 class="title">Spring</h2>
</div>
<section class="season-desc">
<div class="desc-wrapper">
<h3 class="season--title">Spring</h3>
<p class="season--about">Spring is one of the four conventional temperate seasons, following winter and preceding summer. There are various technical definitions of spring, but local usage of the term varies according to local climate, cultures and customs. When it is spring in the Northern Hemisphere, it is autumn in the Southern Hemisphere and vice versa. At the spring (or vernal) equinox, days and nights are approximately twelve hours long, with day length increasing and night length decreasing as the season progresses.</p>
</div>
</section>
<div class="background background--summer">
<h2 class="title">Summer</h2>
</div>
<section class="season-desc">
<div class="desc-wrapper">
<h3 class="season--title">Summer</h3>
<p class="season--about">Summer is the hottest of the four temperate seasons, falling after spring and before autumn. At the summer solstice, the days are longest and the nights are shortest, with day-length decreasing as the season progresses after the solstice. The date of the beginning of summer varies according to climate, tradition, and culture. When it is summer in the Northern Hemisphere, it is winter in the Southern Hemisphere, and vice versa.</p>
</div>
</section>
<div class="background background--fall">
<h2 class="title">Autumn</h2>
</div>
<section class="season-desc">
<div class="desc-wrapper">
<h3 class="season--title">Autumn</h3>
<p class="season--about">Autumn, also known as fall in American English and sometimes in Canadian English,[1] is one of the four temperate seasons. Autumn marks the transition from summer to winter, in September (Northern Hemisphere) or March (Southern Hemisphere), when the duration of daylight becomes noticeably shorter and the temperature cools down considerably. One of its main features is the shedding of leaves from deciduous trees.</p>
</div>
</section>
<div class="background background--winter">
<h2 class="title">Winter</h2>
</div>
<section class="season-desc">
<div class="desc-wrapper">
<h3 class="season--title">Winter</h3>
<p class="season--about">Winter is the coldest season of the year in polar and temperate zones (winter does not occur in most of the tropical zone). It occurs after autumn and before spring in each year. Winter is caused by the axis of the Earth in that hemisphere being oriented away from the Sun. Different cultures define different dates as the start of winter, and some use a definition based on weather. When it is winter in the Northern Hemisphere, it is summer in the Southern Hemisphere, and vice versa. In many regions, winter is associated with snow and freezing temperatures.</p>
</div>
</section>
</div>
</body>
Step 2 – Add CSS
Copy and paste below code in your HTML editor between <style></style> tag.
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
* {
font-family: 'Roboto Condensed', sans-serif;
}
body {
margin: 0;
}
.parallax-wrapper {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
.background {
background-position: center;
background-size: cover;
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
}
.background--spring {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/d/da/Precincts_of_Watari-jinja_shrine_in_Spring_season_2.JPG');
}
.background--summer {
background-image: url('https://images.pexels.com/photos/375152/summer-sun-blooming-season-375152.jpeg?cs=srgb&dl=beautiful-bloom-blossom-375152.jpg&fm=jpg');
}
.background--fall {
background-image: url('https://images.pexels.com/photos/33060/road-forest-season-autumn.jpg?cs=srgb&dl=autumn-fall-forest-33060.jpg&fm=jpg');
}
.background--winter {
background-image: url('https://images.pexels.com/photos/235595/pexels-photo-235595.jpeg?cs=srgb&dl=branches-cold-season-235595.jpg&fm=jpg');
}
.title {
position: absolute;
margin: 0;
top: calc(50% - 50px);
width: 100%;
left: 0;
right: 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 5px;
height: 100px;
color: white;
font-size: 5rem;
background: rgba(0,0,0,0.4);
}
.season-desc {
z-index: 1;
position: relative;
background: #282E34;
color: white;
font-size: 1.1rem;
letter-spacing: 2px;
line-height: 2em;
padding: 3rem;
height: 100vh;
margin: 0;
display: flex;
.desc-wrapper {
margin: auto;
box-sizing: border-box;
}
.season--title {
text-align: center;
font-size: 4rem;
letter-spacing: 5px;
text-transform: uppercase;
margin: 20px 0;
}
.season--about {
margin-top: 50px;
padding: 0;
}
}
@media (max-width: 998px) and (orientation: portrait) {
.season-desc {
padding: 1.5rem 20px;
font-size: 1rem;
height: unset;
min-height: 100vh;
.season-title {
font-size: 2.5rem;
margin: 20px 0;
letter-spacing: unset;
}
.season-about {
margin-top: 20px;
}
}
}
</style>
At the end we will have something like this. You can change fonts, colors, backgrounds and all things that you want. Enjoy it.
Video Tutorial
Please watch this video to better understand this tutorial and don’t forget to subscribe to our channel.
Help others to find out about this article on Social Media sites. If you have any doubt or any problem, don’t hesitate to contact us. Thereafter we will be able to help you and also make sure you bookmark our site on your browser.
