Categories
SkillCounty Technology

Creating Vertical Carousal & Screen Snapping | HTML | CSS Scss No Js required.

In this post we will be talking about a neat CSS trick called Screen Snapping. Lots of new pages are created using this, and many card based sites are using it too in some way. So, Either if you want a real cool landing page or just make your cards better, Come lets dive in.

One Example is better than 1000 words.

Notice how you can use scroll as well as click to go to next section. We are going to build it, the easy way. If you saw eyesore colors, Apologies they are generated randomly. You can do a quick reload and hope for best.

I have tried keep this article beginner friendly.

In this article we will discuss about topics in following order.

So, If you already know first two sections, You can skip directly to sections GoTo Section Three
Don’t need explanations? Jump to Code

In-Page Navigation

When your page become too long, You might want user to be able to navigate to a section of page. This page itself is an example of when you might want to do it. The index of this page will take you to the corresponding section smoothly.

There are many approach for this, but the best one and easiest one is using HTML. Using HTML to move users around the sections in a page allows us to share the link for the particular section. So its better to avoid using Js unless you want to make some crazy animation for user.

How to add in-page navigation?

  1. Add an unique “id” to the target.

    No matter what the element type, to scroll to a element you will have to add an id to the element. Don’t forget id is unique identifier so, it should be a unique string.
    Ex: <div id=”section1″> Any Content </div>
    At this point you can already navigate to this section by adding “#<section-name>” to the link. Your page should be longer to actually realize this effect.

  2. Add a source link.

    Simplest example is using anchor tag. Say you want to add index to your page. Where each entry must be a link. Just add anchor tag.
    Ex: <a>GoTo Section 1</a>

  3. Add link to the anchor tag

    Anchor tag does not becomes a link unless a href attribute with a non empty value is provided. To actually make the navigation to a particular section. We need to add the href to the id name provided to the section.
    Ex: <a href=”#section1″>GoTo Section 1</a>

    Now, You might realize why id selector in CSS is #.

    That’s everything you need to allow user to navigate to the element.
    But the transition is not smooth. As soon as you click on the link. The selected section will magically appear on your screen.

    Next section deals with How to do smooth scrolling.

Enabling Smooth Scrolling

If you thought navigation to element was easy enough, Just Hold on.

html{
  scroll-behavior: smooth;
}

Just by adding scroll behavior to smooth for “html” or “body” element in CSS will now enable smooth scrolling, whenever user clicks on a link to a section or element.

Screen Snapping

Now, that we know how to navigate to a on click. Let us move forward on creating vertical carousal. One cool way of doing this without any Js is by using screen snapping. This can also be used to create normal horizontal carousal as well.

To do this we need A parent container, (it can be the body itself but its not very useful if you want to add a header to it). The parent container should be of the size of the carousel we want to create.

<html>
  <body>
  <div class="parent">
  <div id="sec1" class="section">
    <h2>Section 1</h2>
  </div>
  <div id="sec2" class="section">
    <h2>Section 2</h2>
  </div>
  </body>
 </html>
.parent{
  height: 100vh;
}
.section{
  height: 100vh;
}

Size of section should be equal to the size of parent or if we are showing multiple divisions the sum should be equal to the Viewport height.

Now the actual layout is done, now we need to understand how the scroll snap actually works.

Parent Element

In practice this is how our Parent should look like. On a normal page, we our view port can stop wherever it likes, but we want our viewport to snap at the start of every section.

To do this we will have to add the following property to the parent class.

scroll-snap-type: mandatory;
scroll-snap-type: y mandatory;
overflow-y: scroll;

What it does that it enables snapping behavior and also enforces it. Mandatory should be used only when the section size is less than equal to parent. We also want user to allow scrolling inside the parent itself, for that we define overflow-y to scroll, as the total height of parent is much smaller than combined height of all its children.

Note: Making snapping mandatory disables user to scroll to the section if it is longer than viewport. If you want viewport to be longer use scroll-snap-type: proximity instead.

Now the last step is adding snap position to the child class, in our case child class is named “section”.

  scroll-snap-align: start;

That’s it. Not user can be at one section at a time. Scrolling will make him skip to next section.

See the full code at CodePen below.

Full Code with Preview

Visit My CodePen

TLDR: A Quick How to?

Why is it better to use HTML for scrolling to a section/div?

Use of id attribute to move user around sections allows user to share the link of the particular section of the page, and user will land to the shared section through the link with no extra code.

How to do in-page navigation?

The in-page navigation can be performed by simply adding id attribute to the target and adding a link with href of the id.

What is difference between inline and block?

Display type block means that new elements added will stack vertically, while inline block means that new blocks will stack horizontally. display: inline; is used in making horizontal carousal.

How to enable smooth scrolling to element without any Js?

By setting scroll-behaviour to smooth for body or html element of css.

How to generate random color for different child in SCSS?

SCSS provides a random function for generating a value in given range. Following code compiles to generate different background for first 5 children.

What is vh/vw in CSS?

vh/vw means viewport height/width. 1 vh = 1% of viewport height. 100vh means the height of entire screen.

Difference between vh/vw instead of %?

Talking in terms of percent means respective to the parent container. % is tied to parent of the container, on the other hand vh/vw are always fixed for a screen size.

When to use vh/vw instead of percentage?

Suppose you want to nest 3 child each should have height 50% of screen. If you do percent 50% in each subsequent child the inner child will keep getting smaller, using vh will not rise that condition, and each children will be of same size, No matter how deep.

How to hide scrollbar for an element?

Setting scrollbar-width to none does the trick in Firefox. While in chrome you will have to use ::-webkit-scrollbar selector and make display type none.

Want to learn more?

Optimism is an occupational hazard of programming: feedback is the treatment.

Kent Beck

Leave a comment

Your email address will not be published. Required fields are marked *