FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

ローディングについて

解決済

ローディングについて

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
1155 468 452

成功

@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
1155 468 452

成功

@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

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

問題解決いたしました

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