February 5, 2017

Material Design Transition Popup

Material Design Transition Popup

Android 5.0 brings Material design to Android and gives you an expanded UI toolkit for integrating the new design patterns easily in your apps. This is one of the transitions used.

HTML

<h1>Material Design Transition</h1>
<div class='wrap'>
  <div class='content'>
    <h2>Well Hello!</h2>
    <p>contents...</p>
  </div>
</div>
<a class='button glyphicon glyphicon-plus' href='#'></a>

CSS

body {
  background: #e6e6e6;
  width: 100%;
  height: 100vh;
  position: relative;
}

h1 {
  color: #c7c7c7;
  font-weight: 200;
  text-align: center;
  position: absolute;
  top: 45%;
  width: 100%;
}

h2 {
  color: #007fed;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

p {
  color: #001818;
}

.wrap {
  position: absolute;
  overflow: hidden;
  top: 10%;
  right: 10%;
  bottom: 85px;
  left: 10%;
  padding: 20px 50px;
  display: block;
  border-radius: 4px;
  transform: translateY(20px);
  transition: all 0.5s;
  visibility: hidden;
}
.wrap .content {
  opacity: 0;
}
.wrap:before {
  position: absolute;
  width: 1px;
  height: 1px;
  background: white;
  content: "";
  bottom: 10px;
  left: 50%;
  top: 95%;
  color: #fff;
  border-radius: 50%;
  -webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrap.active {
  display: block;
  visibility: visible;
  box-shadow: 2px 3px 16px silver;
  transition: all 600ms;
  transform: translateY(0px);
  transition: all 0.5s;
}
.wrap.active:before {
  height: 2000px;
  width: 2000px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-left: -1000px;
  margin-top: -1000px;
  display: block;
  -webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrap.active .content {
  position: relative;
  z-index: 1;
  opacity: 1;
  transition: all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

a.button {
  padding: 11px 11px 13px 13px;
  outline: none;
  border-radius: 50%;
  background: #007fed;
  color: #fff;
  font-size: 24px;
  display: block;
  position: fixed;
  left: 50%;
  bottom: 20px;
  top: auto;
  margin-left: -25px;
  text-decoration: none;
  transition: transform 0.25s;
}
a.button:hover {
  text-decoration: none;
  background: #2198ff;
}
a.button.active {
  transform: rotate(135deg);
  transition: transform 0.5s;
}

jQuery

$('a').on('click', function(){
  $('.wrap, a').toggleClass('active');
  return false;
});

Attachments:

I have used external attachments.

//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css
demo

No comments:

Post a Comment

Popular Posts

Views