1. 概要
スクロールした時に要素が表示される範囲に入ったら アニメーションしながらフェードイン表示させる カスタマイズの説明です。
2. 設定方法
基本設定
次で設定してください。
新規設定や変更後は必ず [ 保存して公開 ] をしてください。
- 管理画面 外観 ＞ カスタマイズ ＞ スクリプト・アクセス解析
- 項 目 スクロールフェードイン用スクリプト
- 作 業 入力する
ソースを入力
次で説明するスクリプトを入力してください。
未反映にする記事を選択できます
スクロールフェードインを未反映にする記事を選択できます。
次で設定してください。
- 管理画面 投稿・固定ページの編集
- 項 目 デザイン・その他
- 作 業 スクロールフェードインを未反映をチェックする
3. スクリプト：全体用
-
次の要素がスクロールフェードインします
・トップやカテゴリーページで表示される記事一覧
・記事内の各要素
・個別記事下に表示される関連記事
-
記事を修正せずにスクロールフェードインできるようにしています
記事内の <p> や <div> で囲まれた要素の 9 個目からフェードインするプログラムにしています
-
アニメーションは次の内容です
・ページ表示時は対象要素が透明度 10 ％ になります
・スクロールすると対象要素が上に 50 px 移動・透明度 100 ％ に 1.5 秒間で変化します
- AMP 化した記事は対象外でスクロールフェードインしません
スクリプト：全体用
スクリプトはサイト状況に合わせて次の変更をしてください
記事一覧で何個目からフェードインさせるか
3 行目 の (n+4) の 数値 を変更してください。
デフォルトは 4 つ目からフェードインします。
.list li:nth-child(n+4),
記事一覧に Google AdSense のインフィード広告 を設定しているときは、ポリシー違反になる可能性がありますので、スクロールフェードインは設定しないことをお勧めします。
その場合は 3 行目 を削除してください。
記事内のフェードインさせる要素を自分で決める ( 記事の修正が必要です )
5 ～ 13 行目 を削除してください
記事内でフェードインさせる要素を <div class="fadein">～</div> で囲んでください
フェードインさせる要素
アニメーションを変更する
21 ～ 22 行目 を変更してください。
CSS の transform ( トランスフォーム ) プロパティで様々なアニメーションを組めます。
transform の詳細は次のサイト様を参考にしてください。
参考サイト： transform について
■変更例
ページ表示時 ： 透明度 0 ％
スクロール時 ： 移動なし ・ 透明度100％ ・ 3 秒間で変化
.fadein{opacity:0;transform:translate(0);}
.fadein.scroll{opacity:1;transform:translate(0);transition:3s;}
4. スクリプト：スマホ ( サイドバー・FS フッター ) 用
- スマホのみの欄に入力してください
- アニメーションは全体用と同じ動作をします
- サイドバー・FS フッターの各コンテンツがスクロールフェードインします