Page Mask Transition Ease

DreamStreetPortraits

Hey all!

I would like to know if there is a way to have a page transition into displaying a mask. As in, have the page first load without any mask showing, and then over 2-3 seconds transition into displaying the page mask chosen.

Basically, the reverse of this.

.sm-page-hasbackground .sm-page-background .sm-page-background-mask.sm-page-background-mask-color-dark {
opacity: 0;
transition: 2s ease 1s;
}

This reduces the dark mask's opacity to 0 after it has taken effect. I want to start with no mask and transition to a mask. Does anyone know how to do this?

Thanks in advance

Emrys,
Noob Coder

https://www.dreamstreetportraits.com/

Hikin' Mike

Sorry, I have no idea what you're trying to do. Looks like you are already using this: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Create-Popup-Logo-Page

DreamStreetPortraits

Hi Mike, yes it is that code that gave me the idea! I'm using the code above to make the loading of the pages go more smoothly. What I'm talking about is page mask opacity. As I use background images, I have applied either light or dark page masks in the page's background options to make their black or white text readable. The idea is to see the clear background image without a mask as you first load it. Then have its mask slowly applied to make the text readable.

Because I have added the above code to load the pages smoother, the text takes between about 5 seconds to display at full opacity. The background image loads first, followed by everything else. I thought this would be a good opportunity to show the background image clearly at the beginning, and then have the mask apply as the text becomes visible.

I'm sure there is a way to do this, right? Although, it's not important. It would be a nice touch, I think.

.dark-page-mask{
start-opacity: 0;
end-opacity: 1;
transition: 5s;
}

Similar to the delay cookie consent, but with .sm-page-background-mask.sm-page-background-mask-color-dark.

Hikin' Mike

.

Hikin' Mike

Just thinking more about it. If all you want to do is to delay the content (everything but the background/slideshow), you need the same type of CSS that I gave you for the consent popup.

/* Delay Content Start */
.sm-user-ui .sm-page-content {
    opacity: 0;
    animation: 1s linear 3s forwards delayContent ;
}

@keyframes delayContent {
    from {opacity: 0;}
    to {opacity: 1;}
}
/* Delay Content End */

DreamStreetPortraits

Ah okay nice! I'll give it a try.

DreamStreetPortraits

Yep. That is hugely more simple than the way I was doing it.

I managed to get the final touch with the mask too. Without giving the mask a rgba color with transparency it would make the mask 100% visible and block out the background image. Even if I changed it to [ from {opacity: 0;} to {opacity: .5;} ]

/* Delays Mask (START) */
.sm-page-hasbackground .sm-page-background .sm-page-background-mask.sm-page-background-mask-color-dark {
background-color: rgba(0,0,0, 0.5)
}
.sm-page-hasbackground .sm-page-background .sm-page-background-mask.sm-page-background-mask-color-dark {
opacity: 0;
animation: 2.5s linear 2s forwards delayContent ;
}

@keyframes delayContent {
from {opacity: 0;}
to {opacity: 1;}
}
/* Delays Mask (END) */

/* Delay Content (START) */
.sm-user-ui .sm-page-content {
opacity: 0;
animation: 2.5s linear 2s forwards delayContent ;
}

@keyframes delayContent {
from {opacity: 0;}
to {opacity: 1;}
}
/* Delay Content (END) */

Works a charm! Thanks

p.s. How does one add code into discussions properly? Upload a txt file?

Hikin' Mike

Glad it worked out. Just to let you know, I updated the "Create Pop-up Logo" tutorial yesterday. Lots of unnecessary code I removed.

@DreamStreetPortraits said:
p.s. How does one add code into discussions properly? Upload a txt file?

You can use the code feature here under the Paragraph icon:

...or what I do is just use the "backtick" which is under the ~ in your keyboard. Wrap the code with one tick for single line code and wrap three for multiple lines.