DEV Community

Cover image for Create Youtube Shorts, Insta Reels, Tiktok like scrolling effect | Just HTML and CSS
Ashish Kumar Verma
Ashish Kumar Verma

Posted on

Create Youtube Shorts, Insta Reels, Tiktok like scrolling effect | Just HTML and CSS


<!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">
    <title>Youtube | Insta | Tiktok | Reels </title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        body {
            background: black;
        }


        .reelsContainer {
            /* background: pink; */

            height: 80vh;
            width: 25vw;
            margin-top: 4em;
            display: flex;
            overflow: auto;
            gap: 2em;
            flex-direction: column;
            scroll-snap-type: y mandatory;
        }

        .reelsContainer::-webkit-scrollbar {
            display: none;
        }


        .reel  {
            min-height: 75vh;
            min-width: 25vw;
            background-color: red;
            scroll-snap-align: start;
        }

    </style>
</head>
<body>

<div style="display: flex; justify-content: center;">

        <div class="reelsContainer">
            <div class="reel">1</div>
            <div class="reel">2</div>
            <div class="reel">3</div>
            <div class="reel">4</div>
            <div class="reel">5</div>
            <div class="reel">6</div>
        </div>
</div>




</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (4)

Collapse
 
dankurth profile image
Dan Kurth

Exactly what I needed to get started. Thanks!

Collapse
 
abhishek_patel_14174bfd97 profile image
ABHISHEK PATEL

How can we restrict user to scroll multiple reels once?
is it possible?

Collapse
 
oaklytical profile image
Oaklytical

for some reason, in mobile view, the reels are very squeezed, why? and how would you fix it?

Collapse
 
imdigitalashish profile image
Ashish Kumar Verma • Edited

Because the width is 25vw which means 25 parts of 100 parts of screen so basically when you are in an mobile view of let's say 200px it's just 8px of width that's why

so a quick fix is -> write a media query for mobile and change the reelsContainer to 90vw !

I hope it answers your question !