Example 1:
Get Min Height
Apply Min Height
Code:
<div class="vrow">
<div class="vl-6 vm-6 vs-6 vcol">
<div id="sizeA" class="swatch3-dark-bg">
<p class="swatch3-bg vpad-10 vmar-0" style="height:200px">Get Min Height</p>
</div>
</div>
<div class="vl-6 vm-6 vs-6 vcol">
<div class="swatch3-dark-bg vsize" data-vsize="min_height:#sizeA">
<p class="swatch3-bg vpad-10">Apply Min Height</p>
</div>
</div>
</div>Example 2:
Get (Height + 100) & (Max Height)
Apply (Height - 50) & (Max Height)
Code:
<div class="vrow">
<div class="vl-6 vm-6 vs-6 vcol">
<div id="sizeB" class="swatch3-dark-bg">
<p class="swatch3-bg vpad-10 vmar-0" style="height:300px">Get (Height + 100) & (Max Height)</p>
</div>
</div>
<div class="vl-6 vm-6 vs-6 vcol">
<div class="swatch3-dark-bg vsize" data-vsize="height:#sizeB,100;max_height:#sizeB" data-vsize-="height:50">
<p class="swatch3-bg vpad-10">Apply (Height - 50) & (Max Height)</p>
</div>
</div>
</div>
Example 1:
Cue on scroll
Cue on scroll
Cue on scroll
Cue on scroll
Code:
<div class="vcue swatch3-bg vani vopa-0" style="margin-bottom:50px;height:100px" data-vsettings="delay:0,tween:vfadeIaRa">
<p class="vpad-10">Cue on scroll</p>
</div>
<div class="vcue swatch3-bg vani vopa-0" style="margin-bottom:100px;height:50px" data-vsettings="delay:0,tween:vfadeIaLa">
<p class="vpad-10">Cue on scroll</p>
</div>
<div class="vcue swatch3-bg vani vopa-0" style="margin-bottom:50px;height:100px" data-vsettings="delay:0,tween:vfadeIaRa">
<p class="vpad-10">Cue on scroll</p>
</div>
<div class="vcue swatch3-bg vani vopa-0" style="margin-bottom:100px;height:50px" data-vsettings="delay:0,tween:vfadeIaLa">
<p class="vpad-10">Cue on scroll</p>
</div>Example 2 (Stagger):
Cue on scroll
Cue on scroll
Cue on scroll
Cue on scroll
Cue on scroll
Cue on scroll
Code:
<ul class="vcue swatch3-bg" data-vsettings="stagger:110,delay:0,tween:vfadeIaRa">
<li class="vani vopa-0">
<p class="vpad-10">Cue on scroll</p>
</li>
<li class="vani vopa-0">
<p class="vpad-10">Cue on scroll</p>
</li>
<li class="vani vopa-0">
<p class="vpad-10">Cue on scroll</p>
</li>
<li class="vani vopa-0">
<p class="vpad-10">Cue on scroll</p>
</li>
<li class="vani vopa-0">
<p class="vpad-10">Cue on scroll</p>
</li>
<li class="vani vopa-0">
<p class="vpad-10">Cue on scroll</p>
</li>
</ul>
Example 1:
Trigger on "click".
Code:
<p id="scrollA" class="swatch3-bg">Trigger on "click".</p>
<a class="button" href="#" data-vfn="e:click,f:scrollTo,a:spring,s:#scrollA">scrollTo</a>Example 2:
Trigger on "click".
Code:
<p id="triggerA" class="active swatch3-bg">Trigger on "click".</p>
<a class="button" href="#" data-vfn="e:click,f:toggleClass,a:swatch3-bg,s:#triggerA">toggleClass</a>Example 3:
Trigger on "mouseover".
Code:
<p id="triggerB" class="active swatch3-bg">Trigger on "mouseover".</p>
<a class="button" href="#" data-vfn="e:mouseover,f:toggleClass,a:swatch3-bg,s:#triggerB">toggleClass</a>Example 3 (b):
Trigger on "mouseover" | Trigger on "mouseout"
Code:
<p id="triggerB" class="active swatch3-bg">Trigger on "mouseover" | Trigger on "mouseout"</p>
<a class="button" href="#" data-vfn="e:mouseover,f:removeClass,a:swatch3-bg,s:#triggerB2;e:mouseout,f:addClass,a:swatch3-bg,s:#triggerB2">toggleClass</a>Example 4:
Trigger on "click".
Code:
<p id="triggerC" class="active swatch3-bg">Trigger on "click".</p>
<a id="triggerAdd" href="#" data-vfn="e:click,f:addClass,a:swatch3-bg,s:#triggerC">addClass</a>
<a href="#" data-vfn="e:click,f:removeClass,a:swatch3-bg,s:#triggerC;e:click,f:removeClass,a:active,s:#triggerAdd">removeClass</a>
Example:
Show for Tablets up.
Show for Phones only.
Code:
<p class="vdis-n vl-dis-b vm-dis-b">Show for Tablets up.</p>
<p class="vdis-n vs-dis-b">Show for Phones only.</p>
Example 1:
Code:
<div id="slider-6767c9b3671da" class="vslider slider-gallery" style data-vsettings="items:5,tween:vmoveIaUa,stagger:100">
<ul id="slider-6767c9b3671da-div" class="vsli-divs vpos-r vgri vl-5 vm-5 vs-1">
<li class="vsli-div image-item image-326 ">
<div class="vimg">
<a class="link-to-figure vlight" data-vlight="slider-6767c9b3671da" href="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_05.png">
<figure class="vmedia" data-vmedia="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_05.png"></figure>
</a>
</div>
</li>
<li class="vsli-div image-item image-325 ">
<div class="vimg">
<a class="link-to-figure vlight" data-vlight="slider-6767c9b3671da" href="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_04.png">
<figure class="vmedia" data-vmedia="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_04.png"></figure>
</a>
</div>
</li>
<li class="vsli-div image-item image-324 ">
<div class="vimg">
<a class="link-to-figure vlight" data-vlight="slider-6767c9b3671da" href="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_03.png">
<figure class="vmedia" data-vmedia="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_03.png"></figure>
</a>
</div>
</li>
<li class="vsli-div image-item image-323 ">
<div class="vimg">
<a class="link-to-figure vlight" data-vlight="slider-6767c9b3671da" href="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_02.png">
<figure class="vmedia" data-vmedia="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_02.png"></figure>
</a>
</div>
</li>
<li class="vsli-div image-item image-322 ">
<div class="vimg">
<a class="link-to-figure vlight" data-vlight="slider-6767c9b3671da" href="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_01.png">
<figure class="vmedia" data-vmedia="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_01.png"></figure>
</a>
</div>
</li>
<li class="vsli-div image-item image-321 ">
<div class="vimg">
<a class="link-to-figure vlight" data-vlight="slider-6767c9b3671da" href="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_06.jpg">
<figure class="vmedia" data-vmedia="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_06.jpg"></figure>
</a>
</div>
</li>
</ul>
<ul class="vsli-nav vrow cf" data-vcontrol="slider-6767c9b3671da">
<li class="vl-3 vm-3 vs-6 vcol vtex-al">
<p>
<a class="vsli-tag varr vl" href="#prev"></a>
</p>
</li>
<li class="vl-3 vm-3 vs-6 vcol vl-r6 vm-r6 vtex-ar">
<p>
<a class="vsli-tag varr vr" href="#next"></a>
</p>
</li>
<li class="vl-6 vm-6 vs-12 vcol vl-l3 vm-l3 vtex-ac">
<ul class="vsli-dots cf"></ul>
</li>
</ul>
</div>
