Skip to content

Instantly share code, notes, and snippets.

@mreis1

mreis1/index.html

Created January 28, 2015 00:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mreis1/379caee427a2dc545568 to your computer and use it in GitHub Desktop.
Save mreis1/379caee427a2dc545568 to your computer and use it in GitHub Desktop.
Download ZIP
This is a template for angular experiments // source http://jsbin.com/jivoyu/3
Raw
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<meta name="description" content="This is a template for angular experiments" />
<link href='http://fonts.googleapis.com/css?family=Signika+Negative:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://s.cdpn.io/16327/sizzle.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<style id="jsbin-css">
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
body{
font-family:Asap;
background-color:#1d1d1d;
color:white;
margin:20px;
}
#banner {
position:relative;
-webkit-backface-visibility:hidden;
width:300px;
height:250px;
background:white;
overflow:hidden;
float:left;
}
.panel {
position:absolute;
width:300px;
height:250px;
overflow:hidden;
}
#panel1 {
background: #a02600;
}
#panel2 {
top:260px;
background: url(http://s.cdpn.io/16327/burger.jpg);
}
#panel1 h1 {
position: relative;
font-size:40px;
line-height:240px;
text-align:center;
width:300px;
}
#panel2 h2{
margin: 0;
position: absolute;
top: 188px;
width: 260px;
font-size: 22px;
text-align: center;
padding: 20px;
background: #a02600;
}
#panel3 {
top:520px;
}
#panel3 #info{
position:absolute;
top:125px;
width:100%;
padding:10px;
height:125px;
background: #a02600;
}
#panel3 h1 {
font-size:34px;
font-weight:700;
letter-spacing: 1px;
}
#panel3 li {
position:relative;
margin-top:10px;
color: #ffa488;
}
#panel3 #orderNow {
position:absolute;
top:60px;
left:180px;
background:#ffc600;
color:#000;
font-size:16px;
font-weight:bold;
padding:10px;
border-radius:10px;
border: 4px solid transparent;
}
#panel3 #orderNow:hover {
background:#ffaa00;
border: 4px solid #fff;
cursor: pointer;
}
/* --- stats --- */
#stats {
font-family: Signika Negative, Asap, sans-serif;
font-weight:300;
font-size:18px;
float:left;
color:#ddd;
margin-left:20px;
}
#stats div {
margin-bottom:10px;
}
#stats div span {
font-size:22px;
color:white;
}
#restart {
visibility:hidden;
}
</style>
</head>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
<body>
<div id="banner">
<div class="panel" id="panel1">
<h1>hungry?</h1>
</div>
<div class="panel" id="panel2">
<h2>How about now?</h2>
</div>
<div class="panel" id="panel3">
<div id="info">
<h1>Burger Boy</h1>
<ul>
<li>Free delivery in NYC</li>
<li>Open 24hrs</li>
</ul>
<div id="orderNow">order now</div>
</div>
</div>
</div>
<div id="stats">
<div>duration: <span id="duration">0</span> 1 iteration</div>
<div>totalDuration: <span id="totalDuration">0</span> all iterations including repeatDelays</div>
<div>repeat: <span id="repeatCount">0</span> of <span id="totalRepeatCount"></span></div>
<div>time: <span id="time">1</span></div>
<div>totalTime: <span id="totalTime">1</span></div>
<div>progress: <span id="progress">1</span></div>
<div>totalProgress: <span id="totalProgress">1</span></div>
<button id="restart">restart()</button>
</div>
<script id="jsbin-javascript">
var $ = Sizzle,
$panel1 = $("#panel1"),
$panel2 = $("#panel2"),
$panel3 = $("#panel3"),
$panel1Text = $("#panel1 h1"),
$panel2Text = $("#panel2 h2"),
$info = $("#info"),
$list = $("li"),
$orderNow = $("#orderNow"),
tl;
var tl = new TimelineMax({delay:0.5, repeat:3, repeatDelay:2, onUpdate:updateStats, onRepeat:updateReps, onComplete:restart});
//banner animation code (only 11 lines)
tl.from(panel1, 0.5, {autoAlpha:0})
.from($panel1Text, 0.5, {scale:0.5, autoAlpha:0, ease:Back.easeOut})
.set($panel2, {top:0}, "+=2")
.from($panel2, 0.2, {autoAlpha:0, scale:1.5})
.from($panel2Text, 0.2, {top:250}, "+=0.5")
.to($panel2Text, 0.2, {top:250}, "+=2")
.set($panel3, {top:0}, "final")
.from($info, 0.5, {top:250}, "final")
.to($panel2, 0.5, {top:-60}, "final")
.staggerFrom($list, 0.3, {autoAlpha:0, left:50}, 0.1, "+=0.2")
.from($orderNow, 0.5, {scale:0, autoAlpha:0, ease:Back.easeOut});
var duration = document.getElementById("duration"),
totalDuration = document.getElementById("totalDuration"),
repeatCount = document.getElementById("repeatCount"),
totalRepeatCount = document.getElementById("totalRepeatCount"),
time = document.getElementById("time"),
totalTime = document.getElementById("totalTime"),
progress = document.getElementById("progress"),
totalProgress = document.getElementById("totalProgress"),
restart = document.getElementById("restart"),
reps = 0;
function updateReps() {
reps++;
repeatCount.innerHTML = reps;
}
function updateStats() {
time.innerHTML = tl.time().toFixed(2);
totalTime.innerHTML = tl.totalTime().toFixed(2);
progress.innerHTML = tl.progress().toFixed(2);
totalProgress.innerHTML = tl.totalProgress().toFixed(2);
}
function reset() {
reps = 0;
duration.innerHTML = tl.duration().toFixed(2);
totalDuration.innerHTML = tl.totalDuration().toFixed(2);
repeatCount.innerHTML = reps;
totalRepeatCount.innerHTML = tl.repeat();
}
function restart() {
TweenLite.to(restart, 0.4, {autoAlpha:1})
}
restart.onclick = function() {
reset();
TweenLite.set(restart, {autoAlpha:0})
tl.restart();
}
reset();
</script>
<script id="jsbin-source-css" type="text/css">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
body{
font-family:Asap;
background-color:#1d1d1d;
color:white;
margin:20px;
}
#banner {
position:relative;
-webkit-backface-visibility:hidden;
width:300px;
height:250px;
background:white;
overflow:hidden;
float:left;
}
.panel {
position:absolute;
width:300px;
height:250px;
overflow:hidden;
}
#panel1 {
background: #a02600;
}
#panel2 {
top:260px;
background: url(http://s.cdpn.io/16327/burger.jpg);
}
#panel1 h1 {
position: relative;
font-size:40px;
line-height:240px;
text-align:center;
width:300px;
}
#panel2 h2{
margin: 0;
position: absolute;
top: 188px;
width: 260px;
font-size: 22px;
text-align: center;
padding: 20px;
background: #a02600;
}
#panel3 {
top:520px;
}
#panel3 #info{
position:absolute;
top:125px;
width:100%;
padding:10px;
height:125px;
background: #a02600;
}
#panel3 h1 {
font-size:34px;
font-weight:700;
letter-spacing: 1px;
}
#panel3 li {
position:relative;
margin-top:10px;
color: #ffa488;
}
#panel3 #orderNow {
position:absolute;
top:60px;
left:180px;
background:#ffc600;
color:#000;
font-size:16px;
font-weight:bold;
padding:10px;
border-radius:10px;
border: 4px solid transparent;
}
#panel3 #orderNow:hover {
background:#ffaa00;
border: 4px solid #fff;
cursor: pointer;
}
/* --- stats --- */
#stats {
font-family: Signika Negative, Asap, sans-serif;
font-weight:300;
font-size:18px;
float:left;
color:#ddd;
margin-left:20px;
}
#stats div {
margin-bottom:10px;
}
#stats div span {
font-size:22px;
color:white;
}
#restart {
visibility:hidden;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var $ = Sizzle,
$panel1 = $("#panel1"),
$panel2 = $("#panel2"),
$panel3 = $("#panel3"),
$panel1Text = $("#panel1 h1"),
$panel2Text = $("#panel2 h2"),
$info = $("#info"),
$list = $("li"),
$orderNow = $("#orderNow"),
tl;
var tl = new TimelineMax({delay:0.5, repeat:3, repeatDelay:2, onUpdate:updateStats, onRepeat:updateReps, onComplete:restart});
//banner animation code (only 11 lines)
tl.from(panel1, 0.5, {autoAlpha:0})
.from($panel1Text, 0.5, {scale:0.5, autoAlpha:0, ease:Back.easeOut})
.set($panel2, {top:0}, "+=2")
.from($panel2, 0.2, {autoAlpha:0, scale:1.5})
.from($panel2Text, 0.2, {top:250}, "+=0.5")
.to($panel2Text, 0.2, {top:250}, "+=2")
.set($panel3, {top:0}, "final")
.from($info, 0.5, {top:250}, "final")
.to($panel2, 0.5, {top:-60}, "final")
.staggerFrom($list, 0.3, {autoAlpha:0, left:50}, 0.1, "+=0.2")
.from($orderNow, 0.5, {scale:0, autoAlpha:0, ease:Back.easeOut});
var duration = document.getElementById("duration"),
totalDuration = document.getElementById("totalDuration"),
repeatCount = document.getElementById("repeatCount"),
totalRepeatCount = document.getElementById("totalRepeatCount"),
time = document.getElementById("time"),
totalTime = document.getElementById("totalTime"),
progress = document.getElementById("progress"),
totalProgress = document.getElementById("totalProgress"),
restart = document.getElementById("restart"),
reps = 0;
function updateReps() {
reps++;
repeatCount.innerHTML = reps;
}
function updateStats() {
time.innerHTML = tl.time().toFixed(2);
totalTime.innerHTML = tl.totalTime().toFixed(2);
progress.innerHTML = tl.progress().toFixed(2);
totalProgress.innerHTML = tl.totalProgress().toFixed(2);
}
function reset() {
reps = 0;
duration.innerHTML = tl.duration().toFixed(2);
totalDuration.innerHTML = tl.totalDuration().toFixed(2);
repeatCount.innerHTML = reps;
totalRepeatCount.innerHTML = tl.repeat();
}
function restart() {
TweenLite.to(restart, 0.4, {autoAlpha:1})
}
restart.onclick = function() {
reset();
TweenLite.set(restart, {autoAlpha:0})
tl.restart();
}
reset();
</script></body>
</html>
Raw
jsbin.jivoyu.css
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
body{
font-family:Asap;
background-color:#1d1d1d;
color:white;
margin:20px;
}
#banner {
position:relative;
-webkit-backface-visibility:hidden;
width:300px;
height:250px;
background:white;
overflow:hidden;
float:left;
}
.panel {
position:absolute;
width:300px;
height:250px;
overflow:hidden;
}
#panel1 {
background: #a02600;
}
#panel2 {
top:260px;
background: url(http://s.cdpn.io/16327/burger.jpg);
}
#panel1 h1 {
position: relative;
font-size:40px;
line-height:240px;
text-align:center;
width:300px;
}
#panel2 h2{
margin: 0;
position: absolute;
top: 188px;
width: 260px;
font-size: 22px;
text-align: center;
padding: 20px;
background: #a02600;
}
#panel3 {
top:520px;
}
#panel3 #info{
position:absolute;
top:125px;
width:100%;
padding:10px;
height:125px;
background: #a02600;
}
#panel3 h1 {
font-size:34px;
font-weight:700;
letter-spacing: 1px;
}
#panel3 li {
position:relative;
margin-top:10px;
color: #ffa488;
}
#panel3 #orderNow {
position:absolute;
top:60px;
left:180px;
background:#ffc600;
color:#000;
font-size:16px;
font-weight:bold;
padding:10px;
border-radius:10px;
border: 4px solid transparent;
}
#panel3 #orderNow:hover {
background:#ffaa00;
border: 4px solid #fff;
cursor: pointer;
}
/* --- stats --- */
#stats {
font-family: Signika Negative, Asap, sans-serif;
font-weight:300;
font-size:18px;
float:left;
color:#ddd;
margin-left:20px;
}
#stats div {
margin-bottom:10px;
}
#stats div span {
font-size:22px;
color:white;
}
#restart {
visibility:hidden;
}
Raw
jsbin.jivoyu.js
var $ = Sizzle,
$panel1 = $("#panel1"),
$panel2 = $("#panel2"),
$panel3 = $("#panel3"),
$panel1Text = $("#panel1 h1"),
$panel2Text = $("#panel2 h2"),
$info = $("#info"),
$list = $("li"),
$orderNow = $("#orderNow"),
tl;
var tl = new TimelineMax({delay:0.5, repeat:3, repeatDelay:2, onUpdate:updateStats, onRepeat:updateReps, onComplete:restart});
//banner animation code (only 11 lines)
tl.from(panel1, 0.5, {autoAlpha:0})
.from($panel1Text, 0.5, {scale:0.5, autoAlpha:0, ease:Back.easeOut})
.set($panel2, {top:0}, "+=2")
.from($panel2, 0.2, {autoAlpha:0, scale:1.5})
.from($panel2Text, 0.2, {top:250}, "+=0.5")
.to($panel2Text, 0.2, {top:250}, "+=2")
.set($panel3, {top:0}, "final")
.from($info, 0.5, {top:250}, "final")
.to($panel2, 0.5, {top:-60}, "final")
.staggerFrom($list, 0.3, {autoAlpha:0, left:50}, 0.1, "+=0.2")
.from($orderNow, 0.5, {scale:0, autoAlpha:0, ease:Back.easeOut});
var duration = document.getElementById("duration"),
totalDuration = document.getElementById("totalDuration"),
repeatCount = document.getElementById("repeatCount"),
totalRepeatCount = document.getElementById("totalRepeatCount"),
time = document.getElementById("time"),
totalTime = document.getElementById("totalTime"),
progress = document.getElementById("progress"),
totalProgress = document.getElementById("totalProgress"),
restart = document.getElementById("restart"),
reps = 0;
function updateReps() {
reps++;
repeatCount.innerHTML = reps;
}
function updateStats() {
time.innerHTML = tl.time().toFixed(2);
totalTime.innerHTML = tl.totalTime().toFixed(2);
progress.innerHTML = tl.progress().toFixed(2);
totalProgress.innerHTML = tl.totalProgress().toFixed(2);
}
function reset() {
reps = 0;
duration.innerHTML = tl.duration().toFixed(2);
totalDuration.innerHTML = tl.totalDuration().toFixed(2);
repeatCount.innerHTML = reps;
totalRepeatCount.innerHTML = tl.repeat();
}
function restart() {
TweenLite.to(restart, 0.4, {autoAlpha:1})
}
restart.onclick = function() {
reset();
TweenLite.set(restart, {autoAlpha:0})
tl.restart();
}
reset();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment