LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Material Design Hierarchical Display + Animate.css

Animation Constructor

Description

Browser Support: Chrome 4+, Firefox 16+, Opera 12.1+, IE 10+, Safari 4+, Android Browser 4+.
Browser support specified in accordance to caniuse.com.

You can download this plugin from GitHub or install via bower or npm.

For more information visit this site. My other Material Design Pens.

Donate: You can support me via PayPal, WebMoney or Gratipay

CSS
/* ----------------------
You need to include 
- animate.min.css from https://github.com/daneden/animate.css
- zmd.hierarchical-display.min.css from https://github.com/zavoloklom/material-design-hierarchical-display is optional
-------------------------*/
/* -----------------------
demo style - you don't need it in your projects 
-------------------------*/
/* -- import Roboto Font ---------------------------- */
@import "https://fonts.googleapis.com/css?family=Roboto:400,500&subset=latin,cyrillic";
/* -- Box model ------------------------------- */
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* -- Demo style ------------------------------- */
html,
body {
  position: relative;
  min-height: 100%;
  height: 100%;
}
html {
  position: relative;
  overflow-x: hidden;
  margin: 16px;
  padding: 0;
  min-height: 100%;
}
body {
  font-family: 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  color: #212121;
  background-color: #f5f5f5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.main {
  margin: 20px auto;
  max-width: 960px;
}
strong {
  font-wieght: 500;
}
h1 {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
  font-weight: 400;
  color: #212121;
  text-transform: inherit;
  margin-bottom: 8px;
}
h2 {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.1px;
  font-weight: 400;
  color: #212121;
}
#demo {
  position: relative;
  margin: 30px auto;
  width: 620px;
  padding: 0;
}
#demo > * {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  border: none;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  background-color: #e91e63;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#demo > *:hover {
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
#demo > *.active {
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
JS
/**
 * Created by Kupletsky Sergey.
 * https://twitter.com/zavoloklom
 * https://github.com/zavoloklom
**/

/* ----------------------
You need to include 
- jquery 1.7+
- jquery.zmd.hierarchical-display.min.js from https://github.com/zavoloklom/material-design-hierarchical-display
-------------------------*/

/* -----------------------
constructor js - you don't need it in your projects 
-------------------------*/

$(document).ready(function() {

    var el = $('#demo');
  
    var resetAndStart = function (el) {
      el.children().last().off('webkitAnimationEnd animationend');
      el.data('zmd.hierarchicalDisplay', false).hierarchicalDisplay();
    }

    // Action
    $('#action').change(function() {
        var value = $(this).val();
        el.data('action', value);
        resetAndStart(el);
    });

    // Speed
    $('#speed').change(function() {
        var value = $(this).val();
        el.data('speed', value); 
        resetAndStart(el);
    });
   
    // Animation In
    $('#animationIn').change(function() {
        var value = $(this).val();
        el.data('animation-in', value);
        el.children().each(function () {
            $(this).attr('class', '');
        });
        resetAndStart(el);
    });

    // Animation Out
    $('#animationOut').change(function() {
        var value = $(this).val();
        el.data('animation-out', value);
        el.children().each(function () {
            $(this).attr('class', '');
        });
        resetAndStart(el);
    });
  
    // Start Animation button handler
    $('#start').on('click', function() {
        el.children().each(function () {
            $(this).attr('class', '');
        });
        if ($('#action').val() == 'show') {
          el.removeClass('in');
        }
        if ($('#action').val() === 'hide') {
          el.addClass('in');
        }
        resetAndStart(el);
    });
  
    // Block button when animation starts, unblock when ends
    el
      .on('show.zmd.hierarchicalDisplay', function () {
        $('#start').attr('disabled', true).css('opacity', '0.3');
      })
      .on('hide.zmd.hierarchicalDisplay', function () {
        $('#start').attr('disabled', true).css('opacity', '0.3');
      })
      .on('shown.zmd.hierarchicalDisplay', function () {
        $('#start').attr('disabled', false).css('opacity', '1');
      })
      .on('hidden.zmd.hierarchicalDisplay', function () {
        $('#start').attr('disabled', false).css('opacity', '1');
      })
    
    // Add active class class to elements onclick just for fun
    $('#demo').on('click', 'div', function () {
        $(this).toggleClass('active');
      })

});
Host Instantly Drag and Drop Website Builder

 

Description

Hierarchical Timing is a meaningful transition introduced in Google Material Design that focuses your users attention in an app or how an app element got from point A to point B.
Term
Mon, 11/27/2017 - 21:42

Related Codes

Pen ID
Pen ID
Pen ID