LoginSignup
2

More than 1 year has passed since last update.

posted at

WordPressで外部からサイトトップにアクセスした時だけ全画面アニメーションを表示したい

やりたいこと

  • サイトトップにアクセスしたら全画面のCSSアニメーションを表示
  • リロードでも表示
  • サイト内からトップアクセスした時は表示しない

実装

フロントページの<body>の直下あたりに以下のタグを追加。

header.php
<?php if(is_front_page()): ?>
<div id="enter">
    <div id="enter-obj1">
    <p><span class="line1"></span><span class="line2"></span><span class="line3"></span><span class="line4"></span><span class="line5"></span></p>
    </div>
</div>
<?php endif; ?>

JavaScriptを追加します。
<head>内もしくは、</body>の直前に追加してください。

header.php
<?php if(is_front_page()): ?>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
<script type="text/javascript">
$(function() {
    //top animation を実行
    if (window.performance) {
        if (performance.navigation.type === 1) {
            // リロードされた
            topAnime();
        } else {
            // リロードされていない
            var ref = document.referrer; // リファラ情報を得る
            var hereHost = window.location.hostname; // 現在ページのホスト(ドメイン)名を得る

            // ホスト名が含まれるか探す正規表現を作る(大文字・小文字を区別しない)
            var sStr = "^https?://" + hereHost;
            var rExp = new RegExp( sStr, "i" );

            // リファラ文字列を判別
            if( ref.length == 0 ) {
                // リファラなしの場合
                topAnime();
            }
            else if( ref.match( rExp ) ) {
                // マッチした場合=アクセス元が自サイト内の場合
                $('#enter').addClass('end');
            }
            else {
                // マッチしない場合=アクセス元がサイト外の場合
                topAnime();
            }
        }
    }
    function topAnime(){
        if($('#enter').length){
            $('body').addClass('runanime');
            $('#enter p span.line1').delay(1000).queue(function(){
                $(this).addClass('run').css('opacity','1');
            });
            $('#enter p span.line2').delay(2000).queue(function(){
                $(this).addClass('run').css('opacity','1');
            });
            $('#enter p span.line3').delay(3000).queue(function(){
                $(this).addClass('run').css('opacity','1');
            });
            $('#enter p span.line4').delay(4000).queue(function(){
                $(this).addClass('run').css('opacity','1');
            });
            $('#enter p span.line5').delay(5000).queue(function(){
                $(this).addClass('run').css('opacity','1');
            });
            // アニメーションの終了処理
            $('#enter div#enter-obj1').delay(7000).queue(function(){
                $(this).addClass('outrun').css('opacity','0');
            });
            $('#enter').delay(8000).queue(function(){
                $(this).addClass('end');
                $('body').removeClass('runanime');
            });
        }
    }

});
</script>
<?php endif; ?>

トップページにアクセスした際のリファラなどを元に、アニメーションを実行する/しないを確定します。
delayの数字は、表示するパーツの数によって調整をしてください。

JavaScriptではclassを順番に追加していく処理しかしてません。細かいアニメーションはCSSで追加してください。

CSSは以下の通りに追加。

style.css
/* enter */
#enter,
#enter div{
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 10000;
}
body.runanime{
    position: fixed;
    overflow: hidden;
}
body{
    position: relative;
}
#enter div#enter-obj1{
    opacity: 1;
    background-color: #fff;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
#enter div#enter-obj1 p{
    text-align: center;
    padding: 0;
    margin: 0;
    font-size: 3em;
}
#enter div#enter-obj1 p span{
    display: inline-block;
    margin: 0 5px;
    opacity: 0;
}

#enter div#enter-obj1 p span.run,
.run{
    -webkit-animation: topFadeIn 2s linear 1;
            animation: topFadeIn 2s linear 1;
}
#enter div.outrun{
    -webkit-animation: topBgOut 2s linear 1;
            animation: topBgOut 2s linear 1;
}
#enter.end{
    display: none;
}
@-webkit-keyframes topFadeIn{
     0%{    opacity: 0;}
    100%{   opacity: 1;}
}
@keyframes topFadeIn{
     0%{    opacity: 0;}
    100%{   opacity: 1;}
}
@-webkit-keyframes topBgOut{
     0%{    opacity: 1;}
    100%{   opacity: 0;}
}
@keyframes topBgOut{
     0%{    opacity: 1;}
    100%{   opacity: 0;}
}

上記のアニメーションでは、文字を1文字ずつフェードインして、全部表示したらフェードアウトする形になっています。

アニメーションが表示されている間、bodyに追加するrunanimeのクラスですが、これはアニメーションの裏で表示されている画面をスクロールさせないための処理です。

サンプルは用意が難しいので割愛します。
実際に試しながら調整してみてください。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2