アクセス時やページ移動時にエフェクトを加える

Ads

Result

動作確認をするには再生ボタンを押してください。

jQuery

$(document).ready(function() {
    //bodyを非表示にする
    $("body").css("display", "none");
    //フェードイン表示
    $("body").fadeIn(2000);
    //ページ移動の処理
    $("a.fade").click(function(event) {
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(1000, redirectPage);
    });
    function redirectPage() {
        window.location = linkLocation;
    }
});

css

h1{font-size:25px;margin-bottom:20px;}
p{margin-bottom:20px;}
#header{margin:25px;width:500px;}

html

<div id="wrapper">
    <div id="header">
         <h1>Sample</h1>
        <p><a href="/" class="fade">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7

Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7