This repository has been archived by the owner on Nov 26, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
/
reveal_1.html
97 lines (74 loc) · 6.83 KB
/
reveal_1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org/">
<head>
<link rel="stylesheet" href="./css/reveal.css">
</head>
<body ng-app="gridReveal" ng-controller="RevealController" >
<div id="stage" gs-scale >
<div id="header"></div>
<div id="grid"></div>
<button id="tile" class="pharrell" ng-click="showDetails(album)" aria-label="{{ album.aria.artist }}"></button>
<div id="nowPlaying"></div>
<div id="details" class="hidden" >
<div class="content">
<div id="status" ></div>
<div id="artist" ng-click="hideDetails()"></div>
<div id="circle" ></div>
<div id="playlist" >
<img ng-src="{{album.playlist}}">
</div>
<div id="album"></div>
</div>
</div>
</div>
<gs-timeline state="zoom" time-scale="{{ timeScale }}" done="notify(timeline)">
<gs-step target="#nowPlaying" style="z-index:100;" ></gs-step>
<gs-step target="#circle" style="display:block;scale:1.2;opacity:0" ></gs-step>
<gs-step target="#album" style="left:-400;top:-400;" ></gs-step>
<gs-step target="#details" style="display:none;" ></gs-step>
<gs-step target="#album" style="display:none;opacity:1" ></gs-step>
<gs-step target="#album" style="bounds:{{ album.from }}" ></gs-step>
<gs-step target="#details" style="display:block;" ></gs-step>
<gs-step target="#album" style="display:block;" ></gs-step>
<gs-step mark-position="start" position="0.08" ></gs-step>
<gs-step target="#nowPlaying" style="z-index:100; top:602" duration="0.2" position="start" ></gs-step>
<gs-step target="#playlist" style="display:none;" position="start" ></gs-step>
<gs-step target="#circle" style="opacity:1;" duration="0.01" position="start" ></gs-step>
<gs-step target="#status" style="opacity:1" duration="0.8" position="start" ></gs-step>
<gs-step target="#artist" style="opacity:1" duration="0.8" position="start" ></gs-step>
<gs-step target="#album" style="bounds:{{ album.switchOver }}" duration="0.33" position="start" ></gs-step>
<gs-step target="#circle" style="scale:4;" duration="0.3" position="start+=0.01" ></gs-step>
<gs-step target="#circle" style="scale:5;opacity:0.85" duration="0.1" position="start+=0.31" ></gs-step>
<gs-step target="#circle" style="opacity:0" duration="0.35" position="start+=0.5" ></gs-step>
<gs-step target="#circle" style="display:none" position="start+=1.2" ></gs-step>
<gs-step target="#playlist" style="bounds:{{ album.switchOver }};" position="start+=0.33" ></gs-step>
<gs-step target="#playlist" style="display:block;className:'';" duration="0.010" position="start+=0.33" ></gs-step>
<gs-step target="#album" style="opacity:0;display:none" duration="0.004" position="start+=0.33" ></gs-step>
<gs-step target="#playlist" style="className:'shadow'" position="start+=0.34" ></gs-step>
<gs-step target="#playlist" style="bounds:{{ album.to }}" duration="0.5" position="start+=0.34" ></gs-step>
</gs-timeline>
<gs-timeline state="unzoom" time-scale="{{ timeScale }}" >
<gs-step target="#circle" style="scale:5;display:block; opacity: 0" ></gs-step>
<gs-step mark-position="ready" ></gs-step>
<!--<gs-step target="#playlist" style="scale:1.05" duration="{{ pulse }}" ></gs-step>-->
<!--<gs-step target="#playlist" style="delay:{{ pulse }};scale:1.0" duration="{{ pulse }}" position="ready+={{ pulse }}"></gs-step>-->
<gs-step target="#circle" style="opacity:0.85" duration="0.05" ></gs-step>
<gs-step target="#circle" style="opacity:0.85" duration="0.05" ></gs-step>
<gs-step target="#circle" style="scale:4;opacity:1" duration="0.3" ></gs-step>
<gs-step target="#circle" style="scale:1.2;opacity:0" duration="0.6" position="ready+=0.3"></gs-step>
<gs-step mark-position="done" position="ready+=0.9"></gs-step>
<gs-step target="#circle" style="display:none" position="done" ></gs-step>
<gs-step target="#album" style="left:-400;top:-400;" position="done" ></gs-step>
<gs-step target="#album" style="display:none;opacity:1" position="done" ></gs-step>
<gs-step target="#album" style="bounds:{{ album.from }}" position="done" ></gs-step>
<gs-step target="#nowPlaying" style="z-index:-1;" position="done" ></gs-step>
<gs-step target="#details" style="display:none;" position="done" ></gs-step>
</gs-timeline>
<script src="../libs/jquery/2.1.1/jquery.js"></script>
<script src="../libs/gsap/1.14.2/TweenMax.js"></script>
<script src="../libs/angularjs/1.3.5/angular.js"></script>
<script type="text/javascript" src="../libs/angularjs-gsap/supplant.js"></script>
<script type="text/javascript" src="../libs/angularjs-gsap/timelines.js"></script>
<script type="text/javascript" src="./js/reveal_1.js"></script>
</body>
</html>