[rz] Reveal Layers *** UPD 2017-Apr-09 ***
Posted: Mon Apr 03, 2017 7:53 pm
[rz] Reveal Layers v1.1
The easiest yet advanced way to reveal layers (like before-and-after images).
Some features:
- Works with images and/or layers (and almost any other object).
- Images are proportionally scaled to full-size to completely cover the object.
- Advanced alignments for the optional embedded objects (usually layers).
- Selectable direction for revealing (left to right, right to left, top to bottom and bottom to top).
- Customizable panel.
- Customizable divider for each status with smooth transitions.
- Different opacity levels for a better experience.
- The divider supports keyboard, mouse, mousewheel and touch screens.
- Advanced focus handling.
- RWD/fluid schemes supported.
- Lightweight and maximum cross-browser with backward compatibility, no jQuery required.
...and more!
HTML 4.01 Transitional
W3C compliant
DEMO
* New in version 1.1
- Added 'mode' property to specify revealing or sliding layers.
- Auto slide/reveal modes with different times customization.
- The arrow can be enabled or disabled.
- Improved focus handling and its behavior on revealed layers.
- Smoother startup.
How to use?
1. Drag and drop the extension in the workspace.
2. Enter the images to be used to reveal (for advanced schemes, you can also enter the names of the objects to embed).
3. Optionally, setup other customization options like sizes, colors, opacity levels, alignments, etc...
4. Preview or publish.
Enjoy!
The easiest yet advanced way to reveal layers (like before-and-after images).
Some features:
- Works with images and/or layers (and almost any other object).
- Images are proportionally scaled to full-size to completely cover the object.
- Advanced alignments for the optional embedded objects (usually layers).
- Selectable direction for revealing (left to right, right to left, top to bottom and bottom to top).
- Customizable panel.
- Customizable divider for each status with smooth transitions.
- Different opacity levels for a better experience.
- The divider supports keyboard, mouse, mousewheel and touch screens.
- Advanced focus handling.
- RWD/fluid schemes supported.
- Lightweight and maximum cross-browser with backward compatibility, no jQuery required.
...and more!
HTML 4.01 Transitional
W3C compliant
DEMO
* New in version 1.1
- Added 'mode' property to specify revealing or sliding layers.
- Auto slide/reveal modes with different times customization.
- The arrow can be enabled or disabled.
- Improved focus handling and its behavior on revealed layers.
- Smoother startup.
How to use?
1. Drag and drop the extension in the workspace.
2. Enter the images to be used to reveal (for advanced schemes, you can also enter the names of the objects to embed).
3. Optionally, setup other customization options like sizes, colors, opacity levels, alignments, etc...
4. Preview or publish.
Enjoy!