How to make cool scroll transition

Question

im making my profile websites want make scroll transition like here https://olaolu.dev,how can I do that?There will be 5 pages, and transition between them should be like in link above, also it should relater to buttons as well, when I press button it should have this scroll effect too

my html

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="/b/cs.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>

    <section class="section-top active">
        
        <div class="details">
            <div class="top">
                <h2>Faxraddin</h2>
                <div class="lists">
                    <button><i class="bi bi-list-check"></i></button>
                </div>
            </div>

            <div class="first-info">
                <div class="first-sec">
                    <h1>Frontend</br> Developer.</h1>
                    <h3 class="profession-info">I like to craft solid and scalable frontend products with great user experiences.</h3>
                </div>
                <img class="my-img" src="/b/images/Screenshot 2022-11-04 at 19.35.20.png">
            </div>

            <div class="some-info">
                <div class="a1">
                    <span>Highly skilled at progressive
                enhancement, design systems &
                UI Engineering.
                    </span>
                    <span>Over a decade of experience
                building products for clients
                across several countries.
                    </span>
                </div>

                <div class="btn-container">
                    <ul>
                        <button class="btn active"><i class="bi bi-app"></i></button>
                        <button class="btn"><i class="bi bi-diamond-fill"></i></button>
                        <button class="btn"><i class="bi bi-diamond-fill"></i></button>
                        <button class="btn"><i class="bi bi-diamond-fill"></i></button>
                        <button class="btn"><i class="bi bi-diamond-fill"></i></button>
                    </ul>
                </div>
            </div>

        </div>
    </section>

     
     <section class="what-do" id="s2">

     </section>
    <script src="/b/js.js"></script>

</body>
</html>

this could be a start: [scroll-animation](https://stackoverflow.com/questions/13266746/scroll-jump-to-id-without-jquery) . This gives some sort of scrolling animation. to call the animation on scroll you can use the [scroll event](https://www.w3schools.com/jsref/event_onscroll.asp) — Lennert, Nov 13 '22 at 12:56

score 2 · Answer 1 · answered Nov 13 '22 at 13:35

HTML + CSS can be achieved, but the scrolling effect is slow

body {
    margin: 0;
    height: 100vh;
    overflow-x: hidden;
}

.wrap {
    scroll-behavior: smooth;
    overflow-x: hidden;
    height: 100%;
    scroll-snap-type: y mandatory;
}

.section {
    color: #fff;
    font-size: 30px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
}

.section1 {
    background-color: #111;
}

.section2 {
    background-color: #333;
}

.section3 {
    background-color: #555;
}

.section4 {
    background-color: #777;
}

.section5 {
    background-color: #999;
}

.point {
    position: absolute;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
}

.point a {
    display: block;
    width: 8px;
    height: 8px;
    margin: 8px 0; 
    background-color: #fff;
}

<div class="wrap">
    <section id="s1" class="section section1">page 1</section>
    <section id="s2" class="section section2">page 2</section>
    <section id="s3" class="section section3">page 3</section>
    <section id="s4" class="section section4">page 4</section>
    <section id="s5" class="section section5">page 5</section>
    <div class="point">
        <a href="#s1"></a>
        <a href="#s2"></a>
        <a href="#s3"></a>
        <a href="#s4"></a>
        <a href="#s5"></a>
    </div>
</div>

How to make cool scroll transition

1 Answers1

Linked