CSS iPhone WEBデザイン スクリプト

animate.cssでスクロールに合わせてアニメーション表示しようとしたらiPhoneで変な挙動になったけど解決したメモ

2019年4月25日

animate.cssトップ画面

手軽にCSS3のアニメーション効果を導入できる「animate.css」って便利ですよね。導入も簡単だしアクションも面白いのでサイトにガンガン使いたい感じでいいです。

そこで、スクロールして表示されたらアニメーションの効果が発動するようにしたくていろいろ検索して、「【Animate.css】スクロールに合わせてアニメーション表示する」を参考にしてJavaScript組み込んでみたんですけど、ハマってしまったのでメモ。

というわけで、実際お仕事で導入したので、要件がありまして「jQueryのバージョンは1.4.3を使ってね」ということ。古いです。

で、上記参考サイトのコードでは

$(window).on('load scroll', function(){
  var elem = $('.animated');

  elem.each(function () {
    var isAnimate = $(this).data('animate');
    var elemOffset = $(this).offset().top;
    var scrollPos = $(window).scrollTop();
    var wh = $(window).height();

    if(scrollPos > elemOffset - wh + (wh / 2)){
      $(this).addClass(isAnimate);
    }
  });

});

なのですがjQuery1.4.3では、「$(window).on」が使えない・・・

なんやかんやいろいろ調べて、解決したのがこちらのコード

animateAll = function(){
  var elem = $('.animated');

  elem.each(function () {
    var isAnimate = $(this).data('animate');
    var elemOffset = $(this).offset().top;
    var scrollPos = $(window).scrollTop();
    var wh = $(window).height();
    if(scrollPos > elemOffset - wh){
      $(this).addClass(isAnimate);
    }
  });
};
$(window).load(animateAll);
$(window).scroll(animateAll);

なんかよくわかんないけど、とりあえず動いてるからいいとして、windowのロードイベントとスクロールイベントのときに、別で定義したanimate.cssのクラスを追加したりする関数を発動させるという感じです。

これは、別にいいんですけど、ハマったのが、iPhoneでの挙動がおかしいという。

PCでテストする分にはちゃんとスクロールして出現のタイミングでアニメーションが発動するんですが、iPhoneだとsafariでもchromeでもアニメーションしてほしい箇所が、一瞬普通に表示されてから、消えてアニメーションが発動するというブサイクな仕様に。

これは困ったなー、といろいろいじってると、どうやらiPhoneの方では $(window).height がただしく取得できてないっぽい。

なので、スクリプトをちょっといじってみる。

    if(scrollPos > elemOffset - wh - 100){
      $(this).addClass(isAnimate);
    }

if文の右、スクロールの判定に 100ピクセルほどプラスしてみた。

そうすると、iPhoneでもちゃんとスクロールして出現のタイミングでアニメーション発動できました。

なんでそうなるのかはよくわかんないけど、とりあえずそれで凌ぐことができたので、まあいいかーって感じ。

オンラインスクールなら自宅で無料体験もできます

「現場のことは現場で学べ」といいますけど、まずある程度の知識がないと現場でも質問の仕方や何を学びとったらいいのかがわからないこともあると思います。
独学で知ることができないことは現場以外にもWEBデザインのスクールなどでも学べますが、オンラインで自宅にいながらリモートで学習できるという環境も増えてきていますので、自分のライフスタイルに合えばそういう選択もありですね。





【TechAcademy】は、オンライン完結のスクールで、 「最短4週間で未経験からプロを育てる」とのこと。
あくまで「最短」なので、もっと学びたいと思えば学ぶことも出来るでしょう。

WEBデザインコース以外にも

・Webアプリケーションコース(Ruby on Rails)
・PHP/Laravelコース
・Pythonコース ・フロントエンドコース
・WordPressコース
・iPhoneアプリコース
・Androidアプリコース
・Unityコース
・はじめてのプログラミングコース
・UI/UXデザインコース
・Webディレクションコース
・Webマーケティングコース
・Javaエンジニアコース
・ブロックチェーンコース
・Node.jsコース
・Scalaコース

など多岐にわたってWEB関係の開発の技術を学習できるので、WEBデザイナーとして成熟したあとも、WEBエンジニアとしてさらに活躍の場を広げたいという場合にもいいんじゃないでしょうか。





もし興味があれば、無料体験もできるのでまずは無料で、自分のライフスタイルや性格にフィットするか試してみてはどうでしょう?

-CSS, iPhone, WEBデザイン, スクリプト
-, , ,

Copyright© MDBloG , 2020 All Rights Reserved Powered by AFFINGER5.