【WordPress】jQueryとCSSで、スクロールした時にふわっと表示させる方法

jQueryとCSSを使用して、スクロールした時に「ふわっ」と表示させる方法を紹介します。WordPressで実装しているので参考にしてみてください。(ちなみに、本記事は初心者向けに書いています)

こんな感じに下からふわっとでてくる方法です。

最初にまとめておくと流れは以下のとおりです。基本的にコピペすればいいのでとても簡単だと思います。

  1. CSSを追記する(コピペ)
  2. jQeryを追記する(コピペ)
  3. 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">

参考になればうれしいです。







コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です