javascript - How do developers add "Smooth Transitions" to their sites?

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

Share Improve this question edited Oct 11, 2019 at 13:10 asked Oct 11, 2019 at 11:15 Mister SirCode 1135 bronze badges

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 – Mister SirCode 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 – Mister SirCode 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

| Show 1 more comment

1 Answer 1

Sorted by: Reset to default 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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How do developers add "Smooth Transitions" to their sites?

1 Answer 1

与本文相关的文章

评论列表(0)