Skip to content

Instantly share code, notes, and snippets.

@haimingpro

haimingpro/Material-design-preview.markdown

Created January 19, 2015 07:23
Show Gist options
  • Save haimingpro/fce6b3742295c09ee96a to your computer and use it in GitHub Desktop.
Save haimingpro/fce6b3742295c09ee96a to your computer and use it in GitHub Desktop.
Download ZIP
Material design preview
Raw
index.html
<div class="header"></div>
<div class="background">
<div class="topPic" id="topPic">
<div class="topicTitle" id="titleOverlay"></div>
<span class="title">Material Design Menu Transition</span>
<span class="description">Our first CodePen plugin. Overview of new Material Design made by Google. My first quick spin of it following the guidelines.</span>
</div>
<div class="menuBar" id="menuBar">
<div class="iconBg" id="searchIcon" onclick="getSearch();"><div id="magnifierIcon" class="magnifierIcon"></div></div>
<input type="text" name="search" id="searchBar">
</div>
<div class="menuButton" id="menuButton" onclick="getMenu();">
<span id="line1"></span>
<span id="line2"></span>
<span id="line3"></span>
</div>
<div class="text">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ad, eius ducimus. At, explicabo illum tempore, quidem architecto deserunt similique itaque minima hic vel eos consequuntur voluptatum eligendi ut iusto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia libero maiores facere adipisci, eos nisi ipsum quas vitae pariatur recusandae assumenda harum odio, cum voluptate, nulla tempora temporibus aliquam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ad, eius ducimus. At, explicabo illum tempore, quidem architecto deserunt similique itaque minima hic vel eos consequuntur voluptatum eligendi ut iusto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia libero maiores facere adipisci, eos nisi ipsum quas vitae pariatur recusandae assumenda harum odio, cum voluptate, nulla tempora temporibus aliquam!</p>
</div>
</div>
<div class="overlay" id="overlay">
<div class="choice home" id="home">
Home
</div>
<div class="choice about" id="about">
About us
</div>
<div class="choice work" id="work">
Our Work
</div>
<div class="choice material" id="material">
Material Design
</div>
<div class="choice contact" id="contact">
Contact
</div>
</div>
Raw
Material-design-preview.markdown

Material design preview

Just a short and small preview of Google's new material design principles and animation principles

A Pen by Petar on CodePen.

License.

Raw
script.js
$(document).ready(function() {
/**
* Animating exit button
*/
//Mouseover for menu choices
$("#home").mouseover(function() {
TweenMax.to(this, 0.3, {boxShadow:"5px 5px 15px 0px rgba(50, 50, 50, 0.79)",zIndex:"8"});
}).mouseout(function() {
TweenMax.to(this, 0.3, {boxShadow:"none",zIndex:"7"});
});
$("#about").mouseover(function() {
TweenMax.to(this, 0.3, {boxShadow:"5px 5px 15px 0px rgba(50, 50, 50, 0.79)",zIndex:"8"});
}).mouseout(function() {
TweenMax.to(this, 0.3, {boxShadow:"none",zIndex:"7"});
});
$("#work").mouseover(function() {
TweenMax.to(this, 0.3, {boxShadow:"5px 5px 15px 0px rgba(50, 50, 50, 0.79)",zIndex:"8"});
}).mouseout(function() {
TweenMax.to(this, 0.3, {boxShadow:"none",zIndex:"7"});
});
$("#material").mouseover(function() {
TweenMax.to(this, 0.3, {boxShadow:"5px 5px 15px 0px rgba(50, 50, 50, 0.79)",zIndex:"8"});
}).mouseout(function() {
TweenMax.to(this, 0.3, {boxShadow:"none",zIndex:"7"});
});
$("#contact").mouseover(function() {
TweenMax.to(this, 0.3, {boxShadow:"5px 5px 15px 0px rgba(50, 50, 50, 0.79)",zIndex:"8"});
}).mouseout(function() {
TweenMax.to(this, 0.3, {boxShadow:"none",zIndex:"7"});
});
});
/**
* [index how many times is button clicked]
* @type {int}
*/
var index = 0;
function getMenu() {
index += 1;
var menu = $('#overlay');
//CLOSING THE MENU
if( (index % 2) == 0) {
TweenMax.to(menu, 0.3, {delay:0.8,display:"none",left:"343px",width:"0px",height:"0px",ease:"Power1.easeInOut"});
//menu button transform
TweenMax.to($("#menuButton"), 1, {backgroundColor:"#ff4081"});
TweenMax.to($("#line1"), 0.3, {delay:0.8,rotation:"0", height:"4px", width:"25px",top:"19px",left:"17px"});
TweenMax.to($("#line2"), 0.3, {delay:0.8,rotation:"0", height:"4px", width:"25px",left:"17px"});
TweenMax.to($("#line3"), 0.3, {delay:0.8,rotation:"0", height:"4px", width:"25px",top:"37px",left:"17px"});
TweenMax.to($("#line1, #line2, #line3"), 1, {backgroundColor:"#fce4ec"});
//choices
TweenMax.to($("#home"), 0.3, {delay:0.2, width:"0px", height:"50px", display:"none", top:"0",left:"0", fontSize:"0"});
TweenMax.to($("#about"), 0.3, {delay:0.3, width:"0px", height:"50px", display:"none", top:"0",left:"0", fontSize:"0"});
TweenMax.to($("#work"), 0.3, {delay:0.4, width:"0px", height:"50px", display:"none", top:"0",left:"0", fontSize:"0"});
TweenMax.to($("#material"), 0.3, {delay:0.5, width:"0px", height:"50px", display:"none", top:"0",left:"0", fontSize:"0"});
TweenMax.to($("#contact"), 0.3, {delay:0.6, width:"0px", height:"50px", display:"none", top:"0",left:"0", fontSize:"0"});
//Menu bar
TweenMax.to($("#menuBar"), 0.5, {display:"none", width:"0px"});
//Search icon
TweenMax.to($("#searchIcon"), 0.3, {display:"none", left:"0px"});
searchClick=0;
TweenMax.to($("#magnifierIcon"), 0.3, {rotation:0, backgroundImage:"url(http://s30.postimg.org/5vghezzkd/search_white.png)"});
//Search bar
TweenMax.to($("#searchBar"), 0.3, {width:0, paddingLeft:0});
}
//OPENING THE MENU
else if( (index % 2) !== 0) {
TweenMax.to(menu, 0.3, {display:"initial",left:"18%",width:"1200px",height:"1250px",ease:"Power1.easeInOut"});
//menu button transform
TweenMax.to($("#menuButton"), 1, {backgroundColor:"#fce4ec"});
TweenMax.to($("#line1"), 0.3, {delay:0.2,rotation:"145_short",backgroundColor:"#ff4081", height:"2px", width:"17px",top:"22px",left:"14px"});
TweenMax.to($("#line2"), 0.3, {delay:0.2,rotation:"-180_short",backgroundColor:"#ff4081", height:"2px", width:"29px",left:"14px"});
TweenMax.to($("#line3"), 0.3, {delay:0.2,rotation:"-145_short",backgroundColor:"#ff4081", height:"2px", width:"17px",top:"34px",left:"14px"});
//choices
TweenMax.to($("#home"), 0.5, {delay:0.3, width:"1000px", height:"200px", display:"initial", top:"120px", left:"100px", fontSize:"48"});
TweenMax.to($("#about"), 0.5, {delay:0.4, width:"1000px", height:"200px", display:"initial", top:"321px", left:"100px", fontSize:"48"});
TweenMax.to($("#work"), 0.5, {delay:0.5, width:"1000px", height:"200px", display:"initial", top:"522px", left:"100px", fontSize:"48"});
TweenMax.to($("#material"), 0.5, {delay:0.6, width:"1000px", height:"200px", display:"initial", top:"723px", left:"100px", fontSize:"48"});
TweenMax.to($("#contact"), 0.5, {delay:0.7, width:"1000px", height:"200px", display:"initial", top:"924px", left:"100px", fontSize:"48"});
//Menu bar
TweenMax.to($("#menuBar"), 0.5, {delay:0.1, display:"initial", width:"1200px"});
//Search icon
TweenMax.to($("#searchIcon"), 0.5, {delay:0.5, display:"initial", left:"1040px"});
TweenMax.to($("#magnifierIcon"), 0.3, {delay:1, rotation:-90});
}
}
$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 100; // set to whatever you want it to be
if(y_scroll_pos > scroll_pos_test) {
TweenMax.to($("#topPic"), 0.4, {height:"500px",ease:"Power1.easeIn",backgroundPosition:"0 -250px"});
TweenMax.to($("#titleOverlay"), 0.4, {height:"500px", ease:"Power1.easeIn"});
}
else {
TweenMax.to($("#topPic"), 0.4, {height:"750px",ease:"Power1.easeOut",backgroundPosition:"0 0px"});
TweenMax.to($("#titleOverlay"), 0.4, {height:"400px", ease:"Power1.easeOut"});
}
});
var searchClick = 0;
//Get the search field
function getSearch() {
searchClick += 1;
console.log(searchClick);
if( (searchClick % 2) !== 0) {
TweenMax.to($("#searchBar"), 0.5, {width:"980px", paddingLeft:"20px", ease:"Power1.easeInOut"});
TweenMax.to($("#magnifierIcon"), 0.5, {rotation:"270", backgroundImage:"url(http://s30.postimg.org/ydb51e37x/search.png)"});
}
else if( (searchClick % 2) == 0) {
TweenMax.to($("#searchBar"), 0.5, {width:"0px", paddingLeft:"0px", ease:"Power1.easeInOut"});
TweenMax.to($("#magnifierIcon"), 0.5, {rotation:"-90", backgroundImage:"url(http://s30.postimg.org/5vghezzkd/search_white.png)"});
}
}
Raw
style.less
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300italic,300,100,100italic,500,400italic,500italic,700,700italic,900italic,900);
.roboto { font-family: 'Roboto', sans-serif; };
body{
margin: 0;
padding: 0;
background-color: #e0e0e0;
}
.header {
width: 100%;
height: 200px;
background-color: #5677fc;
}
.background {
width: 1200px;
margin: 0 auto;
padding: 0;
float: left;
height: 1250px;
background-color: #ffffff;
position: absolute;
left: 18%;
top: 80px;
/*-webkit-box-shadow: 1px 2px 3px 1px #9e9e9e;
box-shadow: 1px 2px 3px 1px #9e9e9e;*/
-webkit-box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.7);
-moz-box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.7);
box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.7);
}
.text {
position: absolute;
top: 850px;
left: 90px;
width: 90%;
height: auto;
& h1 {
font-size: 42px;
color: rgba(0,0,0,0.87);
font-weight: 600;
.roboto;
margin-bottom: 50px;
}
& p {
font-size: 22px;
color: rgba(0,0,0,0.87);
font-weight: 300;
.roboto;
margin-bottom: 50px;
}
}
.topPic {
width: 100%;
height: 750px;
background-image:url("http://i58.tinypic.com/efqhig.jpg");
float: left;
position: absolute;
top:0;
& .topicTitle {
width: 100%;
height: 400px;
position: absolute;
bottom: 0;
left:0;
background-color: #000000;
opacity: 0.2;
z-index: 0;
}
& .title {
.roboto;
font-size: 56px;
color: #ffffff;
float: left;
font-weight: 300;
position: absolute;
bottom: 300px;
left: 90px;
}
& .description {
.roboto;
width: 600px;
font-size: 26px;
font-weight: 200;
position: absolute;
bottom: 200px;
left: 90px;
color: #ffffff;
}
}
.menuBar {
position: absolute;
top:0;
left:0;
height: 80px;
width: 0px; //1200px
background-color: #303f9f;
z-index: 51;
display: none;
-webkit-box-shadow: 0px 3px 2px 1px rgba(56, 56, 56, 0.75);
-moz-box-shadow: 0px 3px 2px 1px rgba(56, 56, 56, 0.75);
box-shadow: 0px 3px 2px 1px rgba(56, 56, 56, 0.75);
& .iconBg {
width:60px;
height: 60px;
position: absolute;
display: block;
left: 0px; //100px
top: 10px;
z-index: 90;
cursor: pointer;
bacground-color: red;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
&:hover {
background-color: #7986cb;
}
}
& .magnifierIcon {
background: url(http://s30.postimg.org/5vghezzkd/search_white.png) 18px 18px no-repeat;
width:60px;
height: 60px;
display: block;
z-index: 92;
}
& input[type=text] {
outline: 0;
border: none;
background-color: #eeeeee;
height: 58px;
width: 0px; //980px
position: absolute;
top: 10px;
right: 100px;
padding-left: 0px; //20px
font-size: 26px;
.roboto;
color: rgba(0,0,0,0.54);
}
}
.menuButton {
width: 60px;
height: 60px;
background-color: #ff4081;
float: left;
/*-webkit-border-radius: 30px 30px 30px 30px;
border-radius: 30px 30px 30px 30px;*/
opacity: 1;
position: relative;
top: 10px;
left: 10px;
z-index: 100;
cursor: pointer;
& #line1 {
width: 25px;
height: 4px;
background-color: #ffffff;
position: absolute;
top: 19px;
left: 17px;
}
& #line2 {
width: 25px;
height: 4px;
background-color: #ffffff;
position: absolute;
top: 28px;
left: 17px;
}
& #line3 {
width: 25px;
height: 4px;
background-color: #ffffff;
position: absolute;
top: 37px;
left: 17px;
}
/*&:hover {
background-color: #fe5c93;
}*/
}
.overlay {
width: 0px; //1200px
height: 50px; //1250px;
margin: 0 auto;
float: left;
//background-color: #3f51b5;
background-color: #4db6ac;
position: absolute;
/*
left: -100%;
top:80px;*/
top: 80px;
left: 343px;
z-index: 50;
display: none;
& .choice {
width: 1000px;
height: 200px;
//margin-left: 100px;
background-color:#fafafa;
border-bottom: 1px solid #e0e0e0;
text-align: center;
line-height: 200px;
font-size: 0; //goes to 48px
font-weight: 100;
color: rgba(0,0,0,0.87);
.roboto;
display:none;
cursor: pointer;
}
& #home {
position: absolute;
width: 0px; //1000px
height: 50px; //200px
top:0px; //150px
left: 0px; //100px
display: none;
margin:0; //left: 100px;
z-index: 7;
}
& #about {
position: absolute;
width: 0px; //1000px
height: 50px; //200px
top: 0px; //351px
left: 0px; //100px
display: none;
margin:0; //left: 100px;
z-index: 7;
}
& #work {
position: absolute;
width: 0px; //1000px
height: 50px; //200px
top: 0; //552px
left: 0; //100px
display: none;
margin:0; //left: 100px;
z-index: 7;
}
& #material {
position: absolute;
width: 0px; //1000px
height: 50px; //200px
top: 0; //753px
left: 0; //100px
display: none;
margin:0; //left: 100px;
z-index: 7;
}
& #contact {
position: absolute;
width: 0px; //1000px
height: 50px; //200px
top: 0; //954px
left: 0; //100px
display: none;
margin:0; //left: 100px;
z-index: 7;
}
}
.cover {
width:270px;
height: 200px;
background-color: #FFFFFF;
float: left;
margin: 0;
padding: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment