Ajax Loader
×
HTML 
<section id="recorrido" class="black">
1
<section id="recorrido" class="black">
2
    <div class="content">
3
        <div class="text_desc">
4
            <span class="kilo_dat">0Kms</span><br><span class="ruta_desc">Partida neutra, Las Cascadas hasta Puerto Klocker. Asfalto</span>
5
        </div>
6
    </div>
7
    <div class="ruta content cf">
8
        <div class="drag col span-2">
9
            <div class="barra">
10
                <span class="alti">100Msnm</span>
11
                <span class="kilo">PARTIDA</span>
12
            </div>
13
            <img src="http://s.cdpn.io/953/path.svg" alt="" width="100%" heigth="100%">
14
            <div id="recor"></div>
15
            <p class="pie">Haz click o arrastra</p>
16
        </div>
17
        <div class="col span-2">
18
            <div class="marcas"></div>
19
            <div class="volcan"></div>
20
        </div>
21
    </div>
22
</section>
23
 
24
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
25
<script src="http://s.cdpn.io/953/jquery-ui.min.js"></script>
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,900);
1
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,900);
2
 
3
* {
4
  margin: 0;
5
  padding: 0;
6
}
7
 
8
html,
9
body {
10
  height: 100%;
11
  overflow: hidden;
12
}
13
 
14
body {
15
  background: #222;
16
  font-family: 'Lato', sans-serif;
17
}
18
 
19
.content {
20
  position: relative;
21
  margin: 0 auto;
22
  width: 960px;
23
}
24
 
25
.span-2 {
26
  width: 49.2%;
27
}
28
 
29
.col {
30
  display: block;
31
  position: relative;
32
  float:left;
33
  margin: 0 0 2% 1.6%;
34
}
35
 
36
.col:first-child { margin-left: 0; }
37
 
38
.black{
39
  background-color: #333;
40
  color: #FFF;
41
}
42
 
43
.black a{
44
  color: #FF3333;
45
}
46
 
47
#recorrido {
48
  width: 100%;
49
}
50
 
51
.marcas {
52
  background-image: url(http://s.cdpn.io/953/secuencia.svg);
53
  background-position: 0 0;
54
  position: absolute;
55
  top: 0;
56
  left: 0;
57
  width: 480px;
58
  height: 425px;
59
  z-index: 10;
60
}
61
 
62
.volcan {
63
  background-image: url(http://s.cdpn.io/953/aereo_trans.png);
64
  content: "";
65
  position: absolute;
66
  top: 2px;
67
  left: 2px;
68
  width: 480px;
69
  height: 425px;
70
}
71
 
72
.ruta {
73
  text-align: center;
74
  height: 430px;
75
}
76
 
77
.mas_info {
78
  margin-top: 2em;
79
  font-weight: 300;
80
  text-align: center;
81
}
82
 
83
.mas_info a {
84
  margin: 1em auto 0 auto;
85
}
86
 
87
.text_desc {
88
  padding: 2em 0;
89
  text-align: center;
90
}
91
 
92
.drag {
93
  margin-top: 8em;
94
  height: 225px;
95
}
96
 
97
.drag img {
98
  height: 220px;
99
}
100
 
101
.barra {
102
  background: #FF3333;
103
  position: absolute;
104
  bottom: 0;
105
  left: 0;
106
  width: 1px;
107
  height: 120%;
108
}
109
 
110
.kilo_dat {
111
  font-size: 4em;
112
  font-weight: 100;
113
}
114
 
115
.ruta_desc {
116
  font-weight: 300;
117
}
118
 
119
.alti,
120
.kilo {
121
  background: #222;
122
  box-shadow: 0 0 6px #444,
123
              0 2px 2px #000;
124
  display: block;
125
  position: absolute;
126
  font-weight: 300;
127
  padding: 2px 4px;
128
  -webkit-transition: all 200ms ease-in-out;
129
  -moz-transition: all 200ms ease-in-out;
130
  -ms-transition: all 200ms ease-in-out;
131
  -o-transition: all 200ms ease-in-out;
132
  transition: all 200ms ease-in-out;
133
}
134
 
135
.alti {
136
  bottom: 5%;
137
  left: 0;
138
}
139
 
140
.kilo {
141
  top: -10px;
142
  left: 0;
143
}
144
 
145
.option {
146
  position: relative;
147
  padding-bottom: 1em;
148
  text-align: center;
149
}
150
 
151
.pie {
152
  color: #FFF;
153
  text-align: left;
154
  font-size: 0.7em;
155
  font-weight: 300;
156
  line-height: 5em;
157
}
158
 
159
/* configuraciones slider */
160
 
161
.ui-slider-horizontal {
162
    border-bottom: 5px solid #555a69;
163
    cursor:pointer;
164
    width: 100%;
165
    height:100%;
166
    position: absolute;
167
    left: 0;
168
    top: 0;
169
}
170
 
171
.ui-slider-range {
172
    position:absolute;
173
    left:0; bottom:0;
174
    width:100%;
175
}
176
 
177
.ui-slider-handle {
178
    background:#FF3333;
179
    box-shadow: 0 0 6px #444,
180
                0 2px 2px #000;
181
    border-radius:100%;
182
    cursor:pointer;
183
    position:absolute;
184
    bottom:  -0.8em;
185
    margin-left: -.6em;
186
    width:20px;
187
    height:20px;
188
}
189
 
190
.ui-slider-handle:focus {
191
    box-shadow: 0 0 4px #555,
192
                0 1px 2px #000;
193
    outline:none;
194
}
195
 
196
/* ClearFix */
197
 
198
.cf:before,
199
.cf:after {
200
    content: " ";
201
    display: table;
202
}
203
 
204
.cf:after {
205
    clear: both;
206
}
207
 
208
.cf {
209
    *zoom: 1;
210
}
 
JavaScript 
(function () {
1
(function () {
2
 
3
    // altimetría
4
 
5
    var barra = $('.barra'),
6
        alti = $('.alti'),
7
        kilo = $('.kilo'),
8
        ruta_desc = $('.ruta_desc'),
9
        marca = $('.marcas'),
10
        marcaW = marca.width(),
11
        marcaH = marca.height();
12
 
13
    $('#recor').slider({
14
        range: 'min',
15
        min: 0,
16
        max: 77,
17
        step: 1,
18
        value: 0,
19
        slide: function (e, ui) {
20
            var valor = (ui.value);
21
 
22
            var unidad = 'Msnm';
23
 
24
            if (valor >= 0) {
25
                kilo.css('color', '#FFFFFF');
26
                ruta_desc.text('Partida neutra, Las Cascadas hasta Puerto Klocker. Asfalto');
27
                alti.css('bottom', 5 + '%').text('100' + unidad);
28
                marca.css('background-position', '0 0');
29
            }
30
            if (valor >= 7) {
31
                kilo.css('color', '#FF3333');
32
                ruta_desc.text('Pto. Klocler, desvío hacia Refugio la Picada. Ripio.');
33
            }
34
            if (valor >= 27) {
35
                kilo.css('color', '#FFFFFF');
36
                ruta_desc.text('Refugio la Picada. Arena Volcánica. 1er. Abastecimiento Isotónico.');
37
            }
38
            if (valor >= 30) {
39
                kilo.css('color', '#FF3333');
40
                ruta_desc.text('Inicio Paso Desolación. Arena Volcánica.');
41
            }
42
            if (valor >= 42) {
43
                kilo.css('color', '#FFFFFF');
44
                ruta_desc.text('Lago Todos los Santos – Petrohué, Ripio, camino público. ');
45
            }
46
            if (valor >= 48) {
47
                kilo.css('color', '#FF3333');
48
                ruta_desc.text('Saltos del Petrohué, asfalto, camino público.');
49
            }
50
            if (valor >= 50) {
51
                kilo.css('color', '#FFFFFF');
52
                ruta_desc.text('Inicio Sendero El Solitario, raices, senda, corrida volcánica. 2do. Abastecimiento Isotónico.');
53
            }
54
            if (valor >= 56) {
55
                kilo.css('color', '#FF3333');
56
                ruta_desc.text('Bajada por  la Burbuja hasta Lago Llanquihue. Asfalto.');
57
            }
58
            if (valor >= 59) {
59
                kilo.css('color', '#FFFFFF');
60
                ruta_desc.text('Ribera del lago y faldas del volcán, camino público.  Nueva ruta asfaltada con ciclovía.');
61
            }
62
            if (valor >= 77) {
63
                kilo.css('color', '#FF3333');
64
                ruta_desc.text('Meta en Las Cascadas.');
65
            }
66
 
67
            // altimetría
68
 
69
            if (valor >= 9) {
70
                alti.css('bottom', 10 + '%').text('200' + unidad);
71
                marca.css('background-position', -(marcaW) + 'px 0');
72
            }
73
            if (valor >= 12) {
74
                alti.css('bottom', 20 + '%').text('300' + unidad);
75
                marca.css('background-position', -(marcaW * 2) + 'px 0');
76
            }
77
            if (valor >= 18) {
78
                alti.css('bottom', 35 + '%').text('400' + unidad);
79
                marca.css('background-position', -(marcaW * 3) + 'px 0');
80
            }
81
            if (valor >= 21) {
82
                alti.css('bottom', 45 + '%').text('500' + unidad);
83
                marca.css('background-position', '0px ' + -(marcaH) + 'px');
84
            }
85
            if (valor >= 23) {
86
                alti.css('bottom', 55 + '%').text('600' + unidad);
87
                marca.css('background-position', -(marcaW) + 'px ' + -(marcaH) + 'px');
88
            }
89
            if (valor >= 25) {
90
                alti.css('bottom', 60 + '%').text('700' + unidad);
91
                marca.css('background-position', -(marcaW * 2) + 'px ' + -(marcaH) + 'px');
92
            }
93
            if (valor >= 26) {
94
                alti.css('bottom', 65 + '%').text('800' + unidad);
95
                marca.css('background-position', -(marcaW * 3) + 'px ' + -(marcaH) + 'px');
96
            }
97
            if (valor >= 27) {
98
                alti.css('bottom', 75 + '%').text('900' + unidad);
99
                marca.css('background-position', '0px ' + -(marcaH * 2) + 'px');
100
            }
101
 
102
            // altura maxima.
103
 
104
            if (valor >= 28) {
105
                alti.css('bottom', 85 + '%').text('1200' + unidad);
106
                marca.css('background-position', -(marcaW) + 'px ' + -(marcaH * 2) + 'px');
107
            }
108
            if (valor >= 31) {
109
                alti.css('bottom', 80 + '%').text('1000' + unidad);
110
                marca.css('background-position', -(marcaW * 2) + 'px ' + -(marcaH * 2) + 'px');
111
            }
112
            if (valor >= 33) {
113
                alti.css('bottom', 75 + '%').text('900' + unidad);
114
                marca.css('background-position', -(marcaW * 3) + 'px ' + -(marcaH * 2) + 'px');
115
            }
116
            if (valor >= 34) {
117
                alti.css('bottom', 60 + '%').text('700' + unidad);
118
                marca.css('background-position', '0px ' + -(marcaH * 3) + 'px');
119
            }
120
            if (valor >= 36) {
121
                alti.css('bottom', 25 + '%').text('400' + unidad);
122
                marca.css('background-position', -(marcaW) + 'px ' + -(marcaH * 3) + 'px');
123
            }
124
            if (valor >= 37) {
125
                alti.css('bottom', 20 + '%').text('300' + unidad);
126
                marca.css('background-position', -(marcaW * 2) + 'px ' + -(marcaH * 3) + 'px');
127
            }
128
            if (valor >= 43) {
129
                alti.css('bottom', 10 + '%').text('200' + unidad);
130
                marca.css('background-position', -(marcaW * 3) + 'px ' + -(marcaH * 3) + 'px');
131
            }
132
            if (valor >= 53) {
133
                alti.css('bottom', 20 + '%').text('300' + unidad);
134
                marca.css('background-position', '0px ' + -(marcaH * 4) + 'px');
135
            }
136
            if (valor >= 57) {
137
                alti.css('bottom', 10 + '%').text('200' + unidad);
138
                marca.css('background-position', -(marcaW) + 'px ' + -(marcaH * 4) + 'px');
139
            }
140
            if (valor >= 65) {
141
                alti.css('bottom', 5 + '%').text('100' + unidad);
142
                marca.css('background-position', -(marcaW * 2) + 'px ' + -(marcaH * 4) + 'px');
143
            }
144
            if (valor >= 70) {
145
                marca.css('background-position', -(marcaW * 3) + 'px ' + -(marcaH * 4) + 'px');
146
            }
147
            if (valor >= 76) {
148
                marca.css('background-position', '0 0');
149
            }
150
 
151
            barra.css({
152
                'left': (valor / 77 * 100) + '%'
153
            });
154
 
155
            $('.kilo_dat').text(valor + 'Kms');
156
 
157
            // ancho + relleno devuelto como numero entero
158
 
159
            var barraW = barra.width();
160
            barraW += parseInt(barra.css('padding-left'), 10) + parseInt(barra.css('padding-right'), 10);
161
 
162
            var altiW = alti.width();
163
            altiW += parseInt(alti.css('padding-left'), 10) + parseInt(alti.css('padding-right'), 10);
164
 
165
            var kiloW = kilo.width();
166
            kiloW += parseInt(kilo.css('padding-left'), 10) + parseInt(kilo.css('padding-right'), 10);
167
 
168
            if (valor <= 6) {
169
                kilo.css('margin-left', -barraW + 'px').text('PARTIDA');
170
                alti.css('margin-left', -barraW + 'px');
171
            } else if (valor >= 71) {
172
                kilo.css('margin-left', -(kiloW - 10) + 'px').text('META'); // fuck
173
                alti.css('margin-left', -(altiW - barraW) + 'px');
174
            } else {
175
                kilo.css('margin-left', (-kiloW) / 2 + 'px').text(valor + 'Kms');
176
                alti.css('margin-left', (-altiW) / 2 + 'px');
177
            }
178
 
179
        }
180
    });
181
})();
 

altimetry

CSSDeck G+