Differences

This shows you the differences between two versions of the page.

--- res:plugins:dynamicfadein [2025/05/11 22:41] – [Download] fraenkiman
+++ res:plugins:dynamicfadein [2025/05/12 12:38] (current) – [Download] fraenkiman
@@ Line 7: / Line 7: @@
 This can be particularly useful when extensive [[res:plugins:webfonts|web fonts]] or [[doc:plugins:photoswipe|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.
+Demo: [[https://frank-web.dedyn.io|]]
 ==== Fade-in behavior ====
 {{:res:plugins:frank:dynamicfadein.png?480|Screenshot of the edit area with the CKEditor toolbar (Open-Source-Version)}}
@@ Line 14: / Line 17: @@
 **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.
+  * 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.
+  * 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.
+  * 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:
+  * 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
+	  - fast (e.g. WLAN, 4G): Fade 0.3-0.5 s, delay ~100 ms for new visitors (0 ms for returning visitors)
-	- slow (2G/slow 3G): Fade 1.5-2 s, Delay 1.5-2 s / 0-1.5 s
+	  - medium (e.g. 3G): Fade 0.8-1.2 s, delay 500-800 ms / 0-500 ms
- - 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.
+	  - 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.
+  * 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 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.
+  * 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).
+  * 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.
+  * 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  ====
@@ Line 42: / Line 48: @@
 **Perceived performance**
- - Faster visible header already at DOM-Ready increases the feeling that the page loads quickly.
+  * 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.
+  * 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.
+  * 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.
+  * 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.
+  * 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.
+  * 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.
+  * The gentle dragging in of content has a modern look and invites users to read on - users stay on the page longer.
 ==== Download ====
-{{ res:plugins:frank:dynamicfadein1_1_0.zip|}}
+{{ res:plugins:frank: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