Example 1:
Code:
<p>
<a class="vani vbounce vh" href="#">Hover In</a>
</p>
<p>
<a class="vani vbounce vh-" href="#">Hover Out</a>
</p>
<p>
<a class="vani vbounce vani-ici vh-stop" href="#">Hover Stop</a>
</p>
<p class="vh-run">
<a class="vani vbounce vrun" href="#">Hover Run</a>
</p>
<p class="vh-run">
<a class="vani vbounce vani-ici vrun" href="#">Hover Infinite</a>
</p>Example 2:
Code:
<div class="vh-run-li vpad-50">
<p>
<a class="vani vbounce vrun vani-ici" href="#">Hover Run List Infinite</a>
</p>
<p>
<a class="vani vbounce vrun" href="#">Hover Run List</a>
</p>
</div>Example 3 (Duration):
Trigger Animation
Code:
<p id="triggerA1" class="active swatch3-bg vopa-0 vani vfadeIa vani-d2">Trigger Animation</p>
<a class="button swatch2-dark-bg swatch5-color" href="#" data-vfn="e:click,f:toggleAnimation,a:vfadeIa,s:#triggerA1">toggleAnimation</a>Example 4 (Delay):
Trigger Animation
Code:
<p id="triggerB1" class="active swatch3-bg vani vbounceOaDa vani-d3-">Trigger Animation</p>
<a class="button swatch2-dark-bg swatch5-color" href="#" data-vfn="e:click,f:toggleClass,a:vbounceOaDa,s:#triggerB1">toggleClass</a>
Example 1:
<a class="button swatch3-bg valert" href="#" data-vsettings="confirm:Confirm to continue function event.">Alert!</a>
Example 1:
${v.m}-${v.d}-${v.y}
Code:
<p class="vtime" data-vsettings="time:12/8/2023">${v.m}-${v.d}-${v.y}</p>Example 2:
${v.m}-${v.d}-${v.y} ${v.g}:${v.i} ${v.A}
Code:
<p class="vtime" data-vsettings="time:12/8/2017">${v.m}-${v.d}-${v.y} ${v.g}:${v.i} ${v.A}</p>Example 3:
${v.m}-${v.d}-${v.y} ${v.g}:${v.i}:${v.s} ${v.A}
Code:
<p class="vtime" data-vsettings="timing:1">${v.m}-${v.d}-${v.y} ${v.g}:${v.i}:${v.s} ${v.A}</p>Example 4:
Countdown ${v.m}-${v.d}-${v.y} ${v.G}:${v.i}:${v.s}
Code:
<p class="vtime" data-vsettings="time:12/31/2022 2:54 am,timing:-1">Countdown ${v.m}-${v.d}-${v.y} ${v.G}:${v.i}:${v.s}</p>Example 5:
${v.y} Years / ${v.m} Months / ${v.d} Days / ${v.G} Hours / ${v.i} Minutes / ${v.s} Seconds To Ago
Code:
<p class="vtime" data-vsettings="time:8/05/2023 7:37 am,timing:-1">${v.y} Years / ${v.m} Months / ${v.d} Days / ${v.G} Hours / ${v.i} Minutes / ${v.s} Seconds To Ago</p>Example 6:
${v.y} Years / ${v.m} Months / ${v.d} Days / ${v.G} Hours / ${v.i} Minutes / ${v.s} Seconds Ago
Code:
<p class="vtime" data-vsettings="time:8/05/2022 7:37 am,timing:1">${v.y} Years / ${v.m} Months / ${v.d} Days / ${v.G} Hours / ${v.i} Minutes / ${v.s} Seconds Ago</p>
Example 1:
Fixed to parent area reaches window ceiling.Code:
<div id="affix-parent" style="height:600px;margin-bottom:300px">
<div class="swatch3-bg vpad-10" data-vaffix="affix-parent">Fixed to parent area reaches window ceiling.</div>
</div>Example 2:
Fixed until it reaches original position.Code:
<div id="affix-until">
<div class="swatch3-bg vpad-10" style="bottom: 50px" data-vaffix="affix-until" data-vsettings="before:1,hide:.vhide-affix">Fixed until it reaches original position.</div>
</div>
Example 1:
I'm Invisible
Code:
<p class="vopa-0">I'm Invisible</p>Example 2:
I'm Invisible
Code:
<p class="vopa vopa-0 vtra-d1" style="opacity:0.5">I'm Invisible</p>
