1

Question:
Ive noticed some sites, (Like Microsoft Teams, or Microsoft 365 for example) that have this "Smooth HTML Transition" effect, that causes the site content to stay loaded when opening a link, and only the inner content is updated.

ETC:
What I'm asking is, does anyone know how this effect is created, and if so, does anyone know exactly how to make it myself? For example, my website has a top navigation bar that is present on every single one of my pages, except the debug panel, but that is not a page I care about, so what I want to see is my topbar and page background staying loaded, but the content in my <body> to update.

Requirements:
Not much here, I just want an effect that keeps my HTML from unloading and reloading if I open a link to a page similar to the main index.html of my site core, so that only the inner content updates.

Bonus:
I also noticed sites like the ones I mentioned above, can "somewhat run offline" and seem to cache their files into the computer, as if I go to microsoft 365 on my school laptop without wifi, I open the site and it loads, but it just shows "Sorry, No Connection"

Edit: I found out its related to AJAX, sadly Im using Github Pages, so if theres a solution for that with Jekyll or another static library/tool, id appreciate it

6
  • 1
    no need for javascript, go old school and iframe your content section with src attribute set to static html pages, then add target attributes to your <a> link tags? not sure if this has anything to do with WordPress if you are using GitHub Pages? though it would be a fun project to make a plugin that does this kind of this automatically.
    – majick
    Commented Oct 11, 2019 at 13:19
  • @majick hmm, clever, I didnt think of that :3, Honestly I rarely use iframes anymore Commented Oct 11, 2019 at 13:25
  • EDIT: Didnt see that thing you mentioned about the tool first time, good Idea, Ill try making something for fun later :D Right now im actually making a GUI that creates custom sized draggable Blurring Boxes, It was requested by a friend who creates youtube videos Commented Oct 11, 2019 at 13:32
  • 1
    I can see partial load could work fine with static content sections (whether by AJAX, iframe or some other).., but in WordPress there is too much chance of any section containing something which is dynamic (eg. altered by a script on pageload.) The only real option I can see would be to load the entire new page in an iframe and then make it take over the viewport (which seems doable with a few tricks.) Takes away any speed advantage but would make page transitions possible.
    – majick
    Commented Oct 11, 2019 at 15:58
  • was inspired by this and wrote proof of concept using iframes and history pushstate. works well! the advantage being you can forward and backward or click through pages without having them to reload again. it's groovy.
    – majick
    Commented Oct 14, 2019 at 11:54

1 Answer 1

1

What you are referring to is typically a combination of ajax and pushState. It's a nifty effect and can add value to the end-user experience.

I deployed it on a WordPress site I built a few years ago (take a look here).

I used a JavaScript library called Smoothstate that has fairly good docs (at least to get the basics up and running).

You can see an answer I posted a few years ago about Smoothstate, that explains how to set up your JQuery so that it fires when a page transition completes.

2
  • I see! so basically your not "Holding" the state of the page and changing the content, but rather just making the whole page fade, and then load the next page, and then fade inwards.... Wow what a nice concept Commented Oct 14, 2019 at 14:08
  • But smoothstate seems like an overly complicated library that could have a similar effect achieved using onload, on unload, and CSS Effects Commented Oct 14, 2019 at 14:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.