Shopify themes, liquid, logos, and UX
I have coding for a preloading screen that shows up every time something is clicked on the site. Is it possible to have it where it only shows when either 1) a link in the hamburger menu is clicked, or 2) only when first coming to home page on site & when the home button / logo is clicked. This is the code I currently have running. My site link is ysamani.com.
<div id="splash">
<div id="splash_logo">
<img src="https://cdn.shopify.com/s/files/1/0645/3470/8454/files/darker.png?v=1676571597" alt="" class="fadeUp">
</div>
</div>
<style>
#splash {
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
background:#EDEDED;
text-align:center;
color:#EDEDED;
}
#splash_logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#splash_logo img {
width:300px;
}
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$(window).on('load',function(){
$("#splash").delay(700).fadeOut('slow');//ローディング画面を1.5秒(750ms)待機してからフェードアウト
$("#splash_logo").delay(500).fadeOut('slow');//ロゴを1.2秒(1200ms)待機してからフェードアウト
});
</script>
Thanks for any help and insight given.
Hi @ddai
Would you like to show loading on homepage? Don't need show other pages?
Correct!
Hi,
Maybe I suggest code below:
{% if template == 'index' %}
<div id="splash">
<div id="splash_logo">
<img src="https://cdn.shopify.com/s/files/1/0645/3470/8454/files/darker.png?v=1676571597" alt="" class="fadeUp">
</div>
</div>
<style>
#splash {
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
background:#EDEDED;
text-align:center;
color:#EDEDED;
}
#splash_logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#splash_logo img {
width:300px;
}
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$(window).on('load',function(){
$("#splash").delay(700).fadeOut('slow');//ローディング画面を1.5秒(750ms)待機してからフェードアウト
$("#splash_logo").delay(500).fadeOut('slow');//ロゴを1.2秒(1200ms)待機してからフェードアウト
});
</script>
{% endif %}
That works!! Sorry to bother, is it possible to have this preload screen when clicking any button in the hamburger menu as well as when you click the cart button?
Hi @ddai
You can use code below:
{% if template == 'index' or template contains 'collection' or template contains 'blog' or template contains 'page' or template contains 'article' or template contains 'cart' %}
<div id="splash">
<div id="splash_logo">
<img src="https://cdn.shopify.com/s/files/1/0645/3470/8454/files/darker.png?v=1676571597" alt="" class="fadeUp">
</div>
</div>
<style>
#splash {
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
background:#EDEDED;
text-align:center;
color:#EDEDED;
}
#splash_logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#splash_logo img {
width:300px;
}
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$(window).on('load',function(){
$("#splash").delay(700).fadeOut('slow');//ローディング画面を1.5秒(750ms)待機してからフェードアウト
$("#splash_logo").delay(500).fadeOut('slow');//ロゴを1.2秒(1200ms)待機してからフェードアウト
});
</script>
{% endif %}
I applied your coding and I am getting this. Also, it is the same as before, where the popup only shows when going to homepage. Am I to replace my whole code with your whole code? As that is what I did.
Hey I was wondering if you ever got this fixed and where did you place the code? Im trying to set up a preloader the one I had wasn't showing on mobile
In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024