This article demonstrates how to build a Web page containing examples of trendy CSS designs using only HTML and CSS.

By — Sreemaan K C K S — “Smart Coder”

The majority of people mistakenly believe that the term “parallax effect” refers to a type of visual effects editing that is employed in photography, graphic design, or other platforms. But in the user interface for the website, we’ll notice something somewhat similar to the above-mentioned item. As a bonus to the article, we also look at creating a floating button and a smooth scroll, two tools that let visitors navigate the main sections of an app or website.

What is the Parallax Effect?

Ever browsed a page that felt active as you scrolled across it? Like you were browsing across multiple views at once? That creates a 3D depth appearance and is known as a parallax effect. It occurs when the various parts of a page move at various speeds. A website’s surfing experience can be enhanced by parallax scrolling making it more engaging and dynamic.

What is Smooth Scroll?

The keyboard’s Page Down button won’t immediately take you to the following page as you scroll down. As a result, smooth scrolling will be a lot more seamless and fluid for you.

What is the Floating Button?

Work wiser rather than harder. The floating action button aims to accomplish that. Floating action buttons, also known as feedback menus at Usersnap, improve the usability of a website. The screen’s primary action is represented by floating action buttons. The button is a widget that sits above the contents of the screen and is typically formed like a circle with an icon in the middle. The button opens a menu of action alternatives, these choices typically include important links, contact information, and feedback channels.

IMPLEMENTATION:

Let’s construct a basic example web page with a parallax effect, smooth scrolling, and a floating button.

PREPARATIONS:

For this Web-page implementation, I have used HTML Code structure along with CSS for styling.

BASIC CODE STRUCTURE:

HTML AND CSS CODE IMPLEMENTATION

PARALLAX EFFECT:

Step: 1 
Create a background picture with a parallax effect and add a container with some content in the web-page.

Html Code:

Css Code:

1. Use a div container element and give the container a background picture with a defined height.
2. The background-image property must be set to an image of your choice, and the background-attachment property must be set to fix in order to create the parallax container. The background image’s position in relation to the viewport is fixed by the fixed value.
3. Create a div container with some heading and para tags to add some content to the webpage make the smooth scroll look more effective and a footer for the page.
4. Simple CSS attributes should be added to align the Section 1 and Section 2 element.

Step: 2

To achieve Smooth Scrolling, add an anchor tag to the div element containing the background picture.

Html code:-

Css Code:-

1. Add the CSS property scroll-behavior: smooth to the html element to give the webpage a smooth scrolling effect.
2. Give id=”section1" to the container for Section 1. Likewise for Section 2.
3. Get the section element using element id and supply href=”#section1" for section 1 and href=”#section2" for section 2 to navigate from section 1 to section 2. If we click on section 1, the page scrolls to section 2 and vice versa.
4. Simple CSS attributes should be applied for the anchor tag.

FLOATING BUTTON:

Create a floating button that is fixed for the entire webpage and is always accessible.

Step: 1

Html code:-

Css Code:-

1. To set the floating button at the bottom right of the website, create a div container and add the relevant CSS properties. (ClassName: floating-wrapper)
2. Make a checkbox-style input element inside the wrapper container to turn on the floating button. The floating buttons will open and close as we click the button, for checking or unchecking the element.

3. The <label> tag defines a label for several elements, since doing so toggles the input when clicking the text included within the <label> element.

4. To bind them, the for attribute of the label element must match the id attribute of the related element.

5. To make the button look attractive, add the necessary CSS properties.

Step: 2

We must make the floating buttons hide and visible while switching between open and close. Make a floating-wheel div container with some para tags or icons inside anchor tags.

Html code:

Css code:

1. Place the floating wheel within the floating button, and then add the necessary transition and transform attributes so that the floating buttons transition from the bottom right.
2. The addition of the floating-action class places each component inside the floating-wheel.

3. While the checkbox is selected, CSS transition and transform 
 attributes are triggered to make the floating buttons visible. For
 Example: .floating-checkbox:checked ~ (particular css class name). 
 Inside the class, add the necessary css property to make the buttons visible.

JSFiddle Code Platform:

https://jsfiddle.net/Sreemaan_KCKS/wodt0fez/2/

Conclusion:

As we stay updated with the current css trends, we learn additional skills for creating an attractive, useful, and fluid website. This article serves as evidence that it is easier to construct websites without the use of javascript.

Meet the team!

Author

Sreemaan K C K S

Reviewed By

Kartheek M

Editor

Seema Jain

We at CaratLane are solving some of the most intriguing challenges to make our mark in the relatively uncharted omnichannel jewellery industry. If you are interested in tackling such obstacles, feel free to drop your updated resume/CV to careers@caratlane.com