Web制作

【wow.jsのレスポンシブ対応】wow.jsのoffsetとかdelayをデバイスによって変えたい時は、jQueryのattrメソッドを使う

スクロールアニメーションを簡単に実装できるjsライブラリの中でも人気なのが、「wow.js」。
animate.cssとwow.jsを読み込ませて、適用させたい要素のclass名とdata属性を設定するだけで簡単にいろんなアニメーションを実装できる。

僕もよく使っているが、たまに、「PCの時(もしくはスマホの時)だけoffset値やdelay値を変えたい」というケースがある。
想定されるケースとしては代表的なのは、「PCでは横並びで表示されている要素が、SPだと縦並びに表示されるようにしているレイアウト」の場合。
具体的にいうと下記のようなパターン。

<div class="container">
 <div class="wrapper img-1">
  <img src="/assets/img/1111.webp" alt="">
  <h3 class="ttl wow fadeInRight" data-wow-offset="250" data-wow-delay="0s">心地よい談笑を楽しむ</h3>
  <div class="desc-wrapper">
   <p class="desc">複数のデスク・チェアを用意したスペース。<br>会話をされたい方はこちらのスペースを<br class="sp-hide">ご利用ください。</p>
   <h4>chat lounge</h4>
  </div>
 </div>
 <div class="wrapper img-2">
  <img src="/assets/img/2222.webp" alt="">
  <h3 class="ttl wow fadeInLeft" data-wow-offset="150" data-wow-delay="1s">静かな空間を過ごす</h3>
  <div class="desc-wrapper">
   <p class="desc">ジム利用の前後・合間に集中してデスクワークを行なっていただくスペースです。</p>
   <h4>silent lounge</h4>
  </div>
 </div>
 <div class="wrapper img-3">
  <img src="/assets/img/3333.webp" alt="">
  <h3 class="ttl wow fadeInRight" data-wow-offset="250" data-wow-delay="2s">外気・日光を感じる</h3>
  <div class="desc-wrapper">
   <p class="desc">トレーニング・仕事の合間にリフレッシュができるテラススペースです。</p>
   <h4>terrace lounge</h4>
  </div>
 </div>
</div>

コードだと上記のような感じ。
.ttlというh3要素に対し、wow.jsを適用させている。

左側の要素から順番にフワフワっとタイミングをずらしつつ表示させたいので、data-wow-offsetとdata-wow-delayで調整を入れている。

PCだとこの設定でOKなのだが、SP版だと縦に並ぶレイアウトになるので、このdata設定のままだと２・３個目のアニメーションがいたずらに遅くなってしまう。なので、このdata値をSPでは変更したい。

SPではwow.jsを「適用させない」という方法は多くの記事がヒットするが、data値を変更する方法はパッと出てこなかったので、備忘録の意味も込め、対応方法を下記に記載。

jQueryのattrメソッドを使う

前置きが長くなったが、今回の主題。SPでdataの値を変更するために、jQueryのattrメソッドを使うことにした。（他にいい方法があったら教えて欲しいです）

$(function(){
 if (window.matchMedia('(max-width: 767px)').matches){
  $('.ttl').attr({
   'data-wow-offset': '30',
   'data-wow-delay': '0.5s'
  });
 };
}());

.ttl要素について、767px以下のデバイスではoffsetを30、delayを0.5sに統一するように指定している。これで問題は解消。

リサイズ対応の場合は下記も追加

上記だとリサイズ（ページを表示させた「後」にブラウザの横幅が変更されるケース）に対応できていないので、リサイズ対応も加える場合は下記も追記する。

$(window).resize(function() {
 if (window.matchMedia('(max-width: 767px)').matches){
  $('.img-ttl').attr({
   'data-wow-offset': '30',
   'data-wow-delay': '0.5s'
  });
 }
});

これでリサイズ対応も完了。ちゃんちゃん。

TOP