Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

"Reveal" Page Transitions


MariaFY
Go to solution Solved by IXStudio,

Question

Site URL: https://www.laterwolf.com

Hi! I can't seem to find out how the designer of this page managed to create the transition/reveal effect in between pages. You'll see what I mean when you click on a page in the navigation (Info). 

Is this something I can do with CSS? I'm using Brine 7.0 so there's no site-wide animations built-in. 

Thanks for any help with this! 

Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hi Use this code in Design -> Custom CSS .Loader { position: fixed; top: 0; left: -100%; width: 100%; height: 1440px; z-index: 9999; background-color: transpare

If you inspect element above site, you will see this tag If you remove this tag, the effect will disappear ;)

Thanks @IXStudio, that did the job. Appreciate your time! 

4 answers to this question

Recommended Posts

  • 0

Hi

Use this code in Design -> Custom CSS

.Loader {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 1440px;
    z-index: 9999;
    background-color: transparent;
    -webkit-transition: background-color .3s ease-out,transform 0s .3s linear;
    -moz-transition: background-color .3s ease-out,transform 0s .3s linear;
    -ms-transition: background-color .3s ease-out,transform 0s .3s linear;
    -o-transition: background-color .3s ease-out,transform 0s .3s linear;
    transition: background-color .3s ease-out,transform 0s .3s linear;
    display: none
}[data-mercury-loading] .Loader {
    background-color: rgba(255,255,255,.22);
    -webkit-transition: transform .3s cubic-bezier(0,0,0,.618);
    -moz-transition: transform .3s cubic-bezier(0,0,0,.618);
    -ms-transition: transform .3s cubic-bezier(0,0,0,.618);
    -o-transition: transform .3s cubic-bezier(0,0,0,.618);
    transition: transform .3s cubic-bezier(0,0,0,.618);
    -webkit-transform: translatex(60%);
    -moz-transform: translatex(60%);
    -ms-transform: translatex(60%);
    -o-transform: translatex(60%);
    transform: translatex(60%)
}[data-mercury-loading='done'] .Loader {
    -webkit-transform: translatex(100%);
    -moz-transform: translatex(100%);
    -ms-transform: translatex(100%);
    -o-transform: translatex(100%);
    transform: translatex(100%)
}

.tweak-site-ajax-loading-enable.tweak-site-ajax-loading-bar-show .Loader {
    display: block
}

Please use the like button if it helps you!

 

Best,

Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to post
  • 0

Thank you! That's so helpful! How do I add this effect to my website, simply by adding this (<div class="Loader"></div>) to my CSS? Thanks for the beta!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...