【WordPress×モーション実装】スクロールのタイミングでスライドイン

サイトの中には、
スクロールをすると、画像や文字が下から上がってくるようなモーションが実装されているサイトがあります。

「モーションって難しそう・・・」って思ってきた私。
モーションにトライすること無く個人ブログ（WordPress・テーマCocoon）を運営してきましたが、
サイト制作１年生で、JQueryを最近学び始めた私でも、簡単にできちゃいました。

　３step　

JQueryの導入

JQueryとはJavascriptのライブラリのこと。
JQueryのお陰で、Javascriptの複雑なプログラミングを組まなくても、モーションがカンタンに実装できるようになりました。

WordPressは、JQueryが導入済み！！

JQueryを導入（ファイルをアップロード）しなくても、カスタムJavaScriptにコードを書く（コピペ）だけで、サイトにJQueryのモーションがつけられます。

CSSでモーションをつける

モーションをつけたい画像、文字ブロックにクラス名をつけます。

①モーションをつけたい画像、文字ブロックを選択
②設定（下書き保存、プレビューなどの並びの歯車マーク）をクリック
③高度な設定にある追加CSSクラスに好きなクラス名（半角英数字、ハイフンなど一部記号）をつけます。＊私の場合はわかりやすくモーション名にしました。

カスタムCSSにモーションの記述（コピペ）

私の場合は、
でざなり【超図解】jQueryでスクロール時に要素をフェードインさせる方法(wagashi）様のサイト
https://dezanari.com/jquery-scroll-fadein/　
をコピペさせていただきました。（wagashi様、ありがとうございました！！）

コピペの際には、

.elementのelementを、先ほど追加cssクラスでつけた名前に変更しましょう。
その際必ず.（ドット）はつけてください。

.is-fadeinはそのままでOKです。

↑↑の　.fadein-right{　から下へ４行目

translateX(30px)とは、
静止時の（画像・文字ブロック）位置より左30pxから右へスライドインという動きになります。

JQueryで「スクロールのタイミング」という条件を設定する

カスタムJavaScriptに「スクロールのタイミングで」という条件を記述（コピペ）

CSSに引き続き、
でざなり【超図解】jQueryでスクロール時に要素をフェードインさせる方法(wagashi）様のサイト
https://dezanari.com/jquery-scroll-fadein/　
をコピペさせていただきました。（wagashi様、ありがとうございました！！）

↑↑の　$(function(){　から下へ５行目（一行空いている行も含む）

$(‘.fadein-right’).each(function(){

の .fadein-rightは追加cssでつけたクラス名です。（この時「.」は忘れないでくださいね）

これで、
スクロールのタイミングでスライドインというモーションがつけられます。

　スクロールのタイミングで３種のモーション　

私のブログのトップページは、
「スライドインライト」「スライドインレフト」「スライドアップ」の３種のモーションをつけています。

3種のモーションをつけた「カスタムCSS」と「カスタムJavaScript」の記述をご紹介します。

モーションをつけたい画像や文字ブロックに追加CSSクラスにクラス名をつける。

私の場合は、

• fadein-right
• fade-up
• fadein-left

と、
実装したいモーションの名前をつけました。

カスタムCSSの記述

↑↑
/*フェードイン時に入るクラス*/から下の記述は、1回だけでOK

クラス名によって動きが違うので、
transform: translateX(30px);の、
XかY、
(30px）か（-30px）が、それぞれ違っています。

カスタムJavaScriptの記述

2段落目の記述

$(‘.fadein-right,.fadein-left,.fade-up’).each(function () {

$(”)の中にクラス名を書いていきます。

その際に、クラス名が複数ある場合は、,（カンマ）で区切ればOK。