Table of Contents
Dynamic fade-in
Author: Fraenkiman
Description
This plugin dynamically adjusts the fade-in delay based on the user's internet connection type and whether they have visited the blog before. It uses localStorage, sessionStorage, and cookies to determine if the visitor has previously accessed the blog, thereby optimizing the delay times.
This can be particularly useful when extensive web fonts or image galleries need to be loaded and you want to improve the user experience.
The plugin works with any theme/style that uses the Leggero theme templates.
Fade-in behavior
When the page is loaded, the fade-in runs in three phases - adaptively controlled according to device, network, visitor status and user settings:
1. quick display of the header
- The red header (the element with id=“head”) is displayed in just under 0.3 seconds during the DOMContentLoaded event using CSS variables (–fade-duration: 0.3s) and the visible-container class.
- This can be seen in the immediately visible background box “FlatPress” in the screenshot.
2. adaptive delay for the main area
- For the load event, the script uses the Network Information API (or fallback via TTFB) to measure whether the connection is “fast”, “medium” or “slow” and whether the visitor has been there before.
- This results in a delay (“delayBody”) and a fade duration:
- fast (e.g. WLAN, 4G): Fade 0.3-0.5 s, delay ~100 ms for new visitors (0 ms for returning visitors) - medium (e.g. 3G): Fade 0.8-1.2 s, delay 500-800 ms / 0-500 ms - slow (2G/slow 3G): Fade 1.5-2 s, Delay 1.5-2 s / 0-1.5 s
- After delayBody has expired, the loaded class is set to the <body>, whereby the entire content (e.g. text and images below the header) fades in smoothly.
3. lazy fade-in of the outer container
- The #outer-container (the white box with the actual post) is only faded in when it enters the viewport for the first time.
- This is done by an IntersectionObserver. As soon as outer-container is in view, the script again waits for an adaptive delay (“delayOuter”, according to the same scheme as above) and then adds the visible class.
- This allows the large content to be displayed only when the user scrolls to it properly, and not all at once.
4. exceptions and fallbacks
- Bots, “Save-Data”, prefers-reduced-motion: Immediate fade-in without animation (classes loaded, visible and visible-container are set directly).
- Polyfill: If the IntersectionObserver API is missing, the script automatically loads a polyfill and falls back to a pure time delay in case of doubt.
Benefits
The adaptive fade-in strategy has a number of advantages:
Perceived performance
- Faster visible header already at DOM-Ready increases the feeling that the page loads quickly.
Optimized for specific networks and devices
- Fade duration and delay automatically adapt to connection speed (fast/medium/slow) and device instead of triggering the same, often too long “one-size-fits-all” effect everywhere.
Reduced distraction for returners
- As soon as it is recognized that someone already knows the page, “Delay” is eliminated and content fades in even more quickly.
Lazy loading effect
- Only when the actual post container enters the viewport does it start to fade in. This keeps the first impression lean and does not overload it with all the content at once.
Accessibility & respect for user preferences
- For bots, with “Save-Data” or prefers-reduced-motion, animations are skipped completely so that no obstacles or unnecessary traffic are created.
Fallback security
- IntersectionObserver polyfill and simple time delays ensure that older browsers reliably show at least a timed fade-in effect.
Increasing engagement
- The gentle dragging in of content has a modern look and invites users to read on - users stay on the page longer.
Download
dynamicfadein1_1_0.zip | FlatPress 1.3 Andante or higher
Changelog
2025-05-11: Version 1.1.0
- Better UX through real-time network profiling and viewport detection
- Animations are skipped for bots, in save data mode and with reduced motion preference
- Future-proof thanks to polyfills and fallbacks
2025-02-11: Version 1.0.1
- iPhone with Safari is now recognized correctly