<img src="https://assets.codepen.io/1462889/fcy.png" alt="IG Logo">

    </a>    

    <div class="section">               

        <div class="center-wrap text-center">   

            <div class="container">

                <div class="row">

                    <div class="col-12 text-center parallax-fade-top">

                        <h1>Scroll</h1> 

                    </div>

                </div>

            </div>  

        </div>

    </div>              

    <div class="section">

    </div>              

    <div class="section">

    </div>  

    <div class='cursor' id="cursor"></div>

    <div class='cursor2' id="cursor2">                  

    <div class="progress-wrap">

        <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">

            <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>

        </svg>

    </div>

    </div>

    <div class='cursor3' id="cursor3"></div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>

@charset "UTF-8";

/* Please ❤ this if you like it! */

@import url("https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext,vietnamese");

:root {

  font-size: 20px;

  --red: #da2c4d;

  --yellow: #f8ab37;

  --green: #2ecc71;

  --white: #ffffff;

  --grey-light: #f2f7f9;

  --grey: #ecedf3;

  --black: #080808;

  --black-blue: #1f2029;

  --black-blue-light: #353746;

  --black-blue-light-2: #404255;

  --black-blue-light-3: #4b4d64;

  --black-light: #424455;

}

​

body {

  font-family: "Muli", sans-serif;

  font-size: 16px;

  font-weight: 500;

  line-height: 1.65;

  color: var(--grey);

  background-color: var(--black-blue);

  overflow-x: hidden;

  letter-spacing: 0.2px;

  -webkit-transition: all 200ms linear;

  transition: all 200ms linear;

  text-rendering: optimizeLegibility !important;

  -webkit-font-smoothing: antialiased !important;

}

​

h1 {

  font-family: "Muli", sans-serif;

  font-size: 11vw;

  font-weight: 800;

  line-height: 1;

  color: var(--white);

  background: linear-gradient(160deg, var(--white), var(--yellow));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

​

.section {

  position: relative;

  width: 100%;

  display: block;

  height: 100vh;

}

​

.center-wrap {

  position: absolute;

  width: 100%;

  display: block;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  z-index: 2;

}

​

/* #Progress

================================================== */

.progress-wrap {

  height: 46px;

  width: 46px;

  cursor: pointer;

  display: block;

  border-radius: 50px;

  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);

  z-index: 10000;

  -webkit-transition: all 200ms linear;

  transition: all 200ms linear;

}

​

.progress-wrap svg path {

  fill: none;

}

​

.progress-wrap svg.progress-circle path {

  stroke: var(--grey);

  stroke-width: 4;

  box-sizing: border-box;

  -webkit-transition: all 200ms linear;

  transition: all 200ms linear;

}

​

/* #Cursor

================================================== */

.cursor,

.cursor2,

.cursor3 {

  position: fixed;

  border-radius: 50%;

  transform: translateX(-50%) translateY(-50%);

  pointer-events: none;

  left: -100px;

  top: 50%;

  -webkit-transition: all 300ms linear;

  transition: all 300ms linear;

}

​

.cursor {

  background-color: #fff;

  z-index: 99999;

  height: 0;

  width: 0;

}

​

.cursor2, .cursor3 {

  height: 46px;

  width: 46px;

  z-index: 99998;

  -webkit-transition: all 0.3s ease-out;

  transition: all 0.3s ease-out;

}

​

.cursor2.hover,

.cursor3.hover {

  -webkit-transform: scale(1.4) translateX(-35%) translateY(-35%);

  transform: scale(1.4) translateX(-35%) translateY(-35%);

  border: none;

}

​

.cursor2.hover {

  background: rgba(255, 255, 255, 0.1);

}

​

.cursor2.hover .progress-wrap {

  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0);

}

​

.cursor2.hover .progress-wrap svg.progress-circle path {

  opacity: 0.4;

}

​

.navbar-brand {

  height: 35px;

  position: fixed;

  top: 40px;

  right: 40px;

  z-index: 3;

  width: auto;

  display: inline-block;

  margin: 0;

  padding: 0;

  -webkit-transition: all 0.3s ease-out;

  transition: all 0.3s ease-out;

}

​

.navbar-brand::after {

  position: absolute;

  content: "";

  top: 50%;

  left: 50%;

  width: 70px;

  transform: translate(-50%, -50%);

  height: 70px;

  opacity: 1;

  z-index: -1;

  background-image: linear-gradient(160deg, var(--black-blue-light-3), var(--black-blue-light));

  animation: border-transform 10s linear infinite alternate forwards;

  -webkit-transition: all 200ms linear;

  transition: all 200ms linear;

}

​

.navbar-brand img {

  padding: 7px 0;

  height: 100%;

  width: auto;

  display: block;

  -webkit-transition: all 0.3s ease-out;

  transition: all 0.3s ease-out;

}

​

@-webkit-keyframes border-transform {

  0%, 100% {

    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;

  }

  14% {

    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;

  }

  28% {

    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;

  }

  42% {

    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;

  }

  56% {

    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;

  }

  70% {

    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;

  }

  84% {

    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;

  }

}

@keyframes border-transform {

  0%, 100% {

    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;

  }

  14% {

    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;

  }

  28% {

    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;

  }

  42% {

    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;

  }

  56% {

    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;

  }

  70% {

    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;

  }

  84% {

    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;

  }

}

/* Please ❤ this if you like it! */

​

​

(function($) { "use strict";

​

    //Parallax & fade on scroll 

    function scrollBanner() {

      $(document).on('scroll', function(){

        var scrollPos = $(this).scrollTop();

        $('.parallax-fade-top').css({

          'top' : (scrollPos/2.8)+'px',

          'opacity' : 1-(scrollPos/600)

        });

      });    

    }

    scrollBanner(); 

    //Page cursors

​

    document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) {

        t.style.left = n.clientX + "px", 

        t.style.top = n.clientY + "px", 

        e.style.left = n.clientX + "px", 

        e.style.top = n.clientY + "px", 

        i.style.left = n.clientX + "px", 

        i.style.top = n.clientY + "px"

    });

    var t = document.getElementById("cursor"),

        e = document.getElementById("cursor2"),

        i = document.getElementById("cursor3");

    function n(t) {

        e.classList.add("hover"), i.classList.add("hover")

    }

    function s(t) {

        e.classList.remove("hover"), i.classList.remove("hover")

    }

    s();

    for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {

        o(r[a])

    }

    function o(t) {

        t.addEventListener("mouseover", n), t.addEventListener("mouseout", s)

    }

    $(document).ready(function(){"use strict";

        //Scroll indicator

        var progressPath = document.querySelector('.progress-wrap path');

        var pathLength = progressPath.getTotalLength();

        progressPath.style.transition = progressPath.style.WebkitTransition = 'none';

        progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;

        progressPath.style.strokeDashoffset = pathLength;

        progressPath.getBoundingClientRect();

        progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';      

        var updateProgress = function () {

            var scroll = $(window).scrollTop();

            var height = $(document).height() - $(window).height();

            var progress = pathLength - (scroll * pathLength / height);

            progressPath.style.strokeDashoffset = progress;

        }

        updateProgress();

        $(window).scroll(updateProgress);

    });

})(jQuery);