[rz] Smooth Page II *** UPD 2017-Jul-27 ***
Posted: Tue Jan 27, 2015 12:11 pm
[rz] Smooth Page II v2.2
A new completely redesigned approach that replaces its classic predecessor!
This simple and lightweight yet versatile plug-in allows you to configure a smooth fade-in effect to your page that is shown once it is fully loaded (very useful for modern one-page sites).
(This extension comes in two versions: "lite" and "standard")
Some features of the "lite" version:
- Fade and/or slide effects.
- Advanced time control for readiness and effects.
- Global and element/s related opacity levels for the "blank page".
- Automatic or specific color and background settings for the "blank page".
- Optional image to be shown while the page is being loaded (an animated .GIF is usually recommended).
- Optional size values for the optional image (useful for better definition on iOS based devices).
- Workaround for improved backward compatibility using fade/opacity.
- Multi-instance for advanced visual effects.
- Lightweight, without extra dependencies (no jQuery) and with maximum cross-browser and backward compatibility.
Some extra features of the "standard" version:
- Optional embedable object (almost anything you want that fits your design requirements, usually like a "Please wait..." message).
- Optional and highly customizable "loading progress" bar.
- Optional customizable "loading progress" in numeric/percentage format.
- Optionally, the elements of the "blank page" can be timed and synchronized to fade-out before the final fade/slide effects.
- Also unbeatable lightweight, cross-browser and backward support.
...and much more!
HTML 4.01 Transitional
W3C compliant
DEMO
* New in version 2.2
- Improved core for smoother behavior even on multi-page sites (better visual results when user navigates between pages).
- The core has been moved to an external file for a faster navigation between pages.
- Minor code tweaks.
* New in version 2.1
- Added more progress bar directions and customization options.
- Fixed a sporadic gap in the progress bar height on older browsers.
- Fixed a time bug with some inline-frames.
- Customizable elements order ('advanced' category).
- Improved startup.
How to use?
1.a. Design your site as you usually do.
1.b. Optionally, design the "Please wait..." object to embed (it is usually a layer; requires the standard version).
2. Drag and drop this extension (lite or standard version, according to your design needs).
3. Optionally, you can have an image (and/or an embedded object, a loading progress bar and percentage in the standard version).
4. Optionally, you can fine-tune the fade and time effects.
5. Preview or publish.
Enjoy!
A new completely redesigned approach that replaces its classic predecessor!
This simple and lightweight yet versatile plug-in allows you to configure a smooth fade-in effect to your page that is shown once it is fully loaded (very useful for modern one-page sites).
(This extension comes in two versions: "lite" and "standard")
Some features of the "lite" version:
- Fade and/or slide effects.
- Advanced time control for readiness and effects.
- Global and element/s related opacity levels for the "blank page".
- Automatic or specific color and background settings for the "blank page".
- Optional image to be shown while the page is being loaded (an animated .GIF is usually recommended).
- Optional size values for the optional image (useful for better definition on iOS based devices).
- Workaround for improved backward compatibility using fade/opacity.
- Multi-instance for advanced visual effects.
- Lightweight, without extra dependencies (no jQuery) and with maximum cross-browser and backward compatibility.
Some extra features of the "standard" version:
- Optional embedable object (almost anything you want that fits your design requirements, usually like a "Please wait..." message).
- Optional and highly customizable "loading progress" bar.
- Optional customizable "loading progress" in numeric/percentage format.
- Optionally, the elements of the "blank page" can be timed and synchronized to fade-out before the final fade/slide effects.
- Also unbeatable lightweight, cross-browser and backward support.
...and much more!
HTML 4.01 Transitional
W3C compliant
DEMO
* New in version 2.2
- Improved core for smoother behavior even on multi-page sites (better visual results when user navigates between pages).
- The core has been moved to an external file for a faster navigation between pages.
- Minor code tweaks.
* New in version 2.1
- Added more progress bar directions and customization options.
- Fixed a sporadic gap in the progress bar height on older browsers.
- Fixed a time bug with some inline-frames.
- Customizable elements order ('advanced' category).
- Improved startup.
How to use?
1.a. Design your site as you usually do.
1.b. Optionally, design the "Please wait..." object to embed (it is usually a layer; requires the standard version).
2. Drag and drop this extension (lite or standard version, according to your design needs).
3. Optionally, you can have an image (and/or an embedded object, a loading progress bar and percentage in the standard version).
4. Optionally, you can fine-tune the fade and time effects.
5. Preview or publish.
Enjoy!
