やりたいこと
- サイトトップにアクセスしたら全画面のCSSアニメーションを表示
- リロードでも表示
- サイト内からトップアクセスした時は表示しない
実装
フロントページの<body>の直下あたりに以下のタグを追加。
header.php
<?phpif(is_front_page()):?><divid="enter"><divid="enter-obj1"><p><spanclass="line1">こ</span><spanclass="line2">ん</span><spanclass="line3">に</span><spanclass="line4">ち</span><spanclass="line5">わ</span></p></div></div><?phpendif;?>JavaScriptを追加します。<head>内もしくは、</body>の直前に追加してください。
header.php
<?phpif(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{// リロードされていないvarref=document.referrer;// リファラ情報を得るvarhereHost=window.location.hostname;// 現在ページのホスト(ドメイン)名を得る// ホスト名が含まれるか探す正規表現を作る(大文字・小文字を区別しない)varsStr="^https?://"+hereHost;varrExp=newRegExp(sStr,"i");// リファラ文字列を判別if(ref.length==0){// リファラなしの場合topAnime();}elseif(ref.match(rExp)){// マッチした場合＝アクセス元が自サイト内の場合$('#enter').addClass('end');}else{// マッチしない場合＝アクセス元がサイト外の場合topAnime();}}}functiontopAnime(){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><?phpendif;?>トップページにアクセスした際のリファラなどを元に、アニメーションを実行する/しないを確定します。
delayの数字は、表示するパーツの数によって調整をしてください。
JavaScriptではclassを順番に追加していく処理しかしてません。細かいアニメーションはCSSで追加してください。
CSSは以下の通りに追加。
style.css
/* enter */#enter,#enterdiv{position:fixed;width:100vw;height:100vh;top:0;left:0;z-index:10000;}body.runanime{position:fixed;overflow:hidden;}body{position:relative;}#enterdiv#enter-obj1{opacity:1;background-color:#fff;position:relative;display:flex;justify-content:center;align-items:center;}#enterdiv#enter-obj1p{text-align:center;padding:0;margin:0;font-size:3em;}#enterdiv#enter-obj1pspan{display:inline-block;margin:05px;opacity:0;}#enterdiv#enter-obj1pspan.run,.run{-webkit-animation:topFadeIn2slinear1;animation:topFadeIn2slinear1;}#enterdiv.outrun{-webkit-animation:topBgOut2slinear1;animation:topBgOut2slinear1;}#enter.end{display:none;}@-webkit-keyframestopFadeIn{0%{opacity:0;}100%{opacity:1;}}@keyframestopFadeIn{0%{opacity:0;}100%{opacity:1;}}@-webkit-keyframestopBgOut{0%{opacity:1;}100%{opacity:0;}}@keyframestopBgOut{0%{opacity:1;}100%{opacity:0;}}上記のアニメーションでは、文字を１文字ずつフェードインして、全部表示したらフェードアウトする形になっています。
アニメーションが表示されている間、bodyに追加するrunanimeのクラスですが、これはアニメーションの裏で表示されている画面をスクロールさせないための処理です。
サンプルは用意が難しいので割愛します。
実際に試しながら調整してみてください。