AOS.jsをサイズ変更に対応させる

画面幅に応じて発火タイミングを変えたい。

webページのスクロールをトリガーとしてふわっと表示させる演出が簡単に実装できて便利なAOS.jsですが、レスポンシブ対応などでレイアウトが変わると、意図していないタイミングで発火してしまう事がありました。

data-aos-offsetを使う。

発火タイミングのコントロールには対象要素にdata-aos-offsetを設置します。（デフォルトは120）
このパラメータで該当する要素が、画面の下端からどれくらいスクロールしたら発火するかを変更できます。

<h1 id="target" data-aos="fade-up" data-aos-offset="300">ふわっと表示したい！</h1>

この値をjavascriptなどで制御すればいいのですが、パラメータを変更するだけでは反映されずに、いちどAOS.jsを初期化する必要があります。

//リサイズ時にaos.jsの発火タイミング変更
$(window).on('road', 'resize') function (){
  if($(window).width() < 1200){
    $('#target').attr('data-aos-offset', '-500');
  }else{
    $('#target').attr('data-aos-offset', '120');
}
AOS.init(); //ここでdataの変更を読み込ませます
}