スクロールフェードイン

1. 概要
2. 設定方法
3. スクリプト：全体用
4. スクリプト：スマホ ( サイドバー・FS フッター ) 用

1. 概要

スクロールした時に要素が表示される範囲に入ったら アニメーションしながらフェードイン表示させる カスタマイズの説明です。

2. 設定方法

基本設定

次で設定してください。
新規設定や変更後は必ず [ 保存して公開 ] をしてください。

外観＞カスタマイズ＞スクリプト
スクロールフェードイン
チェック・入力する

チェックする

設定するものをチェックしてください。

ソースを入力

次で説明するスクリプトを入力してください。

未反映にする記事を選択できます

スクロールフェードインを未反映にする記事を選択できます。
次で設定してください。

投稿・固定ページの編集
デザイン・その他
スクロールフェードインを未反映をチェックする

3. スクリプト：全体用

次の要素がスクロールフェードインします

・トップやカテゴリーページで表示される記事一覧

・記事内の各要素

・個別記事下に表示される関連記事
記事を修正せずにスクロールフェードインできるようにしています

記事内の <p> や <div> で囲まれた要素の 9 個目からフェードインするプログラムにしています
アニメーションは次の内容です

・ページ表示時は対象要素が透明度 0 ％になります

・スクロールすると対象要素が上に 50 px 移動・透明度 100 ％に 1.5 秒間で変化します
AMP 化した記事は対象外でスクロールフェードインしません

スクリプト：全体用

<script>
jQuery(function($){$('
.list li:nth-child(n+4),
.post:nth-of-type(n+3),
.post-body .the-content p:nth-child(n+9),
.post-body .the-content div:nth-child(n+9),
.post-body .the-content ul:nth-child(n+9),
.post-body .the-content ol:nth-child(n+9),
.post-body .the-content h2:nth-child(n+9),
.post-body .the-content h3:nth-child(n+9),
.post-body .the-content table:nth-child(n+9),
.post-body .the-content blockquote:nth-child(n+9),
.post-body .the-content pre:nth-child(n+9),
.post-body .fadein,
.related').addClass('fadein');
$(window).scroll(function(){$('.fadein').each(function(){
var ef=$(this).offset().top;var sc=$(window).scrollTop();var wh=$(window).height();
if(sc>ef-wh+wh/20){$(this).addClass('scroll');}});});});
</script>
<style>
.fadein{opacity:0;transform:translate(0,50px);}
.fadein.scroll{opacity:1;transform:translate(0);transition:1.5s;}
</style>

jQuery(function($){$('

.list li:nth-child(n+4),

.post:nth-of-type(n+3),

.post-body .the-content p:nth-child(n+9),

.post-body .the-content div:nth-child(n+9),

.post-body .the-content ul:nth-child(n+9),

.post-body .the-content ol:nth-child(n+9),

.post-body .the-content h2:nth-child(n+9),

.post-body .the-content h3:nth-child(n+9),

.post-body .the-content table:nth-child(n+9),

.post-body .the-content blockquote:nth-child(n+9),

.post-body .the-content pre:nth-child(n+9),

.post-body .fadein,

.related').addClass('fadein');

$(window).scroll(function(){$('.fadein').each(function(){

var ef=$(this).offset().top;var sc=$(window).scrollTop();var wh=$(window).height();

if(sc>ef-wh+wh/20){$(this).addClass('scroll');}});});});

</script>

<style>

.fadein{opacity:0;transform:translate(0,50px);}

.fadein.scroll{opacity:1;transform:translate(0);transition:1.5s;}

</style>

スクリプトはサイト状況に合わせて次の変更をしてください

記事一覧で何個目からフェードインさせるか

3 行目の (n+4) の数値を変更してください。

デフォルトは 4 つ目からフェードインします。

.list li:nth-child(n+4),

1	.list li:nth-child(n+4),

記事一覧に Google AdSense のインフィード広告 を設定しているときは、ポリシー違反になる可能性がありますので、スクロールフェードインは設定しないことをお勧めします。
その場合は 3 行目を削除してください。

記事内のフェードインさせる要素を自分で決める ( 記事の修正が必要です )

5 ～ 13 行目を削除してください
記事内でフェードインさせる要素を <div class="fadein">～</div> で囲んでください

<div class="fadein">
フェードインさせる要素
</div>

フェードインさせる要素

</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;}

1 2	.fadein{opacity:0;transform:translate(0);} .fadein.scroll{opacity:1;transform:translate(0);transition:3s;}

CSS の組み方はサポート対象外となります。ご自身で組んでください

4. スクリプト：スマホ ( サイドバー・FS フッター ) 用

スマホのみの欄に入力してください
アニメーションは全体用と同じ動作をします
サイドバー・FS フッターの各コンテンツがスクロールフェードインします

スクリプト：スマホ ( サイドバー・FS フッター ) 用

<script>
jQuery(function($){
$('.side,.fsfooter,.fsfoot').addClass('fadein');
$(window).scroll(function(){$('.fadein').each(function(){var ef=$(this).offset().top;var sc=$(window).scrollTop();var wh=$(window).height();if(sc>ef-wh+wh/20){$(this).addClass('scroll');}});});});
</script>

jQuery(function($){

$('.side,.fsfooter,.fsfoot').addClass('fadein');

$(window).scroll(function(){$('.fadein').each(function(){var ef=$(this).offset().top;var sc=$(window).scrollTop();var wh=$(window).height();if(sc>ef-wh+wh/20){$(this).addClass('scroll');}});});});

</script>

その他カスタマイズ