HTML

HTMLはシンプルにこんな感じです。
section_barのwidthを変化させます。

上下の<section class="section_scroll"></section>はスクロール量が欲しいので書きました。
CSSで適当に高さを出します。

HTML
コピー
<section class="section_scroll"></section>
 
<!-- アニメーションする要素-->
<section class="section">
       <div class="section_bar"></div>
</section>
<!-- アニメーションする要素-->
 
<section class="section_scroll"></section>

CSS

sectionタグの要素をheight: 100%;にして高さを出して、section_barを中央に配置するようにしています。

CSS
コピー
html,
body{
   height: 100%;
}
 
.section_scroll{
   width: 100%;
   height: 100%;
}
 
.section{
   background-color: #fafafa;
   display: flex;
   align-items: center;
   width: 100%;
   height: 100%;
}
 
.section_bar{
   background-color: #000;
   /* width: 100%; */
   height: 5px;
}

JavaScript

JavaScript
コピー
$(window).on('scroll load', function(){
   let scrollTop = $(window).scrollTop();
   let winH = $(window).height();
   let section_bar_pos = $('.section_bar').offset().top;
  // 公式
   let section_bar_now = (1 - (section_bar_pos - scrollTop) / winH) * 2 * 100;
 
   $('.section_bar').css('width', section_bar_now + '%');
});

公式の説明

上記のJavaScriptの6行目あたりで線(.section_bar)のwidthを計算しています。
でその公式が以下のなります。

公式
コピー
(1 - (section_bar_pos - scrollTop) / winH) * 2 * 100
 
// もっと噛み砕いて書くと
(1 - (対象要素の位置 - スクロール量) / windowの高さ) * 2 * 100

こちらの公式だと要素が可視範囲に入ったら値が0になり画面真ん中で値が100になります。
* 2の部分を小さくするほど画面上部で値が100になります。
* 100をやめると0〜1の範囲で値が変化するようになります。
色々アレンジして使ってみてください。

HTML

HTMLはこんな感じです。
上下左右に配置する要素を用意します。

上下の<section class="section_scroll"></section>はスクロール量が欲しいので書きました。
CSSで適当に高さを出します。

HTML
コピー
<section class="section_scroll"></section>
 
<!-- アニメーションする要素-->
<section class="section">
   <div class="section_top"></div>
   <div class="section_right"></div>
   <div class="section_bottom"></div>
   <div class="section_left"></div>
</section>
<!-- アニメーションする要素-->
 
<section class="section_scroll"></section>

CSS

sectionタグの要素をheight: 100%;にして高さを出します。
section_top、section_right、section_bottom、section_leftをそれぞれ上下左右に配置するようにしています。

CSS
コピー
html,
body{
   height: 100%;
}
 
.section_scroll{
   width: 100%;
   height: 100%;
}
 
.section{
   background-color: #fafafa;
   width: 100%;
   height: 100%;
   position: relative;
 
}
 
.section_top{
   background-color: rgba(0,0,0,0.5);
   position: absolute;
   top: 0%;
}
 
.section_right{
   background-color: rgba(0,0,0,0.5);
   height: 100%;
   position: absolute;
   top: 0%;
   right: 0%;
}
 
.section_bottom{
   background-color: rgba(0,0,0,0.5);
   position: absolute;
   bottom: 0%;
}
 
.section_left{
   background-color: rgba(0,0,0,0.5);
   height: 100%;
   position: absolute;
   top: 0%;
   left: 0%;
}

JavaScript

JavaScript
コピー
$(window).on('scroll load', function(){
   let scrollTop = $(window).scrollTop();
   let winH = $(window).height();
   let winW = $(window).width();
   let section_pos = $('.section').offset().top;
  // 公式
   let section_now = (1 - (section_pos - scrollTop) / winH) * 80;
  // 公式
   let section_now2 = Math.abs(-1 - (section_pos - scrollTop) / winH) * 80;
 
   if(scrollTop > section_pos - winH){
       $('.section_top, .section_bottom').css({'height': section_now + 'px',
                                                                        'width': winW - section_now * 2 + 'px',
                                                                        'left': section_now
                                                                      });
       $('.section_right, .section_left').css('width', section_now + 'px');
   }
   if(scrollTop > section_pos){
       $('.section_top, .section_bottom').css({'height': section_now2 + 'px',
                                                                         'width': winW - section_now2 * 2 + 'px',
                                                                         'left': section_now2
                                                                       });
       $('.section_right, .section_left').css('width', section_now2 + 'px');
   }
});

7行目
こちらの公式は、.sectionが可視範囲に入ったら値が0になり、画面上部に来たら値が80になります。

9行目
こちらの公式は、.sectionが画面上部に来たら値が80になり、画面外になる頃に値が０になります。

11行目
.sectionが画面上部に来るまでif文内のCSSが適応されます。

18行目
.sectionが画面上部に来たらif文内のCSSが適応されます。