Parallax Scrolling funciona extrao
Publicado por abel antonio (1 intervención) el 20/01/2015 00:04:33
Buenas tardes, he venido a este foro para ver si alguien me puede ayudar con el problema que se me está presentando:
Estoy desarrollando un sitio web para la empresa donde trabajo, para ello se me pidio que el sitio consistiera en una sola pagina dividida en secciones y que por medio del scrolling parallax pudiera moverme entre secciones utilizando enlaces hacia dichas secciones en el menu principal.
La estructura de la pagina es la siguiente:
En la seccion 6 o slide6 tengo un formulario de contacto, todos los demas slides contienen imagenes diseñadas que solo incorporo con unos divs. Hasta donde se ve la pagina esta bien, no salen más errores. Pero cada vez que abro el sitio ya sea abriendo el archivo html con un navegador o checandolo en el servidor, lo primero que se reedirige es al slide 6 del formulario, es decir no empieza donde debería que es en el slide 1.
Estoy desarrollando un sitio web para la empresa donde trabajo, para ello se me pidio que el sitio consistiera en una sola pagina dividida en secciones y que por medio del scrolling parallax pudiera moverme entre secciones utilizando enlaces hacia dichas secciones en el menu principal.
La estructura de la pagina es la siguiente:
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
<!DOCTYPE html>
<html>
<!--head--><head>
<!--title--><title>Dimakers</title>
<!--metadata--><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta property="og:title" content="Dimakers">
<meta name="keywords" content="Web, Apps, Develop, Digital, World, Dimakers, Saltillo, Coahuila">
<meta name="description" content="Web development, Apps development and Strategy engineering">
<meta property="og:site_name" content="Dimakers">
<meta property="og:type" content="website">
<link href="http://www.google-analytics.com/" rel="dns-prefetch">
<link href="http://ajax.googleapis.com/" rel="dns-prefetch">
<!--CSS--><link rel="css/style.min.css">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<!--icons--><link rel="shortcut icon" href="img/logos/logo mini.png">
<link rel="apple-touch-icon" href="img/iconified/apple-touch-icon-152x152.png">
<!--JS--><script src="js/modernizr-2.6.2.min.js"></script>
<script async src="js/ga.js"></script>
<script src="js/modernizr.js"></script>
</head><!--end head-->
<!--body--><body bgcolor="#000000">
<!--navbar--><div class = "navbar navbar-inverse navbar-fixed-top" style="box-shadow: 0px 1px 3px #CCC;"">
<!--container-->
<div class = "container">
<!--logo / name of conpany-->
<a href="#slide1" class="navbar-brand" style="font-size:25px"><p style="color:#FFF"><label style="color:#F00">[ </label> D I M A K E R S <label style="color:#F00">]</label></p></a>
<!--toggle button--><button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button><!--end toggle button-->
<!--menubar--><div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li><a href="#slide1">Home</a></li>
<li><a href="#slide2">Vision</a></li>
<li><a href="#slide3">What we do</a></li>
<li><a href="#slide4">Projects</a></li>
<li><a href="#slide5">Location</a></li>
<li><a href="#slide6">Contact</a></li>
</ul>
</div><!--end menubar-->
</div><!--end container-->
</div><!--end navbar-->
<!--sliders--> <!--slide1--><div id="slide1">
<!--container--> <!--end container--></div><!--end slide1-->
<!--slide2--><div id="slide2">
<!--container--> <!--end container--></div><!--end slide2-->
<!--slide3--><div id="slide3">
<!--container--> <!--end container--> <!--container--> <!--end container--></div><!--end slide3-->
<!--slide4--><div id="slide4">
<!--container--> <!--end container--> <!--container--> <!--end container--> <!--end slide4--> <!--slide5--><div id="slide5">
<!--container--> <!--end container--> <!--end slide5--> <!--slide6--><div id="slide6">
<!--container--><div class="container" style="position:absolute; left:-13px; top:5050px">
<img src="img/pagina 6/texto.png" width="50%" height="50%" class="img-responsive"/>
</div><!--end container-->
<div class="container" style="position: absolute; top: 5200px; bottom: -2px; height: -249609727px;" align="center">
<!--form--><form name="form1" action="valida-form1.php" method="post">
<table width="100" border="0" class="table-responsive table-condensed">
<tr>
<td>
<p>
<label style="font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:30px"><i>your name</i></label>
</p>
<input type="text" name="nombre" required autofocus style="color:#000"/>
</td>
<td rowspan="2">
<p>
<label style="font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:30px"><i>your message</i></label>
</p>
<textarea name="mensaje" required autofocus rows="4" cols="20" style="color:#000"></textarea>
</td>
</tr>
<tr>
<td>
<p>
<label style="font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:30px"><i>e-mail</i></label>
</p>
<input type="email" name="email" required autofocus style="color:#000"/>
</td>
</tr>
<tr>
<td>
<p>
<label style="font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:30px"><i>what do you want to know?</i></label>
</p>
<select name="opciones" autofocus class="select">
<option>Select an option</option>
<option value="Mobile apps">Mobile apps</option>
<option value="Web develop">Web develop</option>
<option value="Strategy engineering">Strategy engineering</option>
</select>
</br>
</td>
<td>
<input type="submit" name="send" value="Send" class="button"/>
</td>
</tr>
</table><!--end table-->
</form><!--end form-->
</div><!--end container-->
</div><!--end slide6-->
<!--footer--> <!--end footer--> <!--JS--><script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src = "js/bootstrap.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23388808-5']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script src="js/scripts.min.js"></script><!--end JS-->
</body><!--end body-->
</html>
En la seccion 6 o slide6 tengo un formulario de contacto, todos los demas slides contienen imagenes diseñadas que solo incorporo con unos divs. Hasta donde se ve la pagina esta bien, no salen más errores. Pero cada vez que abro el sitio ya sea abriendo el archivo html con un navegador o checandolo en el servidor, lo primero que se reedirige es al slide 6 del formulario, es decir no empieza donde debería que es en el slide 1.
Valora esta pregunta
0