Full Page Scrolling Using Html and CSS
Learn How to make a Full Page Scrolling Using Html and CSS.
Video Tutorial
For Download the Background image Click Here
How to use the code in stpe by step
- Open Your text Editor(like: VS code, SublimeText or Notepad++)
- Create a .html(like: index.html) file
- Copy the HTML code the code and past in the index.html file
- Then, Create a .css(like: style.css) file
- Copy the CSS code and past in style.css file
- Open the file in your browser
HTML CODE
HTML is a standard language for web page. With HTML you can create your own website. HTML is easy to learn - You will enjoy it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Section Scroll</title>
</head>
<body>
<div class="cointainer">
<div class="section">
<div class="content">
<h2>Section One Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam aliquid a eum optio rem saepe accusantium id minus impedit doloribus officia repudiandae suscipit hic fuga in, quibusdam exercitationem necessitatibus expedita!</p>
</div>
</div>
<div class="section">
<div class="content">
<h2>Section Two Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam aliquid a eum optio rem saepe accusantium id minus impedit doloribus officia repudiandae suscipit hic fuga in, quibusdam exercitationem necessitatibus expedita!</p>
</div>
</div>
<div class="section">
<div class="content">
<h2>Section Three Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam aliquid a eum optio rem saepe accusantium id minus impedit doloribus officia repudiandae suscipit hic fuga in, quibusdam exercitationem necessitatibus expedita!</p>
</div>
</div>
<div class="section">
<div class="content">
<h2>Section Four Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam aliquid a eum optio rem saepe accusantium id minus impedit doloribus officia repudiandae suscipit hic fuga in, quibusdam exercitationem necessitatibus expedita!</p>
</div>
</div>
<div class="section">
<div class="content">
<h2>Section Five Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam aliquid a eum optio rem saepe accusantium id minus impedit doloribus officia repudiandae suscipit hic fuga in, quibusdam exercitationem necessitatibus expedita!</p>
</div>
</div>
<div class="section">
<div class="content">
<h2>Section Six Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam aliquid a eum optio rem saepe accusantium id minus impedit doloribus officia repudiandae suscipit hic fuga in, quibusdam exercitationem necessitatibus expedita!</p>
</div>
</div>
</div>
</body>
</html>
CSS CODE
The Full from of CSS is Cascading Style Sheets. It explains how to show HTML elemnts on display. For web designers, it is powerfull tool to adjust the design and control of the web pages t demonstrate how they should be viewed.
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html{
scroll-behavior: smooth;
}
.cointainer{
position: relative;
width: 100%;
height: 100vh;
overflow: auto;
scroll-snap-type: y mandatory;
}
.cointainer .section{
position: relative;
width: 100%;
height: 100%;
scroll-snap-align: start;
background-blend-mode: multiply;
}
.cointainer .section:nth-child(1){
background: #f00 url(./media/img1.jpg);
background-size: cover;
background-attachment: fixed;
}
.cointainer .section:nth-child(2){
background: #0f0 url(./media/img2.jpg);
background-size: cover;
background-attachment: fixed;
}
.cointainer .section:nth-child(3){
background: rgb(229, 255, 0) url(./media/img3.jpg);
background-size: cover;
background-attachment: fixed;
}
.cointainer .section:nth-child(4){
background: rgb(183, 0, 255) url(./media/img4.jpg);
background-size: cover;
background-attachment: fixed;
}
.cointainer .section:nth-child(5){
background: rgb(0, 38, 255) url(./media/img5.jpg);
background-size: cover;
background-attachment: fixed;
}
.cointainer .section:nth-child(6){
background: rgb(0, 247, 255) url(./media/img6.jpeg);
background-size: cover;
background-attachment: fixed;
}
.cointainer .section .content{
position: absolute;
bottom: 50px;
left: 50px;
max-width: 700px;
}
.cointainer .section .content h2{
background: #fff;
color: #111;
font-weight: 600;
display: inline-table;
padding: 10px 20px;
font-size: 2em
}
.cointainer .section .content p{
background: #fff;
font-weight: 300;
margin-top: 10px;
}
Posts
No comments: