スポンサーリンク
ブログ

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

WordPressスクロールでふわっと表示・動きの作り方 CSS/JQuery
千ちゃん
千ちゃん
ふわっと動くページを作るにはをどうしたらいいの?
シンさん
シンさん
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>

まとめ

サンプルでは、表示したコンテンツを再度非表示にして動きをつけています。

ホームページに動きをつけることで強調したサイトにすることができます。

CSS/JQueryの使い方になれること次のステップアップも可能です。
いろんなサイト作りに役立ててみて下さい。