Block Reveal Atom

Ideas for revealing content in a schematic box look as seen around the Web lately. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers some content underneath. See how Block Reveal can be designed beautifully on Demo Page.

# Block Reveal Package contents

Files Description
jlblockreveal.yaml Contains the Block Reveal Atom settings.

jlblockreveal.html.twig The Twig file to pull information, settings.
reveal.js Contains the Block Reveal JavaScript

Installing the particle on your website is a really simple process. You can refer to the document here to know more.

After you upload and implement this atom, go to your Template/Theme Settings > select the Layout to add Block Reveal effect (i.e: Home) -> Page Settings -> Enable the Block Reveal Atom

If you are new with Gantry 5 Framework, please take a look the detailed documentation about Page Settings here.

Settings

Step 1 Open Block Reveal Atom, you can add new items to the collection using the plus + icon

Item fields Description
CSS ID Define the css id for block reveal effect. For example: block-demo
Background Color Customize the background color for the effect on load
Duration Customize the duration animation.
Easing Select Easing animation functions.
Direction Select animation direction functions (Support Left to Right, Right to Left, Bottom to Top, Top to Bottom.)

Here an example

Step 2 Adding the CSS ID for your particle or section to apply the block reveal effect.

For example you want to apply the effect for particle image, you can add the css id directly via block particle settings, like so

Note You can add the Css Id via section settings, particle settings or custom html with the css id for the element

Video Tutorial

Comments

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

JoomLead Gantry 5 Particles 2.1.3 released See what's new
Sale 30% OFF Cyber Monday. Use the discount code CM2019 during checkout Buy Now