Skip to content

Instantly share code, notes, and snippets.

/index.html

Created March 30, 2015 21:20
Show Gist options
  • Save anonymous/e582477a57dc9a82ab13 to your computer and use it in GitHub Desktop.
Save anonymous/e582477a57dc9a82ab13 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/giguti
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100);
html * {
font-family: Roboto !important;
font-weight: 100;
box-sizing: border-box;
}
.circle-wrap {
width: 50px;
height: 50px;
position: absolute;
pointer: cursor;
top: -19px;
right: 20px;
transition: all 0.6s ease;
transform: scale(1, 1);
}
.circle-wrap > * {
outline: 0;
border: none;
cursor: pointer;
width: 100%;
border-radius: 50%;
text-align: center;
padding: 50% 0;
line-height: 0;
margin: 0;
background-color: #e95de3;
color: white;
font-size: 20px;
box-shadow: 2px 2px 10px -2px #4d4d4d;
}
.tada2 .circle-wrap {
transition: all 0.6s ease;
transform: scale(0.8, 0.8);
}
.header {
height: 60px;
width: 100%;
background-color: #17a5a5;
color: white;
box-shadow: 2px 2px 5px 2px #dddddd;
}
.header h1 {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
font-size: 30px;
}
ul {
width: 100%;
}
.item {
overflow: hidden;
margin: 80px auto;
max-width: 600px;
width: 100%;
}
.primary {
height: 300px;
background-color: #eeeeee;
color: darkgray;
font-size: 50px;
position: relative;
text-align: right;
}
.primary .spoiler {
margin: 0 10px;
position: absolute;
bottom: 40px;
right: 0;
}
.present {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: calc(100% + 77px);
background-color: red;
transform: translateY(100%);
transition: all 0.8s 0.05s ease;
}
.present.tada {
transition: all 0.5s ease;
transform: translateY(0%);
}
.title, .secondary {
padding: 0 10px;
z-index: 2;
background-color: #fafafa;
}
.title {
border-top: 1px solid #dadada;
position: relative;
width: 100%;
color: #868686;
font-size: 30px;
padding: 10px 10px;
transition: all 0.6s ease;
}
.secondary {
color: #acacac;
line-height: 20px;
font-size: 14px;
padding: 20px 0;
}
.title.tada2 {
transform: translateY(77px);
transition: all 0.6s ease;
}
.caret-wrap {
transform: rotate(90deg);
transition: all 0.6s ease;
}
.caret {
display: block;
transform: scaleY(2);
}
.tada2 .caret-wrap {
transform: rotate(270deg);
}
</style>
</head>
<body>
<div class="header">
<h1>Welcome</h1>
</div>
<div class="item">
<div class="primary">
<div class="spoiler">
<div></div>
<div></div>
</div>
<!--ADD LOGIN FORM -->
</div>
<div class="title">
<h2></h2>
<div class="circle-wrap">
<button tabindex="1" type="button" class="toggle-tada">
<div class="caret-wrap">
<span class="caret">
&gt;
</span>
</div>
</button>
</div>
<div class="secondary">
<p>
</p>
</div>
</div>
</div>
<script id="jsbin-javascript">
setTimeout(function() {
$('.present').toggleClass('tada');
$('.title').toggleClass('tada2');
},2000);
$('.toggle-tada').click(function() {
$('.present').toggleClass('tada');
$('.title').toggleClass('tada2');
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"><\/script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"><\/script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"><\/script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="header">
<h1>Welcome</h1>
</div>
<div class="item">
<div class="primary">
<div class="spoiler">
<div></div>
<div></div>
</div>
<\!--ADD LOGIN FORM -->
</div>
<div class="title">
<h2></h2>
<div class="circle-wrap">
<button tabindex="1" type="button" class="toggle-tada">
<div class="caret-wrap">
<span class="caret">
&gt;
</span>
</div>
</button>
</div>
<div class="secondary">
<p>
</p>
</div>
</div>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">@import url(http://fonts.googleapis.com/css?family=Roboto:400,100)
html *
font-family: Roboto !important
font-weight: 100
box-sizing: border-box
@mixin vcenter
position: relative
top: 50%
transform: translateY(-50%)
.circle-wrap
width: 50px
height: 50px
position: absolute
pointer: cursor
top: -19px
right: 20px
transition: all 0.6s ease
transform: scale(1.0,1.0)
.circle-wrap > *
outline: 0
border: none
cursor: pointer
width: 100%
border-radius: 50%
text-align: center
padding: 50% 0
line-height: 0
margin: 0
background-color: rgb(233, 93, 227)
color: white
font-size: 20px
box-shadow: 2px 2px 10px -2px rgb(77, 77, 77)
.tada2 .circle-wrap
transition: all 0.6s ease
transform: scale(0.8,0.8)
.header
height: 60px
width: 100%
background-color: rgb(23, 165, 165)
color: white
box-shadow: 2px 2px 5px 2px #ddd
h1
text-align: center
@include vcenter
margin: 0 auto
font-size: 30px
ul
width: 100%
.item
overflow: hidden
margin: 80px auto
max-width: 600px
width: 100%
.primary
height: 300px
background-color: #eee
color: darkgray
font-size: 50px
position: relative
text-align: right
.spoiler
margin: 0 10px
position: absolute
bottom: 40px
right: 0
.present
position: absolute
top: 0px
left: 0px
width: 100%
height: calc(100% + 77px)
background-color: red
transform: translateY(100%)
transition: all 0.8s 0.05s ease
.present.tada
transition: all 0.5s ease
transform: translateY(0%)
.title, .secondary
padding: 0 10px
z-index: 2
background-color: rgb(250,250,250)
.title
border-top: 1px solid rgb(218,218,218)
position: relative
width: 100%
color: rgb(134,134,134)
font-size: 30px
padding: 10px 10px
transition: all 0.6s ease
.secondary
color: rgb(172, 172, 172)
line-height: 20px
font-size: 14px
padding: 20px 0
.title.tada2
transform: translateY(77px)
transition: all 0.6s ease
.caret-wrap
transform: rotate(90deg)
transition: all 0.6s ease
.caret
display: block
transform: scaleY(2.0)
.tada2 .caret-wrap
transform: rotate(270deg)
</script>
<script id="jsbin-source-javascript" type="text/javascript">setTimeout(function() {
$('.present').toggleClass('tada');
$('.title').toggleClass('tada2');
},2000);
$('.toggle-tada').click(function() {
$('.present').toggleClass('tada');
$('.title').toggleClass('tada2');
});</script></body>
</html>
Raw
jsbin.giguti.css
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100);
html * {
font-family: Roboto !important;
font-weight: 100;
box-sizing: border-box;
}
.circle-wrap {
width: 50px;
height: 50px;
position: absolute;
pointer: cursor;
top: -19px;
right: 20px;
transition: all 0.6s ease;
transform: scale(1, 1);
}
.circle-wrap > * {
outline: 0;
border: none;
cursor: pointer;
width: 100%;
border-radius: 50%;
text-align: center;
padding: 50% 0;
line-height: 0;
margin: 0;
background-color: #e95de3;
color: white;
font-size: 20px;
box-shadow: 2px 2px 10px -2px #4d4d4d;
}
.tada2 .circle-wrap {
transition: all 0.6s ease;
transform: scale(0.8, 0.8);
}
.header {
height: 60px;
width: 100%;
background-color: #17a5a5;
color: white;
box-shadow: 2px 2px 5px 2px #dddddd;
}
.header h1 {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
font-size: 30px;
}
ul {
width: 100%;
}
.item {
overflow: hidden;
margin: 80px auto;
max-width: 600px;
width: 100%;
}
.primary {
height: 300px;
background-color: #eeeeee;
color: darkgray;
font-size: 50px;
position: relative;
text-align: right;
}
.primary .spoiler {
margin: 0 10px;
position: absolute;
bottom: 40px;
right: 0;
}
.present {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: calc(100% + 77px);
background-color: red;
transform: translateY(100%);
transition: all 0.8s 0.05s ease;
}
.present.tada {
transition: all 0.5s ease;
transform: translateY(0%);
}
.title, .secondary {
padding: 0 10px;
z-index: 2;
background-color: #fafafa;
}
.title {
border-top: 1px solid #dadada;
position: relative;
width: 100%;
color: #868686;
font-size: 30px;
padding: 10px 10px;
transition: all 0.6s ease;
}
.secondary {
color: #acacac;
line-height: 20px;
font-size: 14px;
padding: 20px 0;
}
.title.tada2 {
transform: translateY(77px);
transition: all 0.6s ease;
}
.caret-wrap {
transform: rotate(90deg);
transition: all 0.6s ease;
}
.caret {
display: block;
transform: scaleY(2);
}
.tada2 .caret-wrap {
transform: rotate(270deg);
}
Raw
jsbin.giguti.js
setTimeout(function() {
$('.present').toggleClass('tada');
$('.title').toggleClass('tada2');
},2000);
$('.toggle-tada').click(function() {
$('.present').toggleClass('tada');
$('.title').toggleClass('tada2');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment