Almost TOO fast 😂

General
1

So, I had the idea to have the background color change with each different page on my website, because it’s almost too fast to visually discern that you’re on a different page sometimes :joy:

Can you think of any way to fade out the previous page background color into the new one, so that there’s a nice smooth transition from one page to the next?

Like the background colors transition into each other somehow?

2 Likes
2

This is the first time I hear that website can be too fast :joy:

We have plans to create page transition animations, it might be through a plugin or built-in, we will see, but it will happen in near future.

But for now, if you animate certain element with Simple Animation plugin, it is easy to notice that pages are changing?

Like on this template for example: https://techzen.divhunt.art/

4 Likes
3

@rneary

We will build in future plugin for page transitions. It’s possible with Divhunt to catch page load/ready/unload so we can build some awesome animations :slight_smile:

4

It will be great if you can add barba.js for page transitions.

5

this is a great idea, looking forward to seeing this option in the future.

6

In the meantime, this might be an alternative :

You need to copy the following style to the site settings, in the body start section of custom codes.

<style>
body { 
 opacity: 0;
 transition: all 1000ms 0ms linear;
 background: rgba(24, 27, 52, 1); /* replace with your own background color */
}
body:has(.dh-body) {
 opacity: 1;
}
</style>

Hope this helps.

2 Likes
7

Thanks @mxcrml! I wrote that code :smiley: :sweat_smile:

I think there might be a way to pass the current background color base as a variable or data-attr, and maybe be able to pull something off that way…

1 Like
8

Ahah ! Did not noticed :grin: It’s me that is thanking you then ! :slight_smile:

Indeed if you have different background color, this would not do it. Can’t we apply a specific class to a each page’s body?

Then you would just need to decline your code in different versions… would that works?

Thanks again for your piece of code, I was tired of the FOUT ahah :slight_smile:

1 Like