Plug-ins Used in MyWay Light

MyWay Light is one of the exercises I’ve done recently, it is a one-page website theme for Wordpress that I’ve tried to recreate as close as possible and to discover how its design and effects were executed. If you want to see it go here > MyWay Light Demo. On the process of reading its code I learned that it used these plug-ins:

• SmoothScroll
• Font-Awesome
• Skrollr
• Bootstrap 3 Lightbox (Ekko-lightbox)
• jQuery gMap Plug-in
• FlowUpLabels
• jQuery Form Plug-in

Reading unto each documentation of the plug-ins here is what I’ve learned.

SmoothScroll

Looking into MyWay Light Demo you’ll notice how smooth it moves when you use the mousewheel to scroll up and down the website. This plug-in’s event is binded into the mousewheel, it also supports the keyboard’s arrow keys, navigation keys PageUp and PageDown and touchpad. What it does is it adds an animation and friction into the mouse scroll. SmoothScroll’s settings is customizable, so you can set how smooth you would want it to scroll, in MyWay Light’s case this is the settings.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

(function(){
  
// Scroll Variables (tweakable)
var defaultOptions = {

    // Scrolling Core
    frameRate        : 150, // [Hz]
    animationTime    : 700, // [px]
    stepSize         : 40, // [px]

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm   : true,
    pulseScale       : 8,
    pulseNormalize   : 1,

    // Acceleration
    accelerationDelta : 20,  // 20
    accelerationMax   : 1,   // 1

    // Keyboard Settings
    keyboardSupport   : true,  // option
    arrowScroll       : 50,     // [px]

    // Other
    touchpadSupport   : true,
    fixedBackground   : true, 
    excluded          : ""    
};

FontAwesome

FontAwesome is not necessarily a plug-in but a CSS Framework that has a library of SVG Icon Fonts. Checkout my JSfiddle sample.

The user only needs to include the class prefixes of the icon of their choice on HTML inline elements like <i></i> and <span></span>. They can have it spinning or customize it with CSS.

Skrollr

I used two features of Skrollr which is the Parallax and Color Transforms but Skrollr has more uses. Skrollr is an independent JavaScript plug-in it is not made with jQuery. Skrollr automatically injects its class prefixes to HTML tags that contain data- attribute. Skrollr will read the values contained in data- and animate or transform that object based on the values.

I used Color Transforms on the Navigation Bar, and Parallax on the intro background and the section headers.

Bootstrap 3 Lightbox (Ekko-lightbox)

Bootstrap 3 Lightbox is a lightbox module built around Bootstrap’s modal plug-in for viewing images, YouTube videos and galleries. For me, the best thing about this plug-in is that it’s style is CSS and fully customizable. This plug is used in this part of the website, MyWay Light Gallery.

jQuery gMap Plug-in

gMap A lightweight, flexible, highly customizable jQuery plug-in for embedding Google Maps that works with the Google Map API v3. With gMap the user has the option to remove or include, the Google Map UI, set custom markers, zoom level, and the maptype. MyWay Light Contact

FlowUp Labels

This is the plug-in that gives MyWay Light’s contact form labels floating effect when you click it. The plug-in’s style is fully customizable in CSS. Check out their demo here ENFO’s FlowUpLabels Demo.

jQuery Form Plugin

Form is a plug-in that allows the user to upgrades HTML to use AJAX. It provides several methods to easily manage the form data and form submission. This plug-in was used in the theme to make the success and the failure notifications be thrown at the HTML page instead of a dialog box. Implementing the plug-in is easy, just bind the form through IDs or classes in the script.

1
2
3
4
5
6
7
8
9

<script> 
    // wait for the DOM to be loaded 
    $(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('#myForm').ajaxForm(function() { 
            alert("Thank you for your comment!"); 
        }); 
    }); 
</script>

I also used Bootstrap in MyWay Light but I made a different post for it, see it here.

Thanks for reading! :) I’ll be posting about CSS3 Transitions/Animation next time, please keep on reading! :)