jQueryとCSSを使用して、スクロールした時に「ふわっ」と表示させる方法を紹介します。WordPressで実装しているので参考にしてみてください。（ちなみに、本記事は初心者向けに書いています）
こんな感じに下からふわっとでてくる方法です。
最初にまとめておくと流れは以下のとおりです。基本的にコピペすればいいのでとても簡単だと思います。
- CSSを追記する（コピペ）
- jQeryを追記する（コピペ）
- classを追記する
ふわっとさせる CSSの書き方
まずCSSですがこちらです。WordPressであれば、ダッシュボードの左側にある外観→カスタマイズ → 追加CSS に追記します。エラーがでた場合、スペースとかを調整するとうまくいくと思います。
.fade {
opacity : 0;
transform: translateY(20px);
transition: all 1s;
}
ふわっとさせる jQueryの書き方
つづいてjQueryを追加します。
WordPressを使用している場合、必ず「子テーマ」でカスタマイズしてください。へたにいじって、とりかえしのつかないことにならないように・・
「jQuery」というのは、JavaScriptというプログラムを扱いやすくしたファイルの総称になります。（通称：ライブラリ）
jQueryを追記する
WordPressの子テーマに header.php をコピーして、こちらのコードを追記します。<head>～</head>の間（</head>の直前）に追記します。
<script>
$(function(){
$(window).scroll(function (){
$('.fade').each(function(){
var targetElement = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > targetElement - windowHeight + 200){
$(this).css('opacity','1');
$(this).css('transform','translateY(0)');
}
});
});
});
</script> jQueryが動かない方へ
WordPressでjQueryをはじめて使う場合で、上記のの記述をしても動かない方は、<head>～</head>の間（先に記述したコードより上）にこちらの一行を追加してみてください。（ jQueryを読み込むための記述です）
正確にはWordPressでは元々jQueryの読み込みはされているようなのですが、不具合がおきることがあるので、こちらの記述をする動くと思います。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>HTMLに「class」をつけてテストしてみる
設置がおわったら、画像でもテキストでもいいので、HTMLのclassに「fade」とつけてテストしてみてください。スクロールして画面の下200pxになったら、「ふわっ」と表示されると思います。
画像の場合はこんな感じでclassをつけます。
<img src="・・・.jpg" alt=" " class="fade">参考になればうれしいです。
