Prestigeテーマのサイトで、ロゴ画像がフェードインしてからフェードアウトし、その後にwebコンテンツが表示される実装を希望。

日本語 ディスカッション 技術的なQ＆A
, ,
1

Prestigeテーマでサイトを開いたら最初にロゴ画像がフェードインして表示され、数秒後にその画像がフェードアウトしたのち、webのコンテンツが出てくるように実装したいと思っています。

この参考リンクのサイトのようなイメージで最初にロゴを前面に表示させて、その後フェードアウトするようにしたいのですが、どなたかご教示いただけませんでしょうか？

以下の手順でコード修正をしたのですが、うまく表示されませんでした、、

①「Edit code」を選択し、「theme.liquid」を選択します。
「」タグの直後に以下のHTMLを挿入します。

<!-- ロゴが浮かび上がり、消えるようにする処理 -->
<div class="logo-fadein">
<img src="{{ 'logo.png' | asset_url }}" alt="ロゴ">
</div>

②「assets」フォルダ内に「logo.png」という名前でロゴ画像をアップロードします。

③「assets/theme.scss.liquid」を選択します。
「.logo-fadein」セレクターに以下のCSSを追加します。

.logo-fadein {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
display: none;

img {
width: 300px;
height: auto;
animation: fadein 1s ease-in-out;
}

@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}

「theme.liquid」を再度選択します。
「<body>」タグの直後に以下のJavaScriptを挿入します。

<script>
// ロゴが浮かび上がり、消えるようにする処理
window.onload = function() {
// 1秒後にロゴを表示する
setTimeout(function() {
document.querySelector('.logo-fadein').style.display = 'block';
}, 1000);

// 2秒後にロゴを非表示にする
setTimeout(function() {
document.querySelector('.logo-fadein').style.display = 'none';
}, 3000);
}
</script>

以上、よろしくお願い申し上げます。