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 (0)

Top Heroku Alternatives (For Free!)

Recently Heroku shut down free Heroku Dynos, free Heroku Postgres, and free Heroku Data for Redis on November 28th, 2022. So Meshv Patel put together some free alternatives in this classic DEV post.