CodeDocs

  • 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

    toggleAnimation

  • 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

    toggleClass

  • 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:

    Alert!

  • <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>
©
    • Los Angeles

    • CA

    • United States

  • Website

  • Facebook

  • A wordpress framework used to structure simple Javascript and CSS prototypes. Hive is lite, only includes necessities and encourages custom styling.