<div class="l-current">
  <div class="current"><span class="num"></span></div>
  <span class="slash">/</span>
  <div class="total"></div>
  <svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
	<path class="st1" d="M512,217.098C512,88.186,397.392,3.765,256,3.765S0,88.186,0,217.098c0,79.52,55.216,154.785,155.608,213.344
		l133.02,77.794l-13.216-78.402C407.726,422.47,512,340.049,512,217.098z"></path>
</svg>
</div>
<div id="js-fullpage">
  <section class="section section-1">
    <div class="section-inner">
    <div class="section-title">
      <h1>FullPage.js</h1>
    <h2>Current Number</h2>
    <h3>Blue</h3>
    </div>
    <svg class="svg" xmlns="http://www.w3.org/2000/svg" x="0px"
	 y="0px" viewBox="0 0 96.9 97.6">
<path id="js-svg-mouth" d="M37.9,61.4c-3.8-0.2-7.1-1.6-9.9-4.2c-0.8-0.7-1.5-1.7-0.5-2.7c0.8-0.8,1.7-0.4,2.5,0.1c2.5,1.8,5.1,2.9,7.7,3.1c2.6,0.2,5.2-0.6,7.8-2.6c0.7-0.6,1.7-0.9,2.5,0c0.7,0.9,0.1,1.7-0.6,2.4C44.7,60,41.6,61.4,37.9,61.4z"/>
<path d="M75,35.4c0.1,1-0.2,1.8-1.1,1.8c-2.4,0-3.2-1.9-4-3.8c-0.3-0.8,0.1-1.7,0.9-1.7C73.2,31.9,74.1,33.9,75,35.4z"/>
<path d="M55.4,33.5c-5.2,0-9.2,5.2-9.1,12c0.1,6.1,3.8,10.2,9.2,10.2c5.8,0,10-5,9.9-11.8C65.4,38.4,60.7,33.5,55.4,33.5z
	 M55.7,52.2c-3.8-0.1-5.7-2.3-5.7-6.7c-0.1-5,2.3-8.6,5.6-8.6c3.5,0,6.3,3.2,6.4,7.4C61.9,49.4,59.7,52.2,55.7,52.2z"/>
<path d="M20,33.8c-5.8-0.1-10.2,4.5-10.2,10.5c0,6.6,4.3,11.4,10,11.4c5.6-0.1,9.1-4.1,9.1-10.4C28.9,38.2,25.6,33.9,20,33.8z
	 M19.3,52.2c-3.8,0-5.9-2.8-6-7.6c0-4.4,2.8-7.7,6.7-7.6c3.3,0.1,5.1,2.9,5.2,7.8C25.3,49.8,23.3,52.2,19.3,52.2z"/>
<path d="M56.7,46.5c-0.4,0.5-1,0.7-1.4,0.3c-1.1-1.2-0.6-2.5-0.1-3.7c0.2-0.5,0.9-0.8,1.3-0.3C57.6,43.9,57,45.3,56.7,46.5z"/>
<path d="M20.1,46.5c-0.4,0.5-1,0.7-1.4,0.3c-1.1-1.2-0.6-2.5-0.1-3.7c0.2-0.5,0.9-0.8,1.3-0.3C20.9,43.9,20.4,45.3,20.1,46.5z"/>
<circle class="st0" cx="48.4" cy="48.9" r="45.7"/>
</svg>
    </div>
  </section>
  
  <section class="section section-2">
    <div class="section-inner">
      <div class="section-title">
      <h1>FullPage.js</h1>
    <h2>Current Number</h2>
    <h3>Orange</h3>
      </div>
    <svg class="svg" xmlns="http://www.w3.org/2000/svg" x="0px"
	 y="0px" viewBox="0 0 96.9 97.6">
<path id="js-svg-mouth" d="M37.9,61.4c-3.8-0.2-7.1-1.6-9.9-4.2c-0.8-0.7-1.5-1.7-0.5-2.7c0.8-0.8,1.7-0.4,2.5,0.1c2.5,1.8,5.1,2.9,7.7,3.1c2.6,0.2,5.2-0.6,7.8-2.6c0.7-0.6,1.7-0.9,2.5,0c0.7,0.9,0.1,1.7-0.6,2.4C44.7,60,41.6,61.4,37.9,61.4z"/>
<path d="M75,35.4c0.1,1-0.2,1.8-1.1,1.8c-2.4,0-3.2-1.9-4-3.8c-0.3-0.8,0.1-1.7,0.9-1.7C73.2,31.9,74.1,33.9,75,35.4z"/>
<path d="M55.4,33.5c-5.2,0-9.2,5.2-9.1,12c0.1,6.1,3.8,10.2,9.2,10.2c5.8,0,10-5,9.9-11.8C65.4,38.4,60.7,33.5,55.4,33.5z
	 M55.7,52.2c-3.8-0.1-5.7-2.3-5.7-6.7c-0.1-5,2.3-8.6,5.6-8.6c3.5,0,6.3,3.2,6.4,7.4C61.9,49.4,59.7,52.2,55.7,52.2z"/>
<path d="M20,33.8c-5.8-0.1-10.2,4.5-10.2,10.5c0,6.6,4.3,11.4,10,11.4c5.6-0.1,9.1-4.1,9.1-10.4C28.9,38.2,25.6,33.9,20,33.8z
	 M19.3,52.2c-3.8,0-5.9-2.8-6-7.6c0-4.4,2.8-7.7,6.7-7.6c3.3,0.1,5.1,2.9,5.2,7.8C25.3,49.8,23.3,52.2,19.3,52.2z"/>
<path d="M56.7,46.5c-0.4,0.5-1,0.7-1.4,0.3c-1.1-1.2-0.6-2.5-0.1-3.7c0.2-0.5,0.9-0.8,1.3-0.3C57.6,43.9,57,45.3,56.7,46.5z"/>
<path d="M20.1,46.5c-0.4,0.5-1,0.7-1.4,0.3c-1.1-1.2-0.6-2.5-0.1-3.7c0.2-0.5,0.9-0.8,1.3-0.3C20.9,43.9,20.4,45.3,20.1,46.5z"/>
<circle class="st0" cx="48.4" cy="48.9" r="45.7"/>
</svg>
    </div>
  </section>
  
  <section class="section section-3">
    <div class="section-inner">
    <div class="section-title">
    <h1>FullPage.js</h1>
    <h2>Current Number</h2>
    <h3>Green</h3>
      </div>
    <svg class="svg" xmlns="http://www.w3.org/2000/svg" x="0px"
	 y="0px" viewBox="0 0 96.9 97.6">
<path id="js-svg-mouth" d="M37.9,61.4c-3.8-0.2-7.1-1.6-9.9-4.2c-0.8-0.7-1.5-1.7-0.5-2.7c0.8-0.8,1.7-0.4,2.5,0.1c2.5,1.8,5.1,2.9,7.7,3.1c2.6,0.2,5.2-0.6,7.8-2.6c0.7-0.6,1.7-0.9,2.5,0c0.7,0.9,0.1,1.7-0.6,2.4C44.7,60,41.6,61.4,37.9,61.4z"/>
<path d="M75,35.4c0.1,1-0.2,1.8-1.1,1.8c-2.4,0-3.2-1.9-4-3.8c-0.3-0.8,0.1-1.7,0.9-1.7C73.2,31.9,74.1,33.9,75,35.4z"/>
<path d="M55.4,33.5c-5.2,0-9.2,5.2-9.1,12c0.1,6.1,3.8,10.2,9.2,10.2c5.8,0,10-5,9.9-11.8C65.4,38.4,60.7,33.5,55.4,33.5z
	 M55.7,52.2c-3.8-0.1-5.7-2.3-5.7-6.7c-0.1-5,2.3-8.6,5.6-8.6c3.5,0,6.3,3.2,6.4,7.4C61.9,49.4,59.7,52.2,55.7,52.2z"/>
<path d="M20,33.8c-5.8-0.1-10.2,4.5-10.2,10.5c0,6.6,4.3,11.4,10,11.4c5.6-0.1,9.1-4.1,9.1-10.4C28.9,38.2,25.6,33.9,20,33.8z
	 M19.3,52.2c-3.8,0-5.9-2.8-6-7.6c0-4.4,2.8-7.7,6.7-7.6c3.3,0.1,5.1,2.9,5.2,7.8C25.3,49.8,23.3,52.2,19.3,52.2z"/>
<path d="M56.7,46.5c-0.4,0.5-1,0.7-1.4,0.3c-1.1-1.2-0.6-2.5-0.1-3.7c0.2-0.5,0.9-0.8,1.3-0.3C57.6,43.9,57,45.3,56.7,46.5z"/>
<path d="M20.1,46.5c-0.4,0.5-1,0.7-1.4,0.3c-1.1-1.2-0.6-2.5-0.1-3.7c0.2-0.5,0.9-0.8,1.3-0.3C20.9,43.9,20.4,45.3,20.1,46.5z"/>
<circle class="st0" cx="48.4" cy="48.9" r="45.7"/>
</svg>
    </div>
  </section>
</div>

body{
   position: relative;
   font-family: 'Comfortaa', cursive;
}

.svg{
  width: 200px;
  height: 200px;
  position: absolute;
  right: -50px;
  bottom:-50px;
  .st0{
  fill:none;
  stroke:#000000;
  stroke-opacity:0.6;
  stroke-width:4;
  stroke-miterlimit:10;
  }
  path{
    fill-opacity:0.6;
  }
}

.section{
  &-inner{
    width: calc(100% - 50px);
    height: calc(100% - 50px);
    display: block;
    left:25px;
    top:25px;
    position: relative;
    overflow: hidden;
  }
  &-title{
    position: absolute;
    top:50%;
    left:50px;
    transform:translateY(-50%);
    letter-spacing:0.1em;
    h1{
      font-size:60px;
      font-weight: 700;
    }
    h2{
      margin-top: 10px;
      font-size:30px;
      font-weight: 300;
    }
    h3{
      width: 98%;
      font-size:16px;
      margin-top: 20px;
      background: rgba(0,0,0,0.4);
      display: inline-block;
      padding: 10px;
      color:#fff;
      text-align:center;
    }
  }
}

.section-1{
  .section-inner{
    background: #DFECF5;
  }
}

.section-2{
  .section-inner{
    background: #FFDCC8;
  }
}

.section-3{
  .section-inner{
    background: #B7DFD2;
  }
}

.l-current{
  position:fixed;
  right:50px;
  bottom:165px;
  z-index:2;
  width: 150px;
  height: 150px;
  svg{
     position: absolute;
     width: 150px;
     top:0px;
  }
  .st1{
    fill:#fff;
  }
}

.total{
  font-size:30px;
  z-index:3;
  position: absolute;
  right: 35px;
  bottom:65px;
}

.slash{
  position: absolute;
  z-index:3;
  right: 70px;
  top:55px;
  font-size:20px;
}

.current{
  font-size:45px;
  z-index:3;
  font-weight: bold;
  position: absolute;
  right: 80px;
  top:45px;
}

.num{
  padding-right: 15px;
}

const $target = $('#js-fullpage');
const $current = $('.current');
const $total = $('.total');

//セクションの数を予め出してあげる
const $section = $('.section').length;
$total.append($section);


$target.fullpage({
  easing: 'easeOut',
  scrollingSpeed: 1000,
  //動いている時に動く関数
  onLeave: function (index,nextIndex) {
    //過去の数字を消す
    $('.num').remove();
    console.log('onLeave',index,nextIndex);
  },
  //今いる位置を出してくれる関数
  afterLoad: function (anchorLink,afterIndex) {
    console.log('afterLoad',anchorLink,afterIndex);
    $current.append('<span class="num">'+ afterIndex +'</span>');
  }
});