外部のページからトップページにアクセスした時のみローディングアニメーションを表示したい

Question

現在webサイトでトップページにローディングアニメーションを実行していますが、現状は一度トップページに入り、下層ページに入り、またページ内のリンクでトップページに戻った際もローディングアニメーションが表示されてしまいます。これをタイトルのように、外部のページからのアクセスの時にのみ、ローディングアニメーションを表示するようにしたい（外部からのアクセスであれば何度でも表示したい）のですが、どのように改変すればよいでしょうか？お力添え頂けると嬉しいです。

試したこと

こちらの質問を参考に下記のように表記してみたのですが、変わらずページ内リンクからでもトップにローディングアニメーションが表示されてしまいます。

const host = window.location.hostname;


if (host !== "www.example.com") { //実際は自分のサイトのURLです

	$(function() {
		setTimeout(function(){
	     $('.trans3').addClass('move');
			$('.start p').fadeIn(1600);
		},500
	); //0.5秒後にロゴをフェードイン
		setTimeout(function(){
			$('.start').addClass('st-fade');
		},2500); //2.5秒後にロゴ含め背景をフェードアウト
	});

}

...
</header>

<div class="start">
    <p><img src="/images/fuminsp.svg"></p>
    <div class="trans3"></div>
</div>

<main>
...

.start {
  background: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9000;
  transform: scale(none);
  visibility: visible;
  opacity: 1; 
}

.start p {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 9999;
  width: 280px; 
}

.start p > img {
  width: 100%; 
}

.st-fade {
  transform: scale(1.05, 1.05);
  transition: visibility 0.8s cubic-bezier(0.22, 0.11, 0.22, 1) 0s, opacity 0.7s cubic-bezier(0.22, 0.11, 0.22, 1) 0s, transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  opacity: 0;
  visibility: hidden; 
}

/*線を引く*/

/* 開始時の状態 */
.trans3 {
  width: 0%;
  height: 1px;
  position: fixed;
  top: 56vh;
  background: #772F6D;
  -webkit-transition: width 1.3s cubic-bezier(0.9, 0.1, 0.3, 0.9) 0s;
  transition: width 1.3s cubic-bezier(0.9, 0.1, 0.3, 0.9) 0s; 
}

/* 終了時の状態 */ 
.trans3.move {
  width: 100%;
}

環境
【ブラウザ】
Google Chrome
バージョン: 95.0.4638.54
safari バージョン12.1.2 (14607.3.9)でも同じ結果でした。

【jQuery】
バージョン: 3.6.0

Answer 1

こちらのサイトを参考にしまして、以下の記述で思い通り外部のページからトップページにアクセスした時のみローディングアニメーションを表示することができました。

var ref = document.referrer;             // リファラ情報を得る
var hereHost = window.location.hostname; // 現在ページのホスト(ドメイン)名を得る

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

if( ref.match( rExp ) ) {
//アクセス元が自サイト内の場合の処理
}
else {
//アクセス元がサイト外の場合の処理	
$(function() {
        setTimeout(function(){
         $('.trans3').addClass('move');
            $('.start p').fadeIn(1600);
        },500
    ); //0.5秒後にロゴをフェードイン
        setTimeout(function(){
            $('.start').addClass('st-fade');
        },2500); //2.5秒後にロゴ含め背景をフェードアウト
    });
}

Answer 2

最近ちょっと挙動が怪しいですがリファラを使って判断してみては？

• Document.referrer - Web API | MDN

Comments

[Fushi_me]

いつもありがとうございます。Document.referrer で検索して出てきたサイトを参考に解決することができましたので回答に載せておきます。助かりました！