WordPressスクロールでふわっと表示・動きの作り方 CSS/JQuery

千ちゃん

ふわっと動くページを作るにはをどうしたらいいの？

シンさん

JQueryとスタイルを組みわせることでふわっとしたページを作れるよ！

コピペで使えるコードを紹介します！

Contants

スクロールでふわっと表示させたい！
CSSとJQueryで簡単コーディング
まとめ

スクロールでふわっと表示させたい！

デザインのいいサイトに行くとページの部品がふわっと表示されることがあります。
かっこいいサイトを作りたい。

動きをつけるにはJQuery(Javascript)のコードを使います。
いいデザインサイトを見ると動きある画像を見かけます。
スクロールでふわっと表示されて内容も協調されます。

こんな感じで表示する方法を解説します。
WordPressスクロールでふわっと表示する為の画像サンプル

※2019.6.6現在:
テーマの変更により上記画像がフワッと表示はされませんがLightningテーマでのご利用は可能です

CSSとJQueryで簡単コーディング

サンプルの“img_fuwa”はクラス名なので、自由に変更してご利用下さい。

ウィジェットやプラグインで生成されるコンテンツもクラス名が付いています。『ページのソースを表示』で使用クラス名に変更して動きをつける事ができます。

表示させる画像/タグ【HTML】

<img class ="img_fuwa" src="fusen.jpg" >

CSS

ご利用テーマのカスタムCSSに追加します。

.img_fuwa{
  opacity : 0;
  transform : translate(0, 50px);
  transition : 0.8s;
}

.img_fuwa.scrollin{
　opacity : 1;
　transform : translate(0, 0);
}

JQuery

functions.phpのadd_wp_footer_custom()関数内に追加します。
※子テーマで作成されることをお勧めします。

既に読み込まれている場合も、バージョンが2.xもしくは3.xでない場合には追加します。

<script src="https://code.jquery.com/jquery- 2.2.2.min.js"></script>

<script>
$(function(){
    $(window).scroll(function (){
        $('.img_fuwa').each(function(){
            var elemPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > elemPos - windowHeight + 200){
                $(this).addClass('scrollin');
            }else{
                $(this).removeClass('scrollin');
            }
        });
    });
});
</script>