Plugins

Zoomerang

This zoom plugin made by yyx990803 provides image zoom functionality. Add a data-trigger="zoomerang" attribute to any image you want to make zoomable.

<img data-trigger="zoomerang" src="images/image1.jpg" style="width: 250px;">

Smooth page scrolling

The smooth scrolling feature is a nice way to let your users navigate your content while keeping track of where they are on the page.

You only need a link that users will click with the class .scroll to enable the functionality:

Example: Go to slider

<a href="#intro" class="scroll">Intro</a>

And a section anywhere in the page with the same unique ID that you want to navigate to:

<div id="intro"">...</div>

Slider

This plugin made by Codrops enables a slider functionality with 14 different effects.

You can try out all the possible Effects:

• .fxSideSwing
• .fxSoftScale
• .fxPressAway
• .fxPushReveal
• .fxVGrowth
• .fxArchiveMe
• .fxLetMeIn
• .fxFortuneWheel
• .fxSwipe
• .fxSnapIn
• .fxStickIt
• .fxSlideBehind
• .fxSoftPulse
• .fxCliffDiving

<div id="spacial-slider" class="slider-component fxSideSwing">
  <ul class="itemwrap">
    <li class="current">
      <div class="pic" style="background-image: url('images/slide1.jpg');">
      </div>
      <h3>Slide content</h3>
    </li>
    <li>
      <div class="pic" style="background-image: url('images/slide2.jpg');">
      </div>
      <h3>Slide content</h3>
    </li>
    <li>
      <div class="pic" style="background-image: url('images/slide3.jpg');">
      </div>
      <h3>Slide content</h3>
    </li>
  </ul>
  <nav>
    <a class="prev" href="#">
      <span class="icon-wrap"></span>
    </a>
    <a class="next" href="#">
      <span class="icon-wrap"></span>
    </a>
  </nav>
</div>