FROM CACHE - jp_header
解決済

ローディングについて

EUROU
訪問者
2 0 1

下記のところまでは実装できたのですが、

フェードインがうまく表示されません。

目標としては、SVG画像が浮かび上がってくるようにしたいのですが、どのようにしたら良いでしょうか。

 

<aside id="loader" aria-hidden="true">
<div class="loader">
<div class="loader__inner">
<div class="container"></div>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="180"
height="123"
>
<g>
<image x="0" y="0" width="180" height="123"
xlink:href="data&colon;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAB7CAYAAADdc6pTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAFwHSURBVHhe7X0FgFZF9/7Z7i5aukERCRWkBBGkDEAQ/MQOQEXRz0IxEEVA/ERCQhFBRUQsQASkQ0G6O5Zdtrvv/3nOvHf3dUVlQRZ//Pcsw625M2fOPHPmnJm587oEuHtYVkGBWPyzRFxcX(長いので以下省略)="/>
</g>
</svg>
</div>
</div>

<style>
@keyframes fadeInloader {
0% {
opacity: 0;
visibility: hidden;
}

100% {
opacity: 1;
visibility: visible;
}
}

@keyframes fadeOutloader {
0% {
opacity: 1;
visibility: visible;
}

100% {
opacity: 0;
visibility: hidden;
}
}

.loader {
position: fixed;
z-index: 2147483647;
top: 0;
left: 0;
background-color: black;
width: 100vw;
height: 100vh;
opacity: 1;
visibility: visible;
will-change: opacity, visibility;
animation: fadeOutloader 0.5s forwards;
animation-delay: 2s;
pointer-events: none;
}

.loader--fadeOut {
animation: fadeInloader 1s forwards;
}

.loader__inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.loader__image {
opacity: 98%;

width: 200px;
height: auto;
max-height: 100%;

}
</style>
<script>
(function () {
const keyName = 'visited';
if (!sessionStorage.getItem(keyName)) {
sessionStorage.setItem(keyName, true);
} else {
document.getElementById("loader").style.display = "none";
}
})();
</script>
</aside>

 

ご回答いただけますと幸いです。

よろしくお願いいたします。

 

1 件の受理された解決策

Qcoltd
Shopify Partner
1051 429 413

成功

@EUROU 様

 

質問者様の要望をしっかり把握できていない可能性が高いのですが、

.loaderの記述を下記に変更する、ではやりたいことと異なりますか?

.loader {
position: fixed;
z-index: 2147483647;
top: 0;
left: 0;
background-color: black;
width: 100vw;
height: 100vh;
opacity: 1;
visibility: hidden;
will-change: opacity, visibility;
animation: fadeInloader 0.5s forwards;
animation-delay: 2s;
pointer-events: none;
}

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1051 429 413

成功

@EUROU 様

 

質問者様の要望をしっかり把握できていない可能性が高いのですが、

.loaderの記述を下記に変更する、ではやりたいことと異なりますか?

.loader {
position: fixed;
z-index: 2147483647;
top: 0;
left: 0;
background-color: black;
width: 100vw;
height: 100vh;
opacity: 1;
visibility: hidden;
will-change: opacity, visibility;
animation: fadeInloader 0.5s forwards;
animation-delay: 2s;
pointer-events: none;
}

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
EUROU
訪問者
2 0 1

お忙しい中お返事ありがとうございました。

問題解決いたしました

誠にありがとうございました。