How do I add fade out to welcome overlay?

New Member
2 0 0

Hello,

 

I have a welcome overlay on my website, and the user must click continue to go to the front page.

 

Once the user click continue, i would like the overlay to fade out rather than suddenly exiting, how would i do that?

 

here is the code.

 

<div id="welcome_overlay" class="welcome-overlay" style="display: none;">
  <div class="welcome-inner">
    <div class="welcome_img">
    <img src="{{ 'welcome_img.png' | asset_img_url: '300x' }}">
  </div>
  <div class="welcome_btn" onclick="gotoFrontPage()">
    CONTINUE
  </div>
  </div>
  
  
</div>

thanks in advance :D

0 Likes
Excursionist
58 9 12

Hi AnnaLai,

 

You'd need to use a class instead of a inline style to achieve that.

 

When visible, your overlay needs this CSS code:

 

.welcome-overlay {  
visibility
: visible;
opacity
: 1;
transition
: opacity 2s linear; }

 

Now when your user closes the overlay, add this class instead of style="display: none;"

 

.hidden {  
visibility
: hidden;
opacity
: 0;
transition
: visibility 0s 2s, opacity 2s linear; }

 

So when hidden, your overlay html will look like this:

 

<div id="welcome_overlay" class="welcome-overlay hidden">
...
</div>

 

Let me know how that goes.

Yes, we build Shopify Apps. Hit me with your idea: https://vellir.tech
Let customers preview your products and easily add them to cart with Peek Mode
1 Like
New Member
2 0 0

Hello,

 

thanks for getting back to me!

 

I tried, but im not sure if i did it right as it didn't work.

 

also i just realised i didn't provide enough information, so i think here is the css and html.

 

this is welcome_overlay.liquid

<div id="welcome_overlay" class="welcome-overlay" style="display: none;">
  
  
  
  
  <div class="welcome-inner">
    <div class="welcome_img">
    <img src="{{ 'welcome_img.png' | asset_img_url: '300x' }}">
  </div>
  <div class="welcome_btn" onclick="gotoFrontPage()">
    CONTINUE
  </div>
  </div>
  
  
</div>

this is theme.scss.liquid

.welcome-overlay{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  z-index: 2147483650;
  display: flex;
  background-color: black;
  align-items: center;
  justify-content: center;
  overflow: hidden;
 
  
  .welcome-inner{
    
    text-align: center;
    
    .welcome_btn{
      background: white !important;
      color: black !important;
      margin-top: 40px !important;
      margin: auto;
      font-family: 'Calibre Semibold', Arial, Helvetica, sans-serif;
      font-weight: 600;
      letter-spacing: 0px;
      text-transform: uppercase;
      font-size: 16px;
      padding: 10px 30px;
      border-radius: 0px;
      padding: 15px 30px;
      display: inline-block;
      cursor:pointer;
    }
  }
}
0 Likes
Excursionist
58 9 12

Could you explain how did you do it? You might need to change the behaviour of the gotoFrontPage(), which I'm not sure where it is located) function to achieve what you want.

Yes, we build Shopify Apps. Hit me with your idea: https://vellir.tech
Let customers preview your products and easily add them to cart with Peek Mode
0 Likes