magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Reveal Layers


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.


HTML 4.01 Transitional
W3C compliant


DEMO


* Just a brief about some of the changes that were made lately...

* 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!
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with