Can I limit my preloading screen to appear only during specific actions?

ddai
Excursionist
22 0 2

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. 

Replies 7 (7)

EBOOST
Shopify Partner
1228 319 368

Hi @ddai 

 

Would you like to show loading on homepage? Don't need show other pages?

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
ddai
Excursionist
22 0 2

Correct!

EBOOST
Shopify Partner
1228 319 368

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  %}
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
ddai
Excursionist
22 0 2

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?

EBOOST
Shopify Partner
1228 319 368

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  %}
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
ddai
Excursionist
22 0 2

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.

 

ddai_0-1677283978768.png

 

takeoverapparel
New Member
8 0 0

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