Show Animation
A plugin to make boring show/hide blocks elegant with opening/closing animation effects.
Copy-paste the stylesheet <link>
into your <head>
to load the CSS.
<link rel="stylesheet" href="../../assets/vendor/animate.css">
Copy-paste the following <script>
near the end of your pages under JS Space to enable it.
<script src="../../assets/js/components/hs.show-animation.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body>
tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of show animations
$.HSCore.components.HSShowAnimation.init('.js-animation-link');
});
</script>
Basic example
First content
This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.
<div class="btn-group btn-group-toggle">
<a class="js-animation-link btn btn-outline-secondary btn-wide active" href="javascript:;"
data-target="#firstContent"
data-link-group="groups"
data-animation-in="slideInUp">
First content</a>
<a class="js-animation-link btn btn-outline-secondary btn-wide" href="javascript:;"
data-target="#secondContent"
data-link-group="groups"
data-animation-in="slideInUp">
Second content</a>
<a class="js-animation-link btn btn-outline-secondary btn-wide" href="javascript:;"
data-target="#thirdContent"
data-link-group="groups"
data-animation-in="slideInUp">
Third content</a>
</div>
<div id="firstContent" class="py-5" data-target-group="groups">
<h2>First content</h2>
<p>This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.</p>
</div>
<div id="secondContent" class="py-5" data-target-group="groups" style="display: none; opacity: 0;">
<h2>Second content</h2>
<p>Now that we've aligned the details, it's time to get things mapped out and organized. This part is really crucial in keeping the project in line to completion.</p>
</div>
<div id="thirdContent" class="py-5" data-target-group="groups" style="display: none; opacity: 0;">
<h2>Third content</h2>
<p>The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
</div>
Attributes
data-link-group="groupName" - string
data-target="#ID" - string
data-target-group="groupName" - string
data-animation-in="fadeIn" - string
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-link-group=""
.
JavaScript function | Description | Default value |
---|---|---|
|
Determines which selectors belong to the same group. This definition is necessary, since the selectors can be in different parent blocks, without this it would be impossible to remove/add the necessary classes to selectors based only on the parent. | |
|
Defines the block ID to be displayed. | |
|
Determines which blocks belong to the same group. This definition is necessary, since blocks can be located in different parent blocks, otherwise it would be impossible to show/hide the necessary blocks based solely on the parent. | |
|
Revealing effect. Script does not work without animate.css All available animation classes can be found in the site. | no |
|
This function executes the code, inside the body of the function, every time the block appears. |