<div class="saas bg-dark text-light">
  <div class="saas-sidebar py-3">
    <a href="#" class="btn text-light">
            <i class="fa fa-hamburger"></i>
        </a>
    <a href="#" class="btn text-light">
            <i class="fa fa-code-branch"></i>
        </a>
    <a href="#home" class="btn text-light js-scrollintoview" data-target="#home">
            <i class="fa fa-angle-up"></i>
        </a>
  </div>
  <div class="saas-container">
    <div class="saas-body bg-dark">
      <div class="fence" style="background-image: url(https://images.unsplash.com/photo-1551385917-889e48f92c21?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);" id="home">
        <div class="fence-menu">
          <nav class="navbar navbar-expand-lg navbar-dark">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>

            <div class="collapse navbar-collapse" id="main-navbar">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link js-scrollintoview" href="#home" data-target="#home">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link js-scrollintoview" href="#link1" data-target="#link1">Link 1</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link js-scrollintoview" href="#link2" data-target="#link2">Link 2</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link js-scrollintoview" href="#link3" data-target="#link3">Link 3</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link js-scrollintoview" href="#link4" data-target="#link4">Link 4</a>
                </li>
              </ul>
              <a href="#" class="btn btn-light">Request a demo</a>
            </div>
          </nav>
        </div>
        <div class="fence-intro">
          <div class="p-3">
            <small class="text-danger">Search for enterprise</small>
            <h1 class="display-4 my-3">Solutions</h1>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aut consequatur delectus deserunt doloribus dolorum et eum iste labore maxime modi nemo nisi, possimus quaerat quasi quos sequi veritatis voluptas!
            </p>
          </div>
        </div>
        <div class="fence-scroll-bg bg-danger"></div>
        <a href="#" data-target="#link1" class="fence-scroll text-center text-dark text-uppercase bg-white font-weight-bold p-3 js-scrollintoview">
                    Scroll
                    <br>
                    &#8595;
                </a>
        <div class="fence-nav-bg bg-danger"></div>
        <nav class="fence-nav bg-dark">
          <h3>Navigation</h3>
          <div class="p-3">
            <a href="#link1" class="js-scrollintoview d-block text-light" data-target="#link1">Go to link
                            1</a>
            <a href="#link2" class="js-scrollintoview d-block text-light" data-target="#link2">Go to link
                            2</a>
            <a href="#link3" class="js-scrollintoview d-block text-light" data-target="#link3">Go to link
                            3</a>
            <a href="#link4" class="js-scrollintoview d-block text-light" data-target="#link4">Go to link
                            4</a>
          </div>
        </nav>
      </div>
      <div class="sblog" id="link1">
        <div class="sblog-left p-5 text-dark bg-white">
          <h3>
            01
            <small>/4</small>
          </h3>
          <h6 class="text-danger">This is a title</h6>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, ex exercitationem qui quod tempora veritatis voluptatibus. Accusamus adipisci deleniti dignissimos eligendi ex fuga, fugit, in obcaecati perferendis quaerat vel voluptatibus.
          </p>
          <a href="#home" class="btn btn-light js-scrollintoview" data-target="#home">
                        <i class="fa fa-angle-up"></i>
                    </a>
        </div>
        <div class="sblog-picture sblog-picture-right bg-light">
          <div class="sblog-picture-img js-observe" style="background-image: url(https://images.unsplash.com/photo-1553446859-2da5233c7dde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80);"></div>
        </div>
      </div>
      <div class="sblog" id="link2">
        <div class="sblog-right p-5 text-dark bg-white">
          <h3>
            02
            <small>/4</small>
          </h3>
          <h6 class="text-danger">This is a title</h6>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto cumque, deserunt eos est facilis odio placeat quo sapiente. Doloremque, doloribus ducimus exercitationem illo ipsa perspiciatis provident quae sint velit.
          </p>
          <a href="#home" class="btn btn-light js-scrollintoview" data-target="#home">
                        <i class="fa fa-angle-up"></i>
                    </a>
        </div>
        <div class="sblog-picture sblog-picture-left bg-light">
          <div class="sblog-picture-img js-observe" style="background-image: url(https://images.unsplash.com/photo-1553563777-e7f319af6b47?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80);"></div>
        </div>
      </div>
      <div class="sblog" id="link3">
        <div class="sblog-left p-5 text-dark bg-white">
          <h3>
            03
            <small>/4</small>
          </h3>
          <h6 class="text-danger">This is a title</h6>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid amet asperiores exercitationem expedita explicabo magni modi natus, neque non nulla odio optio perferendis provident reiciendis repellat sed soluta? Quos?
          </p>
          <a href="#home" class="btn btn-light js-scrollintoview" data-target="#home">
                        <i class="fa fa-angle-up"></i>
                    </a>
        </div>
        <div class="sblog-picture sblog-picture-right bg-light">
          <div class="sblog-picture-img js-observe" style="background-image: url(https://images.unsplash.com/photo-1553499972-ef3ae1b36364?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80);"></div>
        </div>
      </div>
      <div class="sblog" id="link4">
        <div class="sblog-right p-5 text-dark bg-white">
          <h3>
            04
            <small>/4</small>
          </h3>
          <h6 class="text-danger">This is a title</h6>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid amet asperiores exercitationem expedita explicabo magni modi natus, neque non nulla odio optio perferendis provident reiciendis repellat sed soluta? Quos?
          </p>
          <a href="#home" class="btn btn-light js-scrollintoview" data-target="#home">
                        <i class="fa fa-angle-up"></i>
                    </a>
        </div>
        <div class="sblog-picture sblog-picture-left bg-light">
          <div class="sblog-picture-img js-observe" style="background-image: url(https://images.unsplash.com/photo-1553369425-1060cb7432dd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80);"></div>
        </div>
      </div>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <footer class="fixed-bottom saas-footer p-3">
      <div>
        Photo by
        <a href="https://unsplash.com/photos/NsWxB6qCLvs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
                    Christian Wiediger</a> on
        <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
      </div>
      <div>
        Photo by4
        <a href="https://unsplash.com/photos/rHmn-CYiMlo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
                    shannon VanDenHeuvel</a> on
        <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
      </div>
      <div>
        Photo by
        <a href="https://unsplash.com/photos/PFMHc30wO_0?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
                    Helena Lopes</a> on
        <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
      </div>
      <div>
        Photo by
        <a href="https://unsplash.com/photos/3bL7r8KV_Bg?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
          <Jan></Jan> Antonin Kolar</a> on
        <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
      </div>
      <div>Based upon
        <a href="https://dribbble.com/shots/6236236-AI-Landing-page-Design-for-a-Saas-Startup">Voila</a></div>
    </footer>
  </div>
</div>

.fence {
  animation-duration: 1s;
  animation-name: fence;
  animation-timing-function: ease-out;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  position: relative;

  @media screen and (min-width: 992px) {
    min-height: 60vh;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 60px repeat(4, 1fr);
  }

  &-menu {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    @media screen and (min-width: 992px) {
      grid-column: 1 / 8;
    }
  }

  &-intro {
    grid-column: 1;
    grid-row: 2;
    animation-duration: 1.2s;
    animation-name: intro;
    animation-timing-function: ease-out;
    display: flex;
    transform: translate(-50px 0);
    justify-content: center;
    align-items: center;
    @media screen and (min-width: 992px) {
      grid-column: 1 / 3;
      grid-row: 2 / 6;
    }
  }

  &-scroll {
    grid-column: 1;
    grid-row: 3;
    align-items: center;
    animation-duration: 1.2s;
    animation-name: scroll-slow;
    animation-timing-function: ease-out;
    display: flex;
    justify-content: center;
    transform-origin: 100% 100%;
    z-index: 2;
    @media screen and (min-width: 992px) {
      max-height: auto;
      grid-column: 3;
      grid-row: 5;
    }

    &-bg {
      animation-duration: 1s;
      animation-name: scroll;
      animation-timing-function: ease-out;
      grid-column: 1;
      grid-row: 3;
      transform-origin: 100% 100%;
      z-index: 1;
      @media screen and (min-width: 992px) {
        grid-column: 3;
        grid-row: 5;
      }
    }
  }

  &-nav {
    align-items: center;
    animation-duration: .8s;
    animation-name: nav-slow;
    animation-timing-function: ease-out;
    display: flex;
    grid-column: 1;
    grid-row: 4;
    justify-content: space-around;
    transform-origin: 100% 100%;
    z-index: 2;
    @media screen and (min-width: 992px) {
      grid-column: 4 / 8;
      grid-row: 4 / 6;
    }

    &-bg {
      animation-duration: .6s;
      animation-name: nav;
      animation-timing-function: ease-out;
      grid-column: 1;
      grid-row: 4;
      transform-origin: 100% 100%;
      z-index: 1;
      @media screen and (min-width: 992px) {
        grid-column: 4 / 8;
        grid-row: 4 / 6;
      }
    }
  }
}


@keyframes fence {
  0% {
    background-position: center -40%;
    opacity: 0;
  }
  100% {
    background-position: center top;
    opacity: 1;
  }
}

@keyframes intro {
  0% {
    opacity: 0;
    transform: translateX(25px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scroll {
  0% {
    transform: scaleY(0);
  }
  40% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes scroll-slow {
  0% {
    transform: scaleY(0);
  }
  70% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes nav {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes nav-slow {
  0% {
    transform: scaleY(0);
  }
  20% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}
.saas {
  height: 100vh;
  display: flex;

  &-sidebar {
    height: 100vh;
    overflow: auto;
    width: 50px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;

    @media screen and (min-width: 992px) {
      width: 80px;
    }
  }

  &-container {
    height: 100vh;
    overflow: auto;
    flex: 1;
    position: relative;
  }

  &-body {
    position: relative;
    z-index: 10;
  }

  &-footer {
    z-index: 5;
    left: 50px;

    @media screen and (min-width: 992px) {
      left: 80px;
    }
  }
}
.sblog {
  @media screen and (min-width: 992px) {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    min-height: 60vh;
  }

  &-left {
    @media screen and (min-width: 992px) {
      grid-column: 1 / 3;
      grid-row: 1;
    }
  }

  &-right {
    @media screen and (min-width: 992px) {
      grid-column: 6 / 8;
      grid-row: 1;
    }
  }

  &-picture {
    min-height: 40vh;
    overflow: hidden;
    position: relative;

    &-img {
      background-position: center center;
      background-size: cover;
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;

      &.in-view {
        animation-duration: .6s;
        animation-name: blur;
        animation-timing-function: ease-out;
      }
    }
  }

  &-picture-right {
    @media screen and (min-width: 992px) {
      grid-column: 3 / 8;
    }
  }

  &-picture-left {
    @media screen and (min-width: 992px) {
      grid-column: 1 / 6;
    }
  }
}

@keyframes blur {
  0% {
    filter: blur(10px);
    transform: scale(1.1);
  }
  100% {
    filter: blur(0px);
    transform: scale(1);
  }
}

function callback(entries) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('in-view');
    } else {
      entry.target.classList.remove('in-view');
    }
  });
}

function initObserver() {
  const observer = new IntersectionObserver(callback);
  const items = document.querySelectorAll('.js-observe');

  for (const i in items) {
    if (!items.hasOwnProperty(i)) {
      continue;
    }

    observer.observe(items[i]);
  }
}

if (window.IntersectionObserver) {
  initObserver();
} else {
  console.log('IntersectionObserver not supported.');
}
document.addEventListener('click', (evt) => {
  const { classList, dataset } = evt.target;
  if (!classList.contains('js-scrollintoview')) {
    return;
  }
  if (!dataset.target) {
    return;
  }

  const elm = document.querySelector(dataset.target);
  if (!elm) {
    return;
  }

  evt.preventDefault();
  elm.scrollIntoView({
    behavior: 'smooth',
    block: 'start',
    inline: 'center',
  });
});