This repository was archived by the owner on Dec 28, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
177 lines (160 loc) · 8.31 KB
/
index.html
File metadata and controls
177 lines (160 loc) · 8.31 KB
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html>
<head>
<title>VisualScrollyTelling: The KING</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/estilo.css" type="text/css">
<script src ="lib/d3.js"></script>
<script src ="lib/crossfilter.js"></script>
<script src="lib/dc.min.js"></script>
<link rel="stylesheet" href="css/estiloMJ.css" type="text/css">
</head>
<body>
<div class="row section mainBG" data-section-name="mainBG">
<ul id="scene">
<li id="mj1" class="layer" data-depth="-0.50"><img class="imgStart" src="images/jordan_solo.jpg" ></li>
<li id="lj1" class="layer" data-depth="+0.50"><img class="imgStart" src="images/lebron_solo.png" ></li>
</ul>
<div class="opening-title">
<p class="big">The</p>
<p class="small">Real </p>
<p class="big">King</p>
<a href="#infoMJ">
<div class="arrow-down">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
</div>
<div class="row section infoMJ" data-section-name="infoMJ">
<div id="prueba" class="contentMJ">
<div class="box-story typewriter">
<p>Roma no se construyó en un día, al igual que la leyenda de estos dos grandes jugadores.
<br>Dos épocas separan a estos dos reyes del baloncesto, pero el debate a día de hoy, aún está servido.
<br><br>¿Quién es mejor: Michael Jordan o Lebron James?</p>
</div>
<!--
<div id="pie">
<div class="popup" onclick="disball();myMJChart();">
<img id="ball" style="cursor: pointer;" src="images/ball2.png">
<span class="popuptext" id="myPopup"></span>
</div>
</div>-->
</div>
<div class="inicioDerecha">
<h1 class="leyenda-chart">Partidos jugados por años</h1>
<div id="chartYears">
</div>
<div class='containerbutton'>
<span class='pulse-button' onclick="cargarGrafica();">Lebron</span>
</div>
</div>
</div>
<div class="row section bothHistory" data-section-name="bothHistory">
<header class="mast__header">
<h1 class="mast__title js-spanize">Michael Jordan</h1>
<hr class="sep"/>
<p class="mast__text js-spanize">
Estadísticas de una leyenda.
</p>
<div class="containergrid">
<div class="box">
<p>% Tiros anotados</p>
<svg id="animated1" viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="#E5111F"/>
<path id="progress1" stroke-linecap="round" stroke-width="5" stroke="#fff" fill="none"
d="M50 10
a 40 40 0 0 1 0 80
a 40 40 0 0 1 0 -80">
</path>
<text id="count1" x="50" y="50" text-anchor="middle" dy="7" font-size="20">49%</text>
</svg>
</div>
<div class="box">
<p>Media partidos jugado al año</p>
<svg id="animated2" viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="#E5111F"/>
<path id="progress2" stroke-linecap="round" stroke-width="5" stroke="#fff" fill="none"
d="M50 10
a 40 40 0 0 1 0 80
a 40 40 0 0 1 0 -80">
</path>
<text id="count2" x="50" y="50" text-anchor="middle" dy="7" font-size="20">72</text>
</svg>
</div>
<div class="box">
<p>% Tiros libres</p>
<svg id="animated3" viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="#E5111F"/>
<path id="progress3" stroke-linecap="round" stroke-width="5" stroke="#fff" fill="none"
d="M50 10
a 40 40 0 0 1 0 80
a 40 40 0 0 1 0 -80">
</path>
<text id="count3" x="50" y="50" text-anchor="middle" dy="7" font-size="20">83%</text>
</svg>
</div>
<div class="box">
<p>% de triples</p>
<svg id="animated4" viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="#E5111F"/>
<path id="progress4" stroke-linecap="round" stroke-width="5" stroke="#fff" fill="none"
d="M50 10
a 40 40 0 0 1 0 80
a 40 40 0 0 1 0 -80">
</path>
<text id="count4" x="50" y="50" text-anchor="middle" dy="7" font-size="20">32%</text>
</svg>
</div>
</div>
</header>
</div>
<div class="row section infoLJ" data-section-name="infoLJ">>
<div class="contentLJ">
<div class="loading wave">Lebron James</div>
<div id="storyLJ" class="box-story2">
<p>Lebron, aún en activo, intenta superar todas las estadísticas del legendario Michael Jordan.
<br>En la gráfica redonda, podemos apreciar la cantidad de partidos jugados en cada año, mientras que en la de filas se pueden ver los puntos anotados.
<br><br>¿Hasta cuándo podrá mejorar sus números?</p>
</div><span style="color:white;">Partidos jugados/año</span>
<div id="chart-years"></div>
<div id="chart-stats"></div>
<div id="chart-row-team"><span style="color:white;">Puntos anotados por partido/año</span></div>
</div>
</div>
<div class="row section choose" data-section-name="choose">
<ul id="contentChoose">
<li id="MJFace" class="layer" data-depth="-0.50"><img class="imgChoose" id="pic" src="images/jordan_solo_preking.png" onclick="changeImage()"></li>
<li id="LJFace" class="layer" data-depth="+0.50"><img class="imgChoose" id="pic2" src="images/lebron_solo_preking.png" onclick="changeImage2()"></li>
</ul>
<div id="textochoose">
Choose
<div id=flip>
<div><div>the best</div></div>
<div><div>the real</div></div>
<div><div>the right</div></div>
</div>
<span class="kingbig">king!</span>
</div>
</div>
<script src="js/ChoosePlayer.js"></script>
<script src="js/chartJordan.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="lib/parallax.js"></script>
<script>
var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);
</script>
<script src="js/controller-scrollify.js"></script>
<script src="js/jquery.scrollify.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js'></script>
<script src="js/MJAnimation.js"></script>
<script src="js/graficaYears.js"></script>
<script src="js/lebronChart.js"></script>
</body>
</html>