Scroll to top

29/04/2023

The home on the web of Colin Walker.
Find out more on /ident, say /EHLO, or tune in to the daily RSS feed.

No comments yet
Leave a reply



You can also:

Click here to reply using email Reply by email Send a webmention Send a Webmention



2023/04/29#p2

I was messing about earlier and thought: "how would it look if pages on the site faded from one to another when clicking a link?"

It's not a true transition but I've added a function to window.onbeforeunload to change the opacity of the page body from 1 to 0 in 0.3 seconds. This way the old page fades out before the new ones opens.

There are a couple of places where it doesn't feel quite right (especially around marking items as read in /reader) but it's a fun experiment.

If I was feeling adventurous I could do something clever with HTMX to load pages to a container div and actually have them fade in and out properly but that would mean changing almost every page. I can't be bothered.

Maybe I'll do a proof of concept at some point.

Maybe I'll just get fed up of the whole idea and remove it.

Related post - 26/05/2023
Dave Rupert details the view-transition CSS pseudo-element as it applies to page transitions. It's, sadly, currently only available after enabling spe…
Leave a reply



You can also:

Click here to reply using email Reply by email Send a webmention Send a Webmention



No comments yet
Leave a reply



You can also:

Click here to reply using email Reply by email Send a webmention Send a Webmention



Close