やりたいこと
- サイトトップにアクセスしたら全画面の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;}
}
上記のアニメーションでは、文字を１文字ずつフェードインして、全部表示したらフェードアウトする形になっています。
アニメーションが表示されている間、bodyに追加するrunanimeのクラスですが、これはアニメーションの裏で表示されている画面をスクロールさせないための処理です。
サンプルは用意が難しいので割愛します。
実際に試しながら調整してみてください。