Plugins

An overview of the plugins supplied with Wingman

Animate on Scroll

Website / Docs, GitHub, npm

Animates elements into view as the user scrolls down the page

This feature is implemented by including the aos javascript library (V2). For a full list of options, see the project on GitHub.

Our script simply initializes the plugin globally, allowing all animation options to be specified by data-attributes on the HTML elements.

Defaults

Our scripts set once to true globally, so elements will not animate out when leaving the viewport.

Basic Usage

Simply add data attribute data-aos to specify the desired animation. Use data attributes with prefix data-aos-* to configure other options on the element.

<div data-aos="fade-up" data-aos-delay="500">
  Animated in after 500 milliseconds!
</div>

Animations are run only once by default (on entering the viewport).

For a full list of options and built-in animations, please visit the official AOS documentation at GitHub.

Flatpickr

Website / Docs, GitHub, npm

Turns a text input into a calendar for date/time picking.

Flatpickr is a flexible, stylish calendar widget for providing users with an easy way to select a date, time or a date range.

Basic Usage

Date pickers are initialized by data-attributes on page load. Options are provided to the Flatpickr library via data-attributes.

A full list of options with defaults can be found at the Flatpickr Docs.

To use Flatpickr in its most basic form, add data-flatpickr to an input element. The input's value will be empty, and the picker will appear when the input element is clicked. Adding a placeholder is advised to indicate to the user to click the input.

Demo
<input class="form-control" type="text" placeholder="Select a Date" data-flatpickr>

Continue reading for more advanced options such as formatting the date string and setting date ranges.

Options

Options are provided to Flatpickr via data attributes on the input element.

Data attributes follow a different format to the native options found in the Flatpickr documentation - all data attributes begin with data- and the option is all lower-case, with a hyphen between words.

For example:

  • allowInput becomes data-allow-input
  • defaultDate becomes data-default-date

A full list of options with defaults can be found at the Flatpickr Docs.

Readable format

Adding further options via data-attributes opens up Flatpickr's flexibility.

The data-alt-input option will hide the original input and create a new input with easy-to-read date format. The original input's value will be updated by Flatpickr and will be sent to server.

To change the format of the alternative input, use the data-alt-format attribute. Find a list of valid formatting tokens at the Flatpickr Docs.

Demo
<input class="form-control" type="text"
  data-flatpickr
  data-alt-input="true"
  data-date-format="Y-m-d">

Enable Time Picker

Flatpickr has a time picker also.

Adding to the above example, the data-enable-time option shows a time picker in the calendar widget when a date has been selected.

Demo
<input class="form-control" type="text"
  data-flatpickr
  data-alt-input="true"
  data-enable-time="true"
  data-date-format="Y-m-d H:i">

Preload Date Value

To initialize the input with a value, add the data-default-date attribute. Provide a date in the format yyyy-mm-dd.

The preloaded date may also contain a time value such as yyyy-mm-dd h:m.

Demo
<input class="form-control" type="text"
  data-flatpickr
  data-alt-input="true"
  data-enable-time="true"
  data-default-date="2022-04-23 13:30"
  data-date-format="Y-m-d H:i">

Date Range

To initialize the input with a value, add the data-default-date attribute. Provide a date in the format yyyy-mm-dd.

The preloaded date may also contain a time value such as yyyy-mm-dd h:m.

Demo
<input type="text" 
  data-flatpickr
  data-alt-input="true"
  data-mode="range"
  data-date-format="Y-m-d"
  data-alt-format="F j"
  data-default-date="2022-04-08">

Time Picker only

Flatpickr can also function as a time picker without showing a calendar.

Add data-no-calendar="true" and change the data-default-date to represent a time only. data-date-format may also be changed to a time-only format.

Demo
<input type="text" 
  data-flatpickr
  data-alt-input="true"
  data-enable-time="true"
  data-no-calendar="true"
  data-date-format="H:i"
  data-default-date="13:45">

Flickity

Website / Docs, GitHub, npm

Flickity creates responsive, touch-ready carousels from minimal markup.

Carousels in Wingman are initialised using Flickity via data attributes explained at the Flickity website.

jQuery Smart Wizard 4

Website / Docs, GitHub, npm

Smart Wizard is a flexible and heavily customizable jQuery step wizard plugin with Bootstrap support.

Wingman automatically initializes wizards which have the .wizard class.

See more on the Wingman Components page.

Jarallax

Website / Docs, GitHub, npm

Add a parallax effect to background images. Parallax is handled by the Jarallax library. Animations are configured via data attributes. Jarallax is also responsible for providing video background functionality, which may also be configured with a parallax effect.

Background images can be given a parallax effect by adding class jarallax to the containing element. Attributes data-jarallax and data-speed must also be added to the containing element.

Class jarallax-img must be applied to the <img> element.

data-speed may be a decimal between -1.0 and 2.0. This number controls the speed of the image movement in relation to the container.

<section class="jarallax" data-jarallax data-speed="0.2">
  <img src="assets/img/portfolio-single-1.jpg" alt="Image" class="jarallax-img">
</section>

Options

The following data attributes can be added to the data-jarallax element to alter the behaviour.

Name Type Default Description
data-type string scroll scroll, scale, opacity, scroll-opacity, scale-opacity.
data-speed float 0.5 Parallax effect speed. Provide numbers from -1.0 to 2.0.
data-img-src path null Image url. By default uses image from background.
data-img-element selector .jarallax-img Image tag that will be used as background.
data-img-size string cover Image size. If you use <img> tag for background, you should add object-fit values, else use background-size values.
data-img-position string 50% 50% Image position. If you use <img> tag for background, you should add object-position values, else use background-position values.
data-img-repeat string no-repeat Image repeat. Supported only background-position values.
data-keep-img boolean false Keep <img> tag in it's default place after Jarallax is initialized.
data-z-index number -100 z-index of parallax container.

For more detail, please refer to the Jarallax documentation

Single Element Parallax

Adding data-jarallax-element to any element enables parallax on the single element. The value of the data-attribute is a "Y X" axis deviation in pixels.

If the X axis deviation is not supplied, the element will only move on the Y axis.

<!-- Element will be parallaxed on -140 pixels from the screen center by Y axis -->
<div data-jarallax-element="-140">
    Your content here... This could be an SVG graphic.
</div>

<!-- Element will be parallaxed on 250 pixels from the screen center by Y axis and on -100 pixels from the screen center by X axis -->
<div data-jarallax-element="250 -100">
    Your content here... This could be an SVG graphic.
</div>

Video Backgrounds

The Jarallax plugin also handles fullscreen video backgrounds from Vimeo, Youtube or local video sources.

Vimeo video background
<section class="text-light jarallax" data-jarallax-video="https://vimeo.com/40842620"
  data-speed="1">
  <div class="container">
    <div class="min-vh-60 align-items-center">
      <div class="col text-center">
        <span class="h1">Vimeo Video Background</span>
      </div>
    </div>
  </div>
</section>
Youtube video background
<section class="text-light jarallax" data-jarallax-video="https://www.youtube.com/watch?v=K8rpo9e7tvg" data-video-start-time="30" data-speed="1">
  <div class="container">
    <div class="min-vh-60 align-items-center">
      <div class="col text-center">
        <span class="h1">Youtube Video Background</span>
      </div>
    </div>
  </div>
</section>
Local video background
<section class="text-light jarallax" data-jarallax-video="mp4:./assets/video/video-1.mp4,webm:./assets/video/video-1.webm,ogv:./assets/video/video-1.ogv"
  data-speed="1">
  <div class="container">
    <div class="min-vh-60 align-items-center">
      <div class="col text-center">
        <span class="h1">Local Video Background</span>
      </div>
    </div>
  </div>
</section>

Popper.js

Website, Docs, GitHub, npm

A popper is an element on the screen which "pops out" from the natural flow of your application. Common examples of poppers are tooltips, popovers and drop-downs.

Wingman's navigation dropdowns rely on this plugin. Initialization of Popper is handled in bootstrap.js.

Prism

Website / Docs, GitHub, npm

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.

Any code element in your HTML will be transformed automatically by an initialization in theme.js.

scrollMonitor

GitHub, npm

The scroll monitor allows us to receive events when elements enter or exit the viewport. It does this using watcher objects, which watch an element and trigger events.

Wingman uses scrollMonitor to manage 'sticky' elements that stick to the top of the window or beneath the nav.

You can make an element such as a .navbar or .navbar-dark stick to the viewport top by adding the data-sticky="top" attribute or if you want an in-page nav to scroll with the page, then stick below the main nav, use data-sticky="below-nav". If the sticky element has a section ancestor it will switch to stick to the bottom of that section when scrolled into view.

Smooth Scroll

GitHub, npm

A lightweight script to animate scrolling to anchor links. This provides a better user experience for navigating one-page sites or long landing pages.

Wingman automatically applies the animation effect to all links with the data-smooth-scroll attribute.

You may have a nav which obscures the focussed element after it is scrolled to the top of the window. To avoid this, add the data-smooth-scroll-offset="110" where 110 is a value in pixels which matches the height of your nav.

Zoom-vanilla

GitHub, npm

A simple library for image zooming; as seen on Medium.

This is a vanilla javascript version of the zoom plugin created by fat.

Any image in Wingman can be enhanced with this effect by adding the data-action="zoom" attribute to the img tag.

Start building feature-rich websites

Purchase Now