[rz] Stacked Image
Posted: Wed Dec 07, 2016 2:45 pm
[rz] Stacked Image v1.0
With this extension you can easily convert a standard image into a "3D element" on user interaction.
- Virtually unlimited images stack per image.
- Virtually unlimited images handled per page.
- Multi-objects; allows to setup multiple images that share the same effect.
- Multi-instance; allows to setup multiple images with their own settings.
- Handles sizes, axis coordinates, rotation and transparencies.
- Optionally, inherits borders styles, radius and shadow from the original images to create the stack.
- RWD support.
- Smart z-index handling to allow an easy identification of the focused element.
- Transitions handling on interaction for smoother effects.
- Automatically fixes old browsers sizing issues.
- Lightweight (no jQuery required), backward and cross-browser compatible.
- Presets included!
...and more!
HTML 4.01 Transitional
W3C compliant
DEMO
How to use?
1. Design your page including images as you usually do.
2. Drag and drop this extension.
3. Open the properties dialog box, enter the names of the images to convert.
4. Optionally, setup the initial 'stack' parameters.
5. Setup the 'stack' parameters for the hovering interaction.
6. Optionally, you can select a preset instead of #4 and #5.
7. Optionally, setup the transition, the inherited values from the main image, etc.
8. Preview or publish.
Enjoy!
Notes:
- Some effects cannot be viewed on older browsers that do not support CSS3.
- If you have a nice or complex effect and want it as a preset instead of setup it value per value, just get in contact!
With this extension you can easily convert a standard image into a "3D element" on user interaction.
- Virtually unlimited images stack per image.
- Virtually unlimited images handled per page.
- Multi-objects; allows to setup multiple images that share the same effect.
- Multi-instance; allows to setup multiple images with their own settings.
- Handles sizes, axis coordinates, rotation and transparencies.
- Optionally, inherits borders styles, radius and shadow from the original images to create the stack.
- RWD support.
- Smart z-index handling to allow an easy identification of the focused element.
- Transitions handling on interaction for smoother effects.
- Automatically fixes old browsers sizing issues.
- Lightweight (no jQuery required), backward and cross-browser compatible.
- Presets included!
...and more!
HTML 4.01 Transitional
W3C compliant
DEMO
How to use?
1. Design your page including images as you usually do.
2. Drag and drop this extension.
3. Open the properties dialog box, enter the names of the images to convert.
4. Optionally, setup the initial 'stack' parameters.
5. Setup the 'stack' parameters for the hovering interaction.
6. Optionally, you can select a preset instead of #4 and #5.
7. Optionally, setup the transition, the inherited values from the main image, etc.
8. Preview or publish.
Enjoy!
Notes:
- Some effects cannot be viewed on older browsers that do not support CSS3.
- If you have a nice or complex effect and want it as a preset instead of setup it value per value, just get in contact!