I've seen this transition used in Keynote, and I wanted to see how I could accomplish the same effect with jQuery and CSS3. I use jQuery for the animation, and CSS3 for the scale transform of the entire content area. The effect is one where the content area ducks into the background and a new content area slides in (from one of four directions, depending on the button you press). I tested this out on Chrome, where it is really quite smooth. Firefox and Safari on the Mac are a bit jittery with the animation, so that's something to look at before using this in a project. Certainly could use some re-factoring, but I'm pleased with how it turned out.
Practically, this could be used to enhance a site where the entire page content is being refreshed using Ajax, but illustrating a nice transition within the page after the Ajax request is finished.
Related Posts
There are 23 other posts like this one. Here are some other recent ones:
How to Inspect Hovered Elements (Menus, Tooltips, and Dialogs, Oh My)July 1, 2024 – I found this technique useful for debugging CSS inside ephemeral DOM elements.- How to Automatically Create Google Calendar Events from a Google SheetFebruary 12, 2023 – If you need to automatically create Google Calendar events from data in a Google Sheet, this pared-down example should work well for you.
- Shakespeare Insult GeneratorOctober 10, 2021 – I created this Shakespeare Insult Generator: it converts three arrays of adjectives and nouns into a delightful random insult that would have thrilled the Bard himself.
