This content originally appeared on DEV Community and was authored by Robson Muniz
1️⃣ Importing Google Fonts:
The @import rule imports the "Poppins" font from Google Fonts. It makes the font available for use throughout the stylesheet.
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
2️⃣ Global Styles:
The following styles are applied to all elements on the page using the universal selector (*):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
- margin: 0; and padding: 0; set the margin and padding of all elements to zero, removing any default spacing.
- box-sizing: border-box; ensures that the width and height properties include padding and borders, avoiding unexpected layout issues.
- font-family: "Poppins", sans-serif; sets the font family to "Poppins", a sans-serif font from Google Fonts. If Poppins is not available, it falls back to a generic sans-serif font.
3️⃣ Container Styles:
.container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
- scroll-snap-type: y mandatory; enables the container to scroll vertically in a snap manner, meaning it will align its children sections neatly.
- overflow-y: scroll; enables vertical scrolling within the container.
- height: 100vh; sets the height of the container to 100% of the viewport height, ensuring it takes up the entire screen.
4️⃣ Section Styles:
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: start;
}
- height: 100vh; sets each section's height to 100% of the viewport height, making them fill the entire screen.
- display: flex; enables flexbox layout for the sections.
- justify-content: center; centers the contents horizontally within each section.
- align-items: center; centers the contents vertically within each section.
- scroll-snap-align: start; ensures each section aligns at the start of the scroll position, creating the snapping effect.
5️⃣ Styling for Different Sections:
There are four different sections with class selectors: .one, .two, .three, and .four. Each section has a different background color.
.one {
background-color: rgb(36, 164, 138);
}
.two {
background-color: rgb(211, 79, 79);
}
.three {
background-color: rgb(67, 91, 175);
}
.four {
background-color: rgb(191, 64, 191);
}
- .one has a background color of rgb(36, 164, 138).
- .two has a background color of rgb(211, 79, 79).
- .three has a background color of rgb(67, 91, 175).
- .four has a background color of rgb(191, 64, 191).
These styles define the layout, scrolling behavior, and appearance of sections within a container. They create a visually pleasing and engaging scrolling experience with distinct section colors.
This content originally appeared on DEV Community and was authored by Robson Muniz
Robson Muniz | Sciencx (2023-05-16T13:04:27+00:00) 📜Awesome Page Scroll Effect | HTML & CSS✨. Retrieved from https://www.scien.cx/2023/05/16/%f0%9f%93%9cawesome-page-scroll-effect-html-css%e2%9c%a8/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.