forked (CSS)

by sungsoonz

HTML

<body id="body">
  <svg id="logo" width="200" height="37" viewBox="0 0 200 37" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M40.3911 16.2866V26.4774H44.8583V14.9837V14.5649C44.8583 9.21358 41.0891 5.72359 36.017 5.72359C34.2952 5.72359 32.3874 6.28199 30.9448 7.16612V0H26.5707V26.4774H31.0844V16.147V15.449C31.0844 12.3778 33.1319 10.2838 35.7378 10.2838C38.3436 10.2838 40.3911 12.3778 40.3911 15.449V16.2866ZM4.65333 13.4016C4.65333 18.3341 8.56212 22.2429 13.4946 22.2429C16.3797 22.2429 18.9856 20.8004 20.7538 18.7529L24.6626 21.0796C22.1964 24.7092 18.148 27.0358 13.4946 27.0358C6.09586 27.0358 0 20.94 0 13.5412C0 6.14241 6.09586 0.0465495 13.4946 0.0465495C18.148 0.0465495 22.336 2.37321 24.6626 6.00281L20.7538 8.32947C19.1717 6.00281 16.3797 4.56028 13.4946 4.56028C8.56212 4.56028 4.65333 8.46907 4.65333 13.4016ZM187.948 26.4774V24.2904C186.645 25.6864 184.597 26.5705 182.317 26.617H182.271C179.804 26.617 177.757 25.8725 176.314 24.2904C174.732 22.7083 173.988 20.242 173.988 17.6361V5.72362H178.501V17.5431C178.501 18.846 178.92 20.0093 179.804 20.8935C180.688 21.7776 181.712 22.1964 183.015 22.1964C184.458 22.1964 185.621 21.638 186.505 20.7539C187.389 19.8697 187.808 18.5668 187.808 16.8451V5.67708H192.461V26.4774H187.948ZM200 0.0465495H195.486V26.4309H200V0.0465495ZM112.331 12.7967L119.73 0.186198H125.686V26.4775H121.173V6.84045L113.913 18.8926H110.749L103.63 6.84045V26.4775H99.1159V0.186198H104.933L112.331 12.7967ZM89.9955 10.3304H96.0914V5.81672H89.9955V0.186198H85.4818V17.9154V18.7995C85.4818 23.3132 87.5292 26.6171 93.1598 26.6171H96.0448V21.9638H93.439C90.2282 21.9638 89.8094 20.3816 89.8094 18.753V18.0084L89.9955 10.3304ZM68.2178 16.0075V16.2867V16.752V26.4775H63.704V25.0349C61.9358 26.1983 60.0744 26.9428 57.7478 26.9428C51.9311 26.9428 47.1382 22.1499 47.1382 16.3332C47.1382 10.5166 51.9311 5.72363 57.7478 5.72363C59.9348 5.72363 61.9823 6.32857 63.704 7.6315V5.72363H68.2178V16.0075ZM51.6519...

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

#logo {
  position: fixed;
  top: 6%;
  left: 10%;
  transition: all 1s ease-out;
  opacity: 0;
  width: 140px;
}

body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  height: 2400px;
  margin: 0;
  transition: all .8s ease-out;
}

#body.dark {
  background: #000;
}

#body.dark #logo {
  top: 10%;
  opacity: 1;
}

.header {
  text-align: center;
  margin: 7rem auto 0;
  max-width: 70%;
}

.pre-title {
  opacity: 0.6;
  font-size: 24px;
}

.title {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 70px;
}

#homeApp {
  margin: 0 auto;
  display: block;
  transition: all 1s ease-out;
  position: absolute;
  top: 300px;
  left: 0px;
  right: 0px;
}

#homeApp.scrolled {
  top: 600px;
}


#homeTextBG {
  position: absolute;
  top: 500px;
  z-index: -1;
  width: 100%;
  transition: all 1s ease-out;
}

#homeTextBG #textGradient stop:nth-child(1) {
  stop-color: #9CFFA0;
}

#homeTextBG #textGradient stop:nth-child(2) {
  stop-color: #F2F557;
}

#homeTextBG #textGradient stop:nth-child(3) {
  stop-color: #F4F84D;
}

#homeTextBG #textGradient stop:nth-child(4) {
  stop-color: #7BFFFF;
}

#homeTextBG #textGradient stop:nth-child(5) {
  stop-color: #86CCFF;
}

#homeTextBG.new-gradient #textGradient stop:nth-child(1) {
  stop-color: #77F7FF; 
}

#homeTextBG.new-gradient #textGradient stop:nth-child(2) {
  stop-color: #57CFF5; 
}

#homeTextBG.new-gradient #textGradient stop:nth-child(3) {
  stop-color: #E5ADFF; 
}

#homeTextBG.new-gradient #textGradient stop:nth-child(4) {
  stop-color: #FFD9F0; 
}

#homeTextBG.new-gradient #textGradient stop:nth-child(5) {
  stop-color: #FFC6C6; 
}


#homeTextBG.hide {
  opacity: 0;
}

stop {
  transition: all 1s ease-out;
}

JavaScript

var target = $("#homeApp").offset().top,
  homeApp = $("#homeApp"),
  textBG = $('#homeTextBG'),
  body = $('#body'),

  timeout = null;

$(window).scroll(function() {
  if (!timeout) {
    timeout = setTimeout(function() {
      clearTimeout(timeout);
      timeout = null;
      if ($(window).scrollTop() >= target) {
        body.addClass('dark');
        textBG.addClass('hide');
        homeApp.addClass('scrolled');
      } else {
        body.removeClass('dark');
        textBG.removeClass('hide');
        homeApp.removeClass('scrolled');
      }
    }, 100);
  }
});