ページをスクロールしていき任意の要素が見えたときに、その要素をアニメーションさせたいということがあると思います。wow.jsと同じようなことがしたいと言えばわかりやすいでしょうか。 wow.jsはとても簡単に様々な動きが付けられますが、Animation.cssと一緒に使用する都合上、実現が難しい動きもあったりします。今回は、そういった状況でも対応できる、動きを自由に付けられるようなJavaScriptを自作してみました。 $(window).scroll(function(){ var top = $("ターゲットとなる要素").offset().top; // ターゲットの位置取得 var position = top - $(window).height(); // 発火させたい位置 if($(window).scrollTop() > position){ // 要素が見えたときの
![要素がスクロール画面に現れたらアニメーションさせるJS | デザインやWEBに関する情報を発信する【まるログ】](https://cdn-ak-scissors.b.st-hatena.com/image/square/0bcc85a701cd2de6862892f467039b362760d9c6/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fwww.marukin-ad.co.jp%2Fmarulog%2Fwp-content%2Fuploads%2F2018%2F12%2Fkv2.jpg%3Ffit%3D662%252C363%26ssl%3D1)