MatEffects- A jQuery Pack Based On Material Design (Documentation)

Index

• Introduction
• Usage
  • Color Slider
  • Over View
  • Section Navigator
  • Group Slider
• Conclusion
• View Demo

Introduction

MatEffects is a jQuery plugin based on Google's Material Design guide. With this plugin you can easily add some modern effects on your website. Currently this plugin has four different animations. This article shows how you can add this plugin into your website. You'll get this documentation after you purchase this.

Usage

MatEffects is a jQuery plugin, meaning that it extends the jQuery JavaScript library to include extra functionality. First, you must include the jQuery library's source before you include the source of any jQuery plugin. It's recomended that you use jquery ui library as well to get easing effects. You can download latest version of jQuery library from here and jQuery UI library from here. Then add MatEffect's additional files like jquery.mateffects.js and mateffects.css. There is also an image folder which is necessary as well and you have to add it in the same folder where your mateffects.css file is placed. Also it is my recommendation that you add this source file in head tag.

Now you can call different MatEffect's function to generate different effects. There are 4 types of animation you can create.

Color Slider

This function will create an hover effects that is shown on this demo. Also you can check the color-slider.html file that is provided with the downloaded package. This is mainly an hover effect. Whenever user will mouse hover on any element, some color will slide from any given direction and after hovering out, it will again slide back. Here is html of an element where we want to use this effect:

    

    

        
Slide From
        
Top
    

Now call below function to get Color Slider in the element with id divSliderTop:

$(document).ready(function () {
    $("#divSlideTop").ColorSlider({
        color: ['#00897b', '#00796b', '#00695c', '#004d40'],
        speed: 1500,
        easing: 'easeOutQuint',
        slideFrom: 'top',
        mouseEnter: function () {
            $("#divSlideTop").find(".effect-text").stop().animate({
                top: "55px"
            }, 1000, "easeOutQuint");
        },
        mouseLeave: function () {
            $("#divSlideTop").find(".effect-text").stop().animate({
                top: "75px"
            }, 1000, "easeOutQuint");
        }
    });
});

Here ColorSlider function will create a div element inside divSliderTop. Inside this div element it will generate another four div with the given 4 background color. So when user will mouse over it will slide those four color and bring the last color on the element and vice versa when you mouse out from the element. It also have callback function for mouseEnter and mouseLeave. Here are the options in detail:

Variable/Function	Default Value	Description
color	['#673ab7', '#3f51b5', '#2196F3', '#03a9f4', '#00bcd4', '#00acc1']	It will take any number of color array. Make sure you give '#' when you are giving color codes.
easing	linear	Easing effect for the animation.
speed	1200	Speed of the animation which will accept integer value and in milisecond unit.
slideFrom	"right"	This indicates from where the animation will show. It accepts four value in string format: "top", "right", "bottom", "left".
mouseEnter		This is a callback function which will call after the mouse hover on the element.
mouseLeave		This is another callback function which will call after mouse out from the element.

If you want to use this same effect in multiple element then you can call the ColorSlider function using class name as well.

Over View

This function will create a popup/modal effects that is shown on this demo. OverView is mainly a pop up or modal. It will always appear on top layer of your website's elements and always slide from right side. The main feature of this effect is, the modal will be devided into several part and all the part will animate separately and also animation back separately as well. Here is html of an element where we want to use this effect:

    

    
    

        

            

            
        
        

            
Over View Demo
        
        

            
Sed ut perspiciatis unde ... aliquam quaerat voluptatem.
        
    

Here on the parent div you have to use ov-container class and inside that div you have to use ov-body on the child div to help understand the function that which one is container and which one is the body of the plugin. This is what you must use:

 

    Any button to close over view
    

        .....
    

Now inside the div where ov-body class is given, you must place several number of div element which will be devided into separate element and OverView() will animate them separately. You can place any number of div element inside ov-body. Here is javascript part to call OverView function:

    
$(document).ready(function () {
    $("#divDemoA").OverView({
        easingIn: 'easeInCirc',
        easingOut: 'easeOutCirc',
        speed: 1300
    });

    $("#ancViewDemo").click(function () {
        $("#divDemoA").OverView('show');
    });

    $(".a-close").click(function () {
        $("#divDemoA").OverView('hide');
    });
});

Here first you have to initialize OverView with the div element. After that you can use $.fn.OverView("show") and $.fn.OverView("hide") to show and hide the over view. In the code above we have a button which id is ancViewDemo and by clicking it we are showing the over veiw and by click the .a-close button which is placed inside over view element, we are sliding it back. Here are the options in detail:

Variable/Function	Default Value	Description
easingIn	linear	Easing effect while the over view appears.
easingOut	linear	Easing effect while the over view slide back.
speed	1200	Speed of the animation which will accept integer value and in milisecond unit.
$("#OverViewId"").OverView('show');		By calling this function Overview will appear.
$("#OverViewId"").OverView('hide');		By calling this function Overview will slide back.

Section Navigator

This function will create a navigation that is shown on this demo. It's mainly a menu that will automatically generate on your website. For example lets assume you have following section on your html file. This is the body section of your page:

    

    

        .....
    
    

        .....
    
    

        .....
    
    

        .....
    

Here we have 4 sections in our webpage and we've given an unique id on each of them. Now here is the javascript part to call SectionNavigator:

   
$(document).ready(function () {
    $('body').SectionNavigator({
        sections: ['divFirst', 'divSecond', 'divThird', 'divFourth'],
        navigationClasses: ['home glyphicon glyphicon-home', 'nav-features glyphicon glyphicon-star', 'one glyphicon glyphicon-question-sign', 'two glyphicon glyphicon-file'],
        labels: ['Home', 'Features', 'One', 'Two'],
        prevButtonClass: "glyphicon glyphicon-chevron-up",
        nextButtonClass: "glyphicon glyphicon-chevron-down",
        easing: 'easeOutSine',
        speed: 700,
        afterNavigate: function (index) {
            //do something after navigating to that section
        }
    });
});

Here, as our sections are inside body tag so we are calling SectionNavigator with body. Here are the options in detail:

Variable/Function	Default Value	Description
sections	[]	This is an array of id of our sections inside body element.
navigationClasses	[]	This an array of classes that will be injected into the button of navigation. Make sure you use same number of array element that are given in sections array.
labels	[]	This is an array of name that you'll see after you hover on any button on the navigation. Again make sure you use same number of array element that are given in sections array.
prevButtonClass	""	This will take a single string of the class for previous button on the navigation. OverView will inject this class name on the previous button.
nextButtonClass	""	This will take a single string of the class for next button on the navigation. OverView will inject this class name on the next button.
easing	linear	Easing effect for the animation.
speed	700	Speed of the animation which will accept integer value and in milisecond unit.
afterNavigate		This is a callback function which will call after the window will scroll to the desired section. It will always send the index of your menu item as parameter.

This function will generate the navigation automatically. So for navigation you don't have to write any html code.

Group Slider

This function will create a slider that is shown on this demo. The main feature of this slider is, it will slide in a group and you can decide from where each slider will slide. There are two options, horizontally and vertically. Here is the html part of a slider:

    

        
        
        
        
    

        
        
    
    

        
        
    
    

        

            
Welcome!
            
This is Group Slider. This whole slider is working as one slider. You can add time bar and navigation if you want.
        
        

            
Other Options!
            
Easing effect, sliding speed, time are configurable in this slider. More details are given in the documentation.
        
    
    

        
        
        
    

        
        
        
        
    
    

        
        
    
    

        
    

This is the html that is shown on the demo. The main structure that you must follow is, there will be a parent div and inside that you can add several div element. Now inside the child div what will you provide is upto you. Like here some child div contains images and some contains another div with texts. Now another thing is, you have to tell each div whether it will slide horizontally or vertically. Use slide attribute here and it supports two value: horizontal and vertical. Here is the javascript part:

$(document).ready(function () {
    $("#divSlider").GroupSlider({
        easing: 'easeInOutCubic',
        speed: 1000,
        time: 5000,
        timebar: true,
        control: true
    });
});

Here is the options more in detail:

Variable/Function	Default Value	Description
easing	linear	Easing effect for the animation.
speed	1000	Speed of the animation which will accept integer value and in milisecond unit.
time	5000	Time is the time difference between each slide and it also accept integer value and in milisecond unit.
timebar	true	Timebar is the bar that that gives us an idea of after how much time the slide may rotate. It takes boolean value (true or false). For false it will not show.
control	true	Control is a set of buttons by which you can view next slide or previous slide or pause/play the slide. It also takes boolean value (true or false). For false it will not show.

Conclusion  

You can change CSS attribute from mateffects.css file so that the plugin match your website's style. 

Thank you very much for you interest on MatEffects. If you have any question then feel free to contact me from CodeCanyon or from my Website.