【wordpress】文字をフェードインさせる！【javascript】

この文字をフェードインさせるためのコードを拾ってきました！

どうも！

まずは先人の力をお借りする

参考：jQueryの短いコードでコンテンツをフェードインしながらふわりと読み込む方法

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript"> 
    $(function(){ 
        $('.fade center').hide(); 
    }); 
       
    var i = 0; 
    var int=0; 
       
    $(window).bind("load", function() { 
        var int=setInterval("doFade(i)",500); 
    }); 
       
    function doFade() { 
        var list = $('.fade center').length; 
        if (i >= list) { 
            clearInterval(int); 
        } 
        $('.fade center').eq(i).fadeIn(1000); 
            i++; 
    } 
</script>

center要素によってフェードしてくるようにしました！
後はフェードしてくる予定の文章をコードで囲うだけです！

<h2 class="fade"><center>あなたの心にさざなみを...。</center></h2>

<em class="fade"><center>
アカペラシンガーズK.O.E.所属<br>
３世代混声バンド<br>
2014年2月に結成以来<br>
ノリの良い曲を楽しく格好良く歌っています。
</center></em>

こんな感じです！
しかしこれだけでは問題があるのです！そう！

wordpressのsite要素が文字が読み込まれるたびにカクンカクンと伸びて行くため単純に読み込みが遅いだけに見えてしまう！

悪い子はいねが？

ってことで早速cssファイルを開いて編集。
site要素のmin-heightを560pxぐらいに設定してみました！

するとなんてことでしょう！
今度は文字が読み込まれる度にsite-content要素が伸びるため文字が読み込まれる度にフッターがカクンカクンと伸びて行きます。

これじゃあだめだ！
と、言う事でさっき書いたsite要素のmin-heightは取り消し。

.site-content {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
	min-height: 280px;
}

こうしてくれました！
するときちんと枠だけがまずは表示されてそこに後から文字が出てくるように！めでたしめでたし！

成果物：http://sazanami.mokabuu.com/

最後まで読んでいただきありがとうございます。もしこの記事を気に入って頂けたようであればシェアをお願い致します。非常に励みになります。

するとなんてことでしょう！ 今度は文字が読み込まれる度にsite-content要素が伸びるため文字が読み込まれる度にフッターがカクンカクンと伸びて行きます。

Related posts:

コメントを残す コメントをキャンセル

するとなんてことでしょう！
今度は文字が読み込まれる度にsite-content要素が伸びるため文字が読み込まれる度にフッターがカクンカクンと伸びて行きます。

コメントを残すコメントをキャンセル