HTML+CSS background Scrolling Effect
Scrolling Effect:-
CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0%;
padding: 0%;
font-family: sans-serif;
}
.container{
position: relative;
width: 100%;
height: 100vh;
overflow: auto;
scroll-snap-type: y mandatory;
}
.container .section {
position: relative;
width: 100%;
height: 100%;
scroll-snap-align: start;
background-blend-mode: multiply;
}
.container .section:nth-child(1){
background: url(resources/n1.jpg);
background-size: cover;
background-attachment: fixed;
}
.container .section:nth-child(2){
background: #ff0 url(resources/n2.jpg);
background-size: cover;
background-attachment: fixed;
}
.container .section:nth-child(3){
background:url(resources/n3.jpg);
background-size: cover;
background-attachment: fixed;
}
.container .section:nth-child(4){
background: url(resources/n4.jpg);
background-size: cover;
background-attachment: fixed;
}
.container .section:nth-child(5){
background: url(resources/n5.jpg);
background-size: cover;
background-attachment: fixed;
}
.container .section .container {
position: absolute;
bottom: 50px;
left: 50px;
max-width: 700px;
}
.container .section .container h2 {
background: #fff;
color: #111;
font-weight: 600;
display: inline-block;
padding: 10px 20px;
font-size: 2em;
}
.container .section .container h2 {
background: #fff;
color: #111;
font-weight: 600;
display: inline-block;
padding: 10px 20px;
font-size: 2em;
}.container .section .container p {
background: #fff;
color: #111;
font-weight: 300;
padding: 10px 20px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="section">
<div class="content">
<h2>Section One Title</h2>
<p>If you are using the Postman web client, <br> you will need to also download the Postman desktop agent.
The Postman agent overcomes the Cross Object Resource Sharing <br> (CORS) limitations of browsers,
and facilitates API request sending from your browser version of <br> Postman.</p>
</div>
</div>
<div class="section">
<div class="content">
<h2>Section Two Title</h2>
<p>If you are using the Postman web client, <br> you will need to also download the Postman desktop agent.
The Postman agent overcomes the Cross Object Resource Sharing <br> (CORS) limitations of browsers,
and facilitates API request sending from your browser version of <br> Postman.</p>
</div>
</div>
<div class="section">
<div class="content">
<h2>Section Three Title</h2>
<p>If you are using the Postman web client, <br> you will need to also download the Postman desktop agent.
The Postman agent overcomes the Cross Object Resource Sharing <br> (CORS) limitations of browsers,
and facilitates API request sending from your browser version of <br> Postman.</p>
</div>
</div>
<div class="section">
<div class="content">
<h2>Section Four Title</h2>
<p>If you are using the Postman web client, <br> you will need to also download the Postman desktop agent.
The Postman agent overcomes the Cross Object Resource Sharing <br> (CORS) limitations of browsers,
and facilitates API request sending from your browser version of <br> Postman.</p>
</div>
</div>
<div class="section">
<div class="content">
<h2>Section five Title</h2>
<p>If you are using the Postman web client, <br> you will need to also download the Postman desktop agent.
The Postman agent overcomes the Cross Object Resource Sharing <br> (CORS) limitations of browsers,
and facilitates API request sending from your browser version of <br> Postman.</p>
</div>
</div>
</div>
</body>
</html>
OUTPUT:-
~
Comments
Post a Comment
Please do not enter any spam link in the comment box.