Skip to content

Instantly share code, notes, and snippets.

@raymondmars

raymondmars/Material-Design-App---Animated-Tabs.markdown

Created July 10, 2014 10:08
Show Gist options
  • Save raymondmars/333fa88f26b20e6a1557 to your computer and use it in GitHub Desktop.
Save raymondmars/333fa88f26b20e6a1557 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Robot.
Raw
index.html
<div class="toolbar">
<div class="tabs">
<ul>
<li class="tabitem active"><a href="#box1">ALL<span></span></a></li>
<li class="tabitem"><a href="#box2">FAVORITES<span></span></a></li>
</ul>
</div>
</div>
<div class="content">
<div id="box1" class="box show">
<div class="item">
<div class="itemhead">
<img src="http://www.polymer-project.org/samples/tutorial/images/avatar-01.svg" width="70" height"70" />
<h2>Eric</h2>
<div class="heart">
<svg viewBox="0 0 24 24" style="pointer-events: none; width: 24px; height: 24px; display: block;"><g id="favorite"><path d="M12,21.4L10.6,20C5.4,15.4,2,12.3,2,8.5C2,5.4,4.4,3,7.5,3c1.7,0,3.4,0.8,4.5,2.1C13.1,3.8,14.8,3,16.5,3C19.6,3,22,5.4,22,8.5c0,3.8-3.4,6.9-8.6,11.5L12,21.4z"></path></g></svg>
</div>
</div>
<p>Have you heard about the Web Components revolution?</p><p>Click to tabs!</p>
</div>
<div class="item">
<div class="itemhead">
<img src="http://www.polymer-project.org/samples/tutorial/images/avatar-05.svg" width="70" height"70" />
<h2>Norberrt</h2>
<div class="heart">
<svg viewBox="0 0 24 24" style="pointer-events: none; width: 24px; height: 24px; display: block;"><g id="favorite"><path d="M12,21.4L10.6,20C5.4,15.4,2,12.3,2,8.5C2,5.4,4.4,3,7.5,3c1.7,0,3.4,0.8,4.5,2.1C13.1,3.8,14.8,3,16.5,3C19.6,3,22,5.4,22,8.5c0,3.8-3.4,6.9-8.6,11.5L12,21.4z"></path></g></svg>
</div>
</div>
<p>Decentralize! No canvas, no polymer.</p><p><strong>Needs only CSS and pure javascript!</strong></p>
</div>
</div>
<div id="box2" class="box">
<div class="item">
<div class="itemhead">
<img src="http://www.polymer-project.org/samples/tutorial/images/avatar-02.svg" width="70" height"70" />
<h2>Rob</h2>
<div class="heart">
<svg viewBox="0 0 24 24" style="pointer-events: none; width: 24px; height: 24px; display: block;"><g id="favorite"><path d="M12,21.4L10.6,20C5.4,15.4,2,12.3,2,8.5C2,5.4,4.4,3,7.5,3c1.7,0,3.4,0.8,4.5,2.1C13.1,3.8,14.8,3,16.5,3C19.6,3,22,5.4,22,8.5c0,3.8-3.4,6.9-8.6,11.5L12,21.4z"></path></g></svg>
</div>
</div>
<p>Loving this Polymer thing. This tab app from Polymer projects.</p><p><a href="http://www.polymer-project.org/samples/tutorial/finished/index.html" target="_blank">YOU CAN SEE IT ON THIS LINK</a></p>
</div>
</div>
</div>
Raw
Material-Design-App---Animated-Tabs.markdown
Raw
script.js
/*
Kerem Sevencan @keremciu
----------------
Hello Everyone!
- I loved Material Design and I developed the following polymer app without Canvas and Polymer.
You can use Only CSS3 - Pure Javascript!
I hope you like it :)
http://www.polymer-project.org/samples/tutorial/finished/index.html
*/
window.onload = function() {
var heart = document.getElementsByClassName("heart");
var classname = document.getElementsByClassName("tabitem");
var boxitem = document.getElementsByClassName("box");
var clickFunction = function(e) {
e.preventDefault();
var a = this.getElementsByTagName("a")[0];
var span = this.getElementsByTagName("span")[0];
var href = a.getAttribute("href").replace("#","");
for(var i=0;i<boxitem.length;i++){
boxitem[i].className = boxitem[i].className.replace(/(?:^|\s)show(?!\S)/g, '');
}
document.getElementById(href).className += " show";
for(var i=0;i<classname.length;i++){
classname[i].className = classname[i].className.replace(/(?:^|\s)active(?!\S)/g, '');
}
this.className += " active";
span.className += 'active';
var left = a.getBoundingClientRect().left;
var top = a.getBoundingClientRect().top;
var consx = (e.clientX - left);
var consy = (e.clientY - top);
span.style.top = consy+"px";
span.style.left = consx+"px";
span.className = 'clicked';
span.addEventListener('webkitAnimationEnd', function(event){
this.className = '';
}, false);
};
for(var i=0;i<classname.length;i++){
classname[i].addEventListener('click', clickFunction, false);
}
for(var i=0;i<heart.length;i++){
heart[i].addEventListener('click', function(e) {
var classString = this.className, nameIndex = classString.indexOf("active");
if (nameIndex == -1) {
classString += ' ' + "active";
}
else {
classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+"active".length);
}
this.className = classString;
}, false);
}
}
Raw
style.css
@import url(http://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,300);
body {margin:0;background:#E5E5E5;font-weight:300;color:#404040;font-family: "RobotoDraft", Helvetica, Arial, sans-serif;letter-spacing:.1px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.toolbar {height:64px;background:#03A9F4}
.tabs {padding-top:14px}
.tabs ul {list-style:none;margin:0;width:100%;overflow:hidden;padding:0;margin-left:16px;}
.tabs ul li {float:left;width:100px}
.tabs a {position:relative;color:white;text-decoration:none;display:block;width:100px;height:50px;text-align:center;line-height:52px;font-weight:500;font-size:14px;color:rgba(255,255,255,0.6);overflow:hidden;}
.tabs .active a {color:white;}
.tabs .active a:after {height:2px;width:100%;display:block;content:" ";bottom:0px;left:0px;position:absolute;background:#FFFF8D;
-webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;-moz-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;transition:all 1s cubic-bezier(0.4, 0.0, 1, 1);}
.tabs a span {position:absolute;margin-left:-40px;margin-top:-24px;width:80px;background:rgba(255,255,141,1);height:100%;display:block;border-radius:50%;opacity:0;}
.tabs a span.clicked {-webkit-animation: expand 0.6s cubic-bezier(0.4, 0.0, 0.4, 1) 0s normal;-moz-animation: expand 0.6s cubic-bezier(0.4, 0.0, 0.4, 1) 0s normal;border-bottom:2px solid #FFFF8D;}
.content {box-shadow:inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);height:500px;padding-top:50px;position:relative;top:0px;overflow:hidden;}
.item {background:white;width:440px;padding-bottom:30px;margin:0 auto 2em;}
.itemhead {padding:30px;overflow:hidden;position:relative;}
.itemhead img {border-radius:100%;float:left}
.itemhead h2 {float:left;margin-left:20px;}
.itemhead .heart {cursor:pointer;position:absolute;right:4px;top:4px;padding:7px;border-radius:2px}
.item p:first-of-type {margin-top:0}
.item p {padding:0px 30px;font-size:19px;line-height:26px;margin:0;margin-top:1em;}
.item a {text-decoration:none;color:#00bcd4;font-weight:500;font-size:0.8em;}
.heart:hover {box-shadow:0 1px 0 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.1)}
.heart #favorite {fill:#636363}
.heart.active #favorite {fill:#DA4336;}
.box {display:none;overflow:auto;position:relative;overflow-x:hidden;}
.box.show {display:block;}
@-webkit-keyframes expand {
0% {
background:rgba(255,255,141,1);
opacity:1;
border-radius:100%;
transform: scale(0);
-webkit-transform: scale(0);
-moz-transform:scale(0);
}
50% {
background:rgba(255,255,141,0.8);
border-radius:50%;
}
100% {
background:rgba(255,255,141,0);
transform: scale(3);
border-radius: 0;
-webkit-transform: scale(3);
-moz-transform:scale(3);
opacity:1;
}
}
@-moz-keyframes expand {
0% {
background:rgba(255,255,141,1);
opacity:1;
border-radius:100%;
transform: scale(0);
-moz-transform:scale(0);
}
50% {
background:rgba(255,255,141,0.8);
border-radius:50%;
}
100% {
background:rgba(255,255,141,0);
transform: scale(3);
border-radius: 0;
-moz-transform:scale(3);
opacity:1;
}
}
@-webkit-keyframes border-expand {
0% {
opacity:0;
width:0;
}
100% {
opacity:1;
width:100%;
}
}
@-moz-keyframes border-expand {
0% {
opacity:0;
width:0;
}
100% {
opacity:1;
width:100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment