[rz] Stacked Layout *** UPD 2019-Dec-30 ***
Posted: Sun Mar 26, 2017 2:06 pm
[rz] Stacked Layout v1.3
This lightweight extension converts RWD/fluid schemes (based on relative layers and layout grids) into a 'selective stacked' elements on scroll to give a new visual and modern appeal to your projects.
Sample project included.
- Multiple full width and full size layers supported.
- Multiple layout grids supported.
- Smart z-index automatically handled for 'back', 'front' and 'default' positioning.
- Advanced mixed modes supported; 'offset' (allows multi-stacked heading), 'flow' (normal scrolling) and 'stack' (elements are stacked below the stacked headers).
- Advanced focus handling to avoid overlapping areas and to comply with the navigability standards.
- Lightweight (no jQuery required), backward and cross-browser compatible.
...and more!
HTML 4.01 Transitional
W3C compliant
DEMO
* New in version 1.3
- Improved support for mobiles that prevents scheme distortions due to the address bar auto-hide.
- Improved support for auto-scroll (pc/mobile).
- Optional overflow control for each section.
- Optionally scrollbar hides itself when the dots map is visible.
* New in version 1.2
- Auto-link feature detects automatically links/bookmarks to the sections and scrolls smoothly to them.
- Improved transitions handling (some browsers may not support them or just support partially).
* New in version 1.1
- The 'offset' mode for an element can be cleared progressively in subsequent scrollings.
- The 'order' of the elements can be achieved combining both preset and/or custom values.
- Improved 'stacking method' to allow a better navigability.
- Advanced progressive margins handling.
- Min-width for better/aesthethic results (works in conjunction with the progressive margins).
- Optional auto-scroll feature to find the best position and scroll to after a browser resize.
- Optional auto-fade-in while the layer enters to the viewport.
- Optional "page map" with highly customizable dots to scroll quickly to a specific layer ([rz] Elegant Scroll is recommended for additional scrolling effects).
- Added support to work with almost any navigation menu that handles links#anchors (bookmarks).
- Added support to work with [rz] Go To Bookmark.
- Improved fallback in case of older browsers (see notes).
How to use?
1. Design your page including relative layers and layout grids as you usually do.
2. Drag and drop this extension.
3. Open the properties dialog box, enter the names of the layers and layout grids to handle.
4. Optionally, setup the order and mode for each element you want to handle.
5. Preview or publish.
Enjoy!
Notes:
- LayoutGrid elements may not run properly on older browsers and this is not related to the extension itself.
- IE5 fallback to default mode even with relative layers as well.
This lightweight extension converts RWD/fluid schemes (based on relative layers and layout grids) into a 'selective stacked' elements on scroll to give a new visual and modern appeal to your projects.
Sample project included.
- Multiple full width and full size layers supported.
- Multiple layout grids supported.
- Smart z-index automatically handled for 'back', 'front' and 'default' positioning.
- Advanced mixed modes supported; 'offset' (allows multi-stacked heading), 'flow' (normal scrolling) and 'stack' (elements are stacked below the stacked headers).
- Advanced focus handling to avoid overlapping areas and to comply with the navigability standards.
- Lightweight (no jQuery required), backward and cross-browser compatible.
...and more!
HTML 4.01 Transitional
W3C compliant
DEMO
* New in version 1.3
- Improved support for mobiles that prevents scheme distortions due to the address bar auto-hide.
- Improved support for auto-scroll (pc/mobile).
- Optional overflow control for each section.
- Optionally scrollbar hides itself when the dots map is visible.
* New in version 1.2
- Auto-link feature detects automatically links/bookmarks to the sections and scrolls smoothly to them.
- Improved transitions handling (some browsers may not support them or just support partially).
* New in version 1.1
- The 'offset' mode for an element can be cleared progressively in subsequent scrollings.
- The 'order' of the elements can be achieved combining both preset and/or custom values.
- Improved 'stacking method' to allow a better navigability.
- Advanced progressive margins handling.
- Min-width for better/aesthethic results (works in conjunction with the progressive margins).
- Optional auto-scroll feature to find the best position and scroll to after a browser resize.
- Optional auto-fade-in while the layer enters to the viewport.
- Optional "page map" with highly customizable dots to scroll quickly to a specific layer ([rz] Elegant Scroll is recommended for additional scrolling effects).
- Added support to work with almost any navigation menu that handles links#anchors (bookmarks).
- Added support to work with [rz] Go To Bookmark.
- Improved fallback in case of older browsers (see notes).
How to use?
1. Design your page including relative layers and layout grids as you usually do.
2. Drag and drop this extension.
3. Open the properties dialog box, enter the names of the layers and layout grids to handle.
4. Optionally, setup the order and mode for each element you want to handle.
5. Preview or publish.
Enjoy!
Notes:
- LayoutGrid elements may not run properly on older browsers and this is not related to the extension itself.
- IE5 fallback to default mode even with relative layers as well.