index-1.html 58 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <script async src="https://www.googletagmanager.com/gtag/js?id=UA-46001212-3"></script>
  5. <script>
  6. window.dataLayer = window.dataLayer || [];
  7. function gtag() {
  8. dataLayer.push(arguments);
  9. }
  10. gtag('js', new Date());
  11. gtag('config', 'UA-46001212-3');
  12. </script>
  13. <meta charset="UTF-8">
  14. <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
  15. <link rel="stylesheet" href="css/style-main.css">
  16. <link rel="stylesheet" href="css/animations.css">
  17. <link rel="stylesheet" href="css/animation-main.css">
  18. <link rel="stylesheet" href="css/loading.css">
  19. <link rel="stylesheet" href="css/icons-platform.css">
  20. <link rel="stylesheet" href="css/menu-main.css">
  21. <link rel="stylesheet" href="css/arrows.css">
  22. <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
  23. <title>Plataforma Educativa</title>
  24. </head>
  25. <body>
  26. <header id="menu" class="header hide">
  27. <a href="index.html" class="logo"><img id="#logo-menu" width="100%" src="img/logos/logo.png" alt="Logo"></a>
  28. <input class="menu-btn" type="checkbox" id="menu-btn" />
  29. <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
  30. <ul class="menu">
  31. <li><a id="link1" class="white-blue" href="index.html">Inicio</a></li>
  32. <li><a id="link2" class="white-blue" href="conocenos.html">Conócenos</a></li>
  33. <li><a id="link3" class="white-blue" href="funciones.html">Funciones</a></li>
  34. <li><a id="link4" class="white-blue" href="contacto.php">Contacto</a></li>
  35. <li><a id="covid" class="covid slideDown white-button" href="apoyo-covid-19.html">Apoyo COVID-19</a></li>
  36. </ul>
  37. </header>
  38. <section class="sections">
  39. <div class="relleno">
  40. <div class="streaming streamVisible">
  41. <div id="streaming-content" class="streaming-content">
  42. <h1 class="streaming-title">Clases en línea</h1>
  43. <p class="streaming-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, ab fugit laboriosam et natus nihil quas dolor? Ex distinctio expedita tenetur itaque, animi quasi autem suscipit amet cumque? Repellendus, ratione?</p>
  44. <div class="arrows-container">
  45. <div class="chevron-1 topArrow">
  46. <p class="flecha"><i class="icon-down-open"></i></p>
  47. </div>
  48. <div class="chevron-2 middleArrow">
  49. <p class="flecha"><i class="icon-down-open"></i></p>
  50. </div>
  51. <div class="chevron-3 bottomArrow">
  52. <p class="flecha"><i class="icon-down-open"></i></p>
  53. </div>
  54. </div>
  55. </div>
  56. </div>
  57. <div id="fondo-1" class="fondo-1"><img width="100%" src="img/main/fondo azul20.png" alt="Fondo"></div>
  58. <div id="fondo-2" class="fondo-2"><img width="100%" src="img/main/bolitas y estrellas0.png" alt="Fondo2"></div>
  59. <div id="fondo-3" class="fondo-3"><img width="100%" src="img/main/materias0.png" alt="Fondo3"></div>
  60. <div id="fondo-4" class="fondo-4"><img width="100%" src="img/main/compu0.png" alt="Fondo2"></div>
  61. <div id="part1" class="part1 topLeft"><img width="100%" height="100%" src="img/main/xl30.png" alt="Pieza1"></div>
  62. <div id="part2" class="part2 bottomLeft"><img width="100%" height="100%" src="img/main/x30.png" alt="Pieza3"></div>
  63. <div id="part3" class="part3 topRight"><img width="100%" height="100%" src="img/main/x20.png" alt="Pieza2"></div>
  64. <div id="part4" class="part4 bottomRight"><img width="100%" height="100%" src="img/main/x10.png" alt="Pieza4"></div>
  65. </div>
  66. <div class="separator">
  67. <img width="100%" height="100%" src="img/Separador1_10.png" alt="Separador">
  68. </div>
  69. <div class="zero-section">
  70. <div class="container">
  71. <div id="texto-0" class="content">
  72. <h1 class="title padding-2">Clases en línea</h1>
  73. <p class="description padding">Programa las sesiones e imparte videoconferecias con hasta 100 alumnos. Graba las sesiones, comparte tu pantallaa, escribe en la pizarra, interactúa en video con los participantes o utiliza el chat en vivo de las reuniones. Nuestra
  74. solución todo en uno te permite realizar múltiples sesiones simultáneas, evita que contrates otros servicios de streaming y lo mejor de todo, tu informaciónes completamente privada.</p>
  75. </div>
  76. <div class="img-container right">
  77. <img id="img-source-0" width="95%" src="img/zero/Animacion_00000.png" alt="Clases">
  78. </div>
  79. <div id="cam1" class="layer-one-s0"><img width="100%" src="img/zero/camara.png" alt="Cam"></div>
  80. <div id="cam2" class="layer-two-s0"><img width="100%" src="img/zero/camara.png" alt="Cam"></div>
  81. <div id="cam3" class="layer-three-s0"><img width="100%" src="img/zero/camara.png" alt="Cam"></div>
  82. <div id="dot1s0" class="layer-four-s0"><img src="img/Circulin0.png" alt="Dot"></div>
  83. <div id="dot2s0" class="layer-five-s0"><img src="img/Circulin0.png" alt="Dot"></div>
  84. <div id="plus1s0" class="layer-six-s0"><img src="img/Mas0.png" alt="Plus"></div>
  85. </div>
  86. </div>
  87. <div class="separator">
  88. <img width="100%" height="100%" src="img/Separador1_10.png" alt="Separador">
  89. </div>
  90. <div class="first-section">
  91. <div class="container">
  92. <div class="img-container left">
  93. <img id="img-source-1" width="85%" src="img/first/animacion 10.png" alt="Circulares">
  94. </div>
  95. <div id="texto" class="content">
  96. <h1 class="title">Circulares digitales</h1>
  97. <p class="description">Optimiza la comunicación entre alumnos, profesores y padres de familia, enviando circulares electrónicas de actividades y eventos.</p>
  98. </div>
  99. <div id="doc1" class="layer-one"><img width="100%" src="img/first/Document0.png" alt="Doc"></div>
  100. <div id="doc2" class="layer-two"><img width="100%" src="img/first/Document0.png" alt="Doc"></div>
  101. <div id="doc3" class="layer-three"><img width="100%" src="img/first/Document0.png" alt="Doc"></div>
  102. <div id="dot1" class="layer-four"><img src="img/Circulin0.png" alt="Dot"></div>
  103. <div id="dot2" class="layer-five"><img src="img/Circulin0.png" alt="Dot"></div>
  104. <div id="plus1" class="layer-six"><img src="img/Mas0.png" alt="Plus"></div>
  105. <div id="plus2" class="layer-seven"><img src="img/Mas0.png" alt="Plus"></div>
  106. </div>
  107. </div>
  108. <div class="separator">
  109. <img width="100%" height="100%" src="img/Separador1_10.png" alt="Separador">
  110. </div>
  111. <div class="second-section">
  112. <div class="container">
  113. <div id="texto-1" class="content">
  114. <h1 class="title">Administración de Tareas</h1>
  115. <p class="description">Los profesores pueden asignar tareas que son consultadas por alumnos y padres de familia. A través del sistema, el alumno mantiene un control de las tareas que ha completado y de aquellos que tiene por realizar. La programación de
  116. tareas permite incluir adjuntos de gran tamaño y vínculos directos a los contenidos, para el caso de los videos.</p>
  117. </div>
  118. <div id="loader-2" class="img-container right">
  119. <img id="img-source-2" width="85%" src="img/second/TR 10.png" alt="Administración">
  120. </div>
  121. <div id="book1" class="layer-one-s2"><img width="100%" src="img/second/cuadern0.png" alt="Libro"></div>
  122. <div id="book2" class="layer-two-s2"><img width="100%" src="img/second/Lapiz0.png" alt="Libro"></div>
  123. <div id="book3" class="layer-three-s2"><img width="100%" src="img/second/cuadern0.png" alt="Libro"></div>
  124. <div id="book4" class="layer-four-s2"><img width="100%" src="img/second/cuadern0.png" alt="Libro"></div>
  125. <div id="dot1s2" class="layer-five-s2"><img src="img/Circulin0.png" alt="Dor"></div>
  126. <div id="plus1s2" class="layer-six-s2"><img src="img/Mas0.png" alt="Plus"></div>
  127. <div id="plus2s2" class="layer-seven-s2"><img src="img/Mas0.png" alt="Plus"></div>
  128. <div id="plus3s2" class="layer-eight-s2"><img src="img/Mas0.png" alt="Plus"></div>
  129. </div>
  130. </div>
  131. <div class="separator">
  132. <img width="100%" height="100%" src="img/Separador1_10.png" alt="Separador">
  133. </div>
  134. <div class="third-section">
  135. <div class="container">
  136. <div id="loader-3" class="img-container">
  137. <img id="img-source-3" width="85%" src="img/third/Calendar10.png" alt="Calendario">
  138. </div>
  139. <div id="texto-2" class="content">
  140. <h1 class="title">Calendario de actividades</h1>
  141. <p class="description">Planifica las actividades del Colegio a lo largo del ciclo escolarde forma unificada.</p>
  142. </div>
  143. <div id="hoja1" class="layer-one-s3"><img width="100%" src="img/third/Hoja0.png" alt="Hoja"></div>
  144. <div id="copo1" class="layer-two-s3"><img width="100%" src="img/third/Copito0.png" alt="Copito"></div>
  145. <div id="copo2" class="layer-three-s3"><img width="100%" src="img/third/Copito0.png" alt="Copito"></div>
  146. <div id="dot1s3" class="layer-five-s3"><img src="img/Circulin0.png" alt="Dot"></div>
  147. <div id="plus1s3" class="layer-six-s3"><img src="img/Mas0.png" alt="Plus"></div>
  148. <div id="plus2s3" class="layer-seven-s3"><img src="img/Mas0.png" alt="Plus"></div>
  149. </div>
  150. </div>
  151. <div class="separator">
  152. <img width="100%" height="100%" src="img/Separador1_10.png" alt="Separador">
  153. </div>
  154. <div class="fourth-section">
  155. <div class="container">
  156. <div id="texto-3" class="content">
  157. <h1 class="title">Centro de Mensajes</h1>
  158. <p class="description">Permite la comunicación directa entre alumnos, profesores, padres de familia y directivos sin necesidad de un correo electrónico. Esta función permite el intercambio de información por equipos sin necesidad de reuniones presenciales
  159. en casa.</p>
  160. </div>
  161. <div id="loader-4" class="img-container right">
  162. <img id="img-source-4" width="95%" src="img/fourth/Compu anima10.png" alt="Centro de Mensajes">
  163. </div>
  164. <div id="msg1" class="layer-one-s4"><img width="100%" src="img/fourth/mensaje0.png" alt="Mensaje"></div>
  165. <div id="msg2" class="layer-two-s4"><img width="100%" src="img/fourth/mensaje0.png" alt="Mensaje"></div>
  166. <div id="msg3" class="layer-three-s4"><img width="100%" src="img/fourth/mensaje0.png" alt="Mensaje"></div>
  167. <div id="dot1s4" class="layer-four-s4"><img src="img/Circulin0.png" alt="Dot"></div>
  168. <div id="plus1s4" class="layer-five-s4"><img src="img/Mas0.png" alt="Plus"></div>
  169. <div id="plus2s4" class="layer-six-s4"><img src="img/Mas0.png" alt="Plus"></div>
  170. </div>
  171. </div>
  172. <div class="separator">
  173. <img width="100%" height="100%" src="img/Separador1_10.png" alt="Separador">
  174. </div>
  175. <div class="fifth-section">
  176. <div class="container">
  177. <div id="loader-5" class="img-container">
  178. <img id="img-source-5" width="85%" src="img/fifth/Tablero anima10.png" alt="Centro de Recursos">
  179. </div>
  180. <div id="texto-4" class="content">
  181. <h1 class="title">Centro de Recursos por Materia</h1>
  182. <p class="description">Los alumnos pueden acceder al contenido de cada materia y descargarlos contenidos que sus profesores compartan con ellos para su aprendizaje educativo, el sistema está diseñado para archivos adjuntos de gran tamaño y el almacenamiento
  183. es ilimitado.</p>
  184. </div>
  185. <div id="dcl1" class="layer-one-s5"><img width="100%" src="img/fifth/Documento liston0.png" alt="Doc Loston"></div>
  186. <div id="dcl2" class="layer-two-s5"><img width="100%" src="img/fifth/Documento liston0.png" alt="Doc Loston"></div>
  187. <div id="dcl3" class="layer-three-s5"><img width="100%" src="img/fifth/Documento liston0.png" alt="Doc Loston"></div>
  188. <div id="plus1s5" class="layer-four-s5"><img src="img/Mas0.png" alt="Plus"></div>
  189. <div id="plus2s5" class="layer-five-s5"><img src="img/Mas0.png" alt="Plus"></div>
  190. <div id="dot1s5" class="layer-six-s5"><img src="img/Circulin0.png" alt="Dot"></div>
  191. </div>
  192. </div>
  193. <div class="separator">
  194. <img width="100%" height="100%" src="img/Separador1_10.png" alt="Separador">
  195. </div>
  196. </section>
  197. <div class="hidden-movil">
  198. <div id="menu-bottom" class="ul-menu-bottom">
  199. <div class="li-menu centrar"><a class="menu-item blue-bottom" href="index.html">Inicio</a></div>
  200. <div class="li-menu centrar"><a class="menu-item blue-bottom" href="conocenos.html">Conócenos</a></div>
  201. <div class="li-menu centrar"><a class="menu-item blue-bottom" href="funciones.html">Funciones</a></div>
  202. <div class="li-menu centrar"><a class="menu-item blue-bottom" href="contacto.php">Contacto</a></div>
  203. <div class="li-menu centrar"><a class="menu-item blue-bottom" href="apoyo-covid-19.html">COVID-19</a></div>
  204. </div>
  205. </div>
  206. <footer>
  207. <div id="footer-part-1">
  208. <div class="footer-izq">
  209. <a href="index.html" target="blank"><img width="100%" class="img-gray" id="footer-img-izq" src="img/logos/logo-plataforma.png" alt="Logo Plataforma"></a>
  210. </div>
  211. <div id="hr1" class="vl"></div>
  212. <div class="footer-cen">
  213. <h1 id="footer-title" class="footer-title txt-gray">Contacto</h1>
  214. <p class="txt-gray" id="footer-txt">
  215. <i class="icon-volume-control-phone"></i> (55) 6267 2444 <br>
  216. <i class="icon-mail-alt"></i> soluciones@ittec.mx <br>
  217. <i class="icon-globe"></i> www.plataforma-educativa.com.mx
  218. </p>
  219. </div>
  220. <div id="hr2" class="vl"></div>
  221. <div class="footer-der">
  222. <a href="https://ittec.mx/" target="blank"><img class="img-gray" id="footer-img-der" src="img/logos/logo_blanco.png" alt="Logo ITTEC"></a>
  223. </div>
  224. </div>
  225. <div id="footer-part-2">
  226. <p id="copy" class="txt-gray"><a id="privacidad" href="legal.html" class="txt-gray no-underline">Aviso de privacidad </a><i class="icon-graduation-cap"></i><a id="terminos" href="legal.html" class="txt-gray no-underline"> Términos y Condiciones </a><br> Copyright &copy;
  227. ITTEC. Tecnología inteligente. Todos los derechos reservados.
  228. </p>
  229. </div>
  230. </footer>
  231. </body>
  232. <script type="text/javascript">
  233. var body = document.body;
  234. var contMsg1 = 0;
  235. var contMsg2 = 0;
  236. var contMsg3 = 0;
  237. body.scrollTop += 10;
  238. var cont = 1;
  239. setInterval('contador1()', 750);
  240. function contador1() {
  241. if (cont > 2) {
  242. $('#covid').addClass('pulse');
  243. }
  244. if (cont > 4) {
  245. $('#part1').addClass('goOut');
  246. $('#part2').addClass('goOut');
  247. $('#part3').addClass('goOut');
  248. $('#part4').addClass('goOut');
  249. }
  250. if (cont > 7) {
  251. $('#part1').css({
  252. 'visibility': 'hidden'
  253. });
  254. $('#part2').css({
  255. 'visibility': 'hidden'
  256. });
  257. $('#part3').css({
  258. 'visibility': 'hidden'
  259. });
  260. $('#part4').css({
  261. 'visibility': 'hidden'
  262. });
  263. $('#fondo-2').addClass('fadeIn');
  264. $('#fondo-3').addClass('bigEntrance');
  265. $('#fondo-4').addClass('slideLeft');
  266. $('#streaming-content').addClass('slideRight');
  267. }
  268. cont++;
  269. }
  270. var scrolled = 1;
  271. var value = 0;
  272. var signo = 1;
  273. function isMobile() {
  274. return (
  275. (navigator.userAgent.match(/Android/i)) ||
  276. (navigator.userAgent.match(/webOS/i)) ||
  277. (navigator.userAgent.match(/iPhone/i)) ||
  278. (navigator.userAgent.match(/iPod/i)) ||
  279. (navigator.userAgent.match(/iPad/i)) ||
  280. (navigator.userAgent.match(/BlackBerry/i))
  281. );
  282. }
  283. if (isMobile()) {
  284. $('#menu-bottom').remove();
  285. $('#footer-part-1').css({
  286. 'margin-top': '70px'
  287. });
  288. $('#cam1').remove();
  289. $('#cam2').remove();
  290. $('#cam3').remove();
  291. $('#doc1').remove();
  292. $('#doc2').remove();
  293. $('#doc3').remove();
  294. $('#book1').remove();
  295. $('#book2').remove();
  296. $('#book3').remove();
  297. $('#book4').remove();
  298. $('#copo1').remove();
  299. $('#copo2').remove();
  300. $('#hoja1').remove();
  301. $('#msg1').remove();
  302. $('#msg2').remove();
  303. $('#msg3').remove();
  304. $('#dcl1').remove();
  305. $('#dcl2').remove();
  306. $('#dcl3').remove();
  307. $('#dot1').remove();
  308. $('#dot2').remove();
  309. $('#plus2').remove();
  310. $('#plus1s0').css({
  311. 'margin-left': ($(window).width() * 0.3)
  312. });
  313. $('#plus1s2').css({
  314. 'margin-left': ($(window).width() * 0.001)
  315. });
  316. $('#plus2s2').css({
  317. 'margin-left': ($(window).width() * 0.4)
  318. });
  319. $('#plus3s2').css({
  320. 'margin-left': ($(window).width() * -0.4)
  321. });
  322. $('#plus1s3').css({
  323. 'margin-left': ($(window).width() * 0.4)
  324. });
  325. $('#plus2s3').css({
  326. 'margin-left': ($(window).width() * -0.4)
  327. });
  328. $('#plus1s4').css({
  329. 'margin-left': ($(window).width() * 0.35)
  330. });
  331. $('#plus2s4').css({
  332. 'margin-left': ($(window).width() * -0.2)
  333. });
  334. $('#plus1s5').css({
  335. 'margin-left': ($(window).width() * 0.1)
  336. });
  337. $('#plus2s5').css({
  338. 'margin-left': ($(window).width() * -0.25)
  339. });
  340. $('.header').css({
  341. 'background': 'rgba(255, 255, 255, 0.5)'
  342. });
  343. $('#link1').removeClass('white');
  344. $('#link1').addClass('strong-blue');
  345. $('#link2').removeClass('white');
  346. $('#link2').addClass('strong-blue');
  347. $('#link3').removeClass('white');
  348. $('#link3').addClass('strong-blue');
  349. $('#link4').removeClass('white');
  350. $('#link4').addClass('strong-blue');
  351. $('#covid').removeClass('white-button');
  352. $('#covid').addClass('strong-blue-button');
  353. $('#menu').removeClass('hide')
  354. }
  355. $(window).scroll(function() {
  356. var topOfWindow = $(window).scrollTop();
  357. var barra = $(window).scrollTop();
  358. var barra = $(window).scrollTop();
  359. var ventanaAncho = $(window).width();
  360. var escala1 = 15 + (barra / 10);
  361. var escala2 = -21 + (barra / 5);
  362. var escala3 = -21 - (barra / 15);
  363. var posicionDoc1 = 1000 - (barra * 0.35) + 150;
  364. var posicionDoc1X = ventanaAncho * 0.60;
  365. var posicionDoc2 = 250 - (barra * 0.35) + 250;
  366. var posicionDoc2X = ventanaAncho * 0.75;
  367. var posicionDoc3 = 900 - (barra * 0.35) + 250;
  368. var posicionDoc3X = ventanaAncho * 0.65;
  369. var posicionDot1 = -360 + (barra * 0.50) - 250;
  370. var posicionDot1X = ventanaAncho * 0.05;
  371. var posicionDot2 = -280 + (barra * 0.50) - 250;
  372. var posicionDot2X = ventanaAncho * 0.87;
  373. var posicionPlus1 = -180 + (barra * 0.50) - 250;
  374. var posicionPlus1X = ventanaAncho * 0.375;
  375. var posicionPlus2 = -100 + (barra * 0.50) - 250;
  376. var posicionPlus2X = ventanaAncho * 0.65;
  377. if (posicionDoc1 >= 360) {
  378. $('#doc1').css({
  379. 'transform': 'translateX(' + posicionDoc1X + 'px) rotate(15deg) translateY(' + posicionDoc1 + 'px)'
  380. });
  381. $('#doc1').css({
  382. 'width': '100px'
  383. });
  384. } else {
  385. var posicionDoc1Tmp = 60 + (barra * 0.35);
  386. var ancho1 = 100 + (barra / 100);
  387. $('#doc1').css({
  388. 'width': ancho1 + 'px'
  389. });
  390. $('#doc1').css({
  391. 'transform': 'translateX(' + posicionDoc1X + 'px) rotate(15deg) translateY(' + posicionDoc1Tmp + 'px)'
  392. });
  393. }
  394. if (posicionDoc3 >= 360) {
  395. $('#doc3').css({
  396. 'transform': 'translateX(' + posicionDoc3X + 'px) rotate(-20deg) translateY(' + posicionDoc3 + 'px)'
  397. });
  398. $('#doc3').css({
  399. 'width': '70px'
  400. });
  401. } else {
  402. var ancho3 = 70 + (barra / 120);
  403. var posicionDoc3Tmp = 60 + (barra * 0.35);
  404. $('#doc3').css({
  405. 'width': ancho3 + 'px'
  406. });
  407. $('#doc3').css({
  408. 'transform': 'translateX(' + posicionDoc3X + 'px) rotate(-20deg) translateY(' + posicionDoc3Tmp + 'px)'
  409. });
  410. }
  411. $('#doc2').css({
  412. 'transform': 'translateX(' + posicionDoc2X + 'px) rotate(-20deg) translateY(' + posicionDoc2 + 'px)'
  413. });
  414. $('#dot1').css({
  415. 'transform': 'translateX(' + posicionDot1X + 'px) translateY(' + posicionDot1 + 'px)'
  416. });
  417. $('#dot2').css({
  418. 'transform': 'translateX(' + posicionDot2X + 'px) translateY(' + posicionDot2 + 'px)'
  419. });
  420. $('#plus1').css({
  421. 'transform': 'translateX(' + posicionPlus1X + 'px) translateY(' + posicionPlus1 + 'px)'
  422. });
  423. $('#plus2').css({
  424. 'transform': 'translateX(' + posicionPlus2X + 'px) translateY(' + posicionPlus2 + 'px)'
  425. });
  426. $('#img-source-0').each(function() {
  427. var imagePos = $(this).offset().top;
  428. if (imagePos < topOfWindow + 450) {
  429. $(this).attr("src", "img/zero/Animacion_00007.png");
  430. }
  431. if (imagePos < topOfWindow + 435) {
  432. $(this).attr("src", "img/zero/Animacion_00008.png");
  433. }
  434. if (imagePos < topOfWindow + 420) {
  435. $(this).attr("src", "img/zero/Animacion_00009.png");
  436. }
  437. if (imagePos < topOfWindow + 405) {
  438. $(this).attr("src", "img/zero/Animacion_00010.png");
  439. }
  440. if (imagePos < topOfWindow + 390) {
  441. $(this).attr("src", "img/zero/Animacion_00011.png");
  442. }
  443. if (imagePos < topOfWindow + 375) {
  444. $(this).attr("src", "img/zero/Animacion_00012.png");
  445. }
  446. if (imagePos < topOfWindow + 360) {
  447. $(this).attr("src", "img/zero/Animacion_00014.png");
  448. }
  449. if (imagePos < topOfWindow + 345) {
  450. $(this).attr("src", "img/zero/Animacion_00015.png");
  451. }
  452. if (imagePos < topOfWindow + 330) {
  453. $(this).attr("src", "img/zero/Animacion_00017.png");
  454. }
  455. if (imagePos < topOfWindow + 315) {
  456. $(this).attr("src", "img/zero/Animacion_00018.png");
  457. }
  458. if (imagePos < topOfWindow + 300) {
  459. $(this).attr("src", "img/zero/Animacion_00020.png");
  460. }
  461. if (imagePos < topOfWindow + 285) {
  462. $(this).attr("src", "img/zero/Animacion_00021.png");
  463. }
  464. if (imagePos < topOfWindow + 270) {
  465. $(this).attr("src", "img/zero/Animacion_00022.png");
  466. }
  467. if (imagePos < topOfWindow + 255) {
  468. $(this).attr("src", "img/zero/Animacion_00024.png");
  469. }
  470. if (imagePos < topOfWindow + 240) {
  471. $(this).attr("src", "img/zero/Animacion_00025.png");
  472. }
  473. if (imagePos < topOfWindow + 225) {
  474. $(this).attr("src", "img/zero/Animacion_00027.png");
  475. }
  476. if (imagePos < topOfWindow + 210) {
  477. $(this).attr("src", "img/zero/Animacion_00028.png");
  478. }
  479. if (imagePos < topOfWindow + 195) {
  480. $(this).attr("src", "img/zero/Animacion_00030.png");
  481. }
  482. if (imagePos < topOfWindow + 180) {
  483. $(this).attr("src", "img/zero/Animacion_00031.png");
  484. }
  485. if (imagePos < topOfWindow + 165) {
  486. $(this).attr("src", "img/zero/Animacion_00032.png");
  487. }
  488. if (imagePos < topOfWindow + 150) {
  489. $(this).attr("src", "img/zero/Animacion_00033.png");
  490. }
  491. if (imagePos < topOfWindow + 135) {
  492. $(this).attr("src", "img/zero/Animacion_00034.png");
  493. }
  494. if (imagePos < topOfWindow + 120) {
  495. $(this).attr("src", "img/zero/Animacion_00036.png");
  496. }
  497. if (imagePos < topOfWindow + 105) {
  498. $(this).attr("src", "img/zero/Animacion_00038.png");
  499. }
  500. if (imagePos < topOfWindow + 90) {
  501. $(this).attr("src", "img/zero/Animacion_00039.png");
  502. }
  503. if (imagePos < topOfWindow + 75) {
  504. $(this).attr("src", "img/zero/Animacion_00040.png");
  505. }
  506. if (imagePos < topOfWindow + 60) {
  507. $(this).attr("src", "img/zero/Animacion_00041.png");
  508. }
  509. if (imagePos < topOfWindow + 45) {
  510. $(this).attr("src", "img/zero/Animacion_00042.png");
  511. }
  512. if (imagePos < topOfWindow + 30) {
  513. $(this).attr("src", "img/zero/Animacion_00043.png");
  514. }
  515. });
  516. $('#img-source-1').each(function() {
  517. var imagePos = $(this).offset().top;
  518. if (imagePos < topOfWindow + 600) {
  519. $(this).attr("src", "img/first/animacion r10.png");
  520. }
  521. if (imagePos < topOfWindow + 580) {
  522. $(this).attr("src", "img/first/h10.png");
  523. }
  524. if (imagePos < topOfWindow + 540) {
  525. $(this).attr("src", "img/first/h20.png");
  526. }
  527. if (imagePos < topOfWindow + 520) {
  528. $(this).attr("src", "img/first/h30.png");
  529. }
  530. if (imagePos < topOfWindow + 500) {
  531. $(this).attr("src", "img/first/h40.png");
  532. }
  533. if (imagePos < topOfWindow + 480) {
  534. $("#img-source-1").attr("src", "img/first/h50.png");
  535. }
  536. if (imagePos < topOfWindow + 460) {
  537. $(this).attr("src", "img/first/h60.png");
  538. }
  539. if (imagePos < topOfWindow + 440) {
  540. $(this).attr("src", "img/first/h70.png");
  541. }
  542. if (imagePos < topOfWindow + 420) {
  543. $(this).attr("src", "img/first/h80.png");
  544. }
  545. if (imagePos < topOfWindow + 400) {
  546. $(this).attr("src", "img/first/h90.png");
  547. }
  548. if (imagePos < topOfWindow + 380) {
  549. $(this).attr("src", "img/first/h100.png");
  550. }
  551. if (imagePos < topOfWindow + 360) {
  552. $("#img-source-1").attr("src", "img/first/h110.png");
  553. }
  554. if (imagePos < topOfWindow + 340) {
  555. $(this).attr("src", "img/first/h120.png");
  556. }
  557. if (imagePos < topOfWindow + 320) {
  558. $(this).attr("src", "img/first/h130.png");
  559. }
  560. if (imagePos < topOfWindow + 300) {
  561. $(this).attr("src", "img/first/h140.png");
  562. }
  563. if (imagePos < topOfWindow + 280) {
  564. $(this).attr("src", "img/first/h150.png");
  565. }
  566. if (imagePos < topOfWindow + 260) {
  567. $(this).attr("src", "img/first/h160.png");
  568. }
  569. if (imagePos < topOfWindow + 240) {
  570. $(this).attr("src", "img/first/h170.png");
  571. }
  572. if (imagePos < topOfWindow + 220) {
  573. $(this).attr("src", "img/first/h180.png");
  574. }
  575. if (imagePos < topOfWindow + 200) {
  576. $(this).attr("src", "img/first/animacion 20.png");
  577. }
  578. if (imagePos < topOfWindow + 180) {
  579. $(this).attr("src", "img/first/animacion 30.png");
  580. }
  581. if (imagePos < topOfWindow + 160) {
  582. $(this).attr("src", "img/first/animacion 40.png");
  583. }
  584. if (imagePos < topOfWindow + 140) {
  585. $(this).attr("src", "img/first/animacion 50.png");
  586. }
  587. if (imagePos < topOfWindow + 120) {
  588. $(this).attr("src", "img/first/animacion 60.png");
  589. }
  590. if (imagePos < topOfWindow + 100) {
  591. $(this).attr("src", "img/first/animacion 70.png");
  592. }
  593. if (imagePos < topOfWindow + 80) {
  594. $(this).attr("src", "img/first/animacion 80.png");
  595. }
  596. if (imagePos < topOfWindow + 60) {
  597. $(this).attr("src", "img/first/animacion 90.png");
  598. }
  599. });
  600. $('#img-source-2').each(function() {
  601. var imagePos = $(this).offset().top;
  602. if (imagePos < topOfWindow + 510) {
  603. $(this).attr("src", "img/second/TR 10.png");
  604. }
  605. if (imagePos < topOfWindow + 480) {
  606. $(this).attr("src", "img/second/TR 20.png");
  607. }
  608. if (imagePos < topOfWindow + 450) {
  609. $(this).attr("src", "img/second/TR 30.png");
  610. }
  611. if (imagePos < topOfWindow + 420) {
  612. $(this).attr("src", "img/second/TR 40.png");
  613. }
  614. if (imagePos < topOfWindow + 390) {
  615. $(this).attr("src", "img/second/TR 50.png");
  616. }
  617. if (imagePos < topOfWindow + 360) {
  618. $(this).attr("src", "img/second/TR 60.png");
  619. }
  620. if (imagePos < topOfWindow + 330) {
  621. $(this).attr("src", "img/second/TR 70.png");
  622. }
  623. if (imagePos < topOfWindow + 300) {
  624. $(this).attr("src", "img/second/TR 80.png");
  625. }
  626. if (imagePos < topOfWindow + 270) {
  627. $(this).attr("src", "img/second/TR 90.png");
  628. }
  629. if (imagePos < topOfWindow + 240) {
  630. $(this).attr("src", "img/second/TR 100.png");
  631. }
  632. if (imagePos < topOfWindow + 210) {
  633. $(this).attr("src", "img/second/TR 110.png");
  634. }
  635. if (imagePos < topOfWindow + 180) {
  636. $(this).attr("src", "img/second/TR 120.png");
  637. }
  638. if (imagePos < topOfWindow + 150) {
  639. $(this).attr("src", "img/second/TR 130.png");
  640. }
  641. if (imagePos < topOfWindow + 120) {
  642. $(this).attr("src", "img/second/TR 140.png");
  643. }
  644. if (imagePos < topOfWindow + 90) {
  645. $(this).attr("src", "img/second/TR 150.png");
  646. }
  647. if (imagePos < topOfWindow + 60) {
  648. $(this).attr("src", "img/second/TR 160.png");
  649. }
  650. if (imagePos < topOfWindow + 30) {
  651. $(this).attr("src", "img/second/TR 170.png");
  652. }
  653. if (imagePos < topOfWindow) {
  654. $(this).attr("src", "img/second/TR 180.png");
  655. }
  656. if (imagePos < topOfWindow - 30) {
  657. $(this).attr("src", "img/second/TR 190.png");
  658. }
  659. });
  660. $('#img-source-3').each(function() {
  661. var imagePos = $(this).offset().top;
  662. if (imagePos < topOfWindow + 450) {
  663. $(this).attr("src", "img/third/Calendar10.png");
  664. }
  665. if (imagePos < topOfWindow + 425) {
  666. $(this).attr("src", "img/third/Calendar20.png");
  667. }
  668. if (imagePos < topOfWindow + 400) {
  669. $(this).attr("src", "img/third/Calendar30.png");
  670. }
  671. if (imagePos < topOfWindow + 375) {
  672. $(this).attr("src", "img/third/Calendar40.png");
  673. }
  674. if (imagePos < topOfWindow + 350) {
  675. $(this).attr("src", "img/third/Calendar50.png");
  676. }
  677. if (imagePos < topOfWindow + 325) {
  678. $(this).attr("src", "img/third/Calendar60.png");
  679. }
  680. if (imagePos < topOfWindow + 300) {
  681. $(this).attr("src", "img/third/Calendar70.png");
  682. }
  683. if (imagePos < topOfWindow + 275) {
  684. $(this).attr("src", "img/third/Calendar80.png");
  685. }
  686. if (imagePos < topOfWindow + 250) {
  687. $(this).attr("src", "img/third/Calendar90.png");
  688. }
  689. if (imagePos < topOfWindow + 225) {
  690. $(this).attr("src", "img/third/Calendar100.png");
  691. }
  692. if (imagePos < topOfWindow + 200) {
  693. $(this).attr("src", "img/third/Calendar110.png");
  694. }
  695. if (imagePos < topOfWindow + 175) {
  696. $(this).attr("src", "img/third/Calendar120.png");
  697. }
  698. if (imagePos < topOfWindow + 150) {
  699. $(this).attr("src", "img/third/Calendar130.png");
  700. }
  701. if (imagePos < topOfWindow + 125) {
  702. $(this).attr("src", "img/third/Calendar140.png");
  703. }
  704. if (imagePos < topOfWindow + 100) {
  705. $("#img-source-3").attr("src", "img/third/Calendar150.png");
  706. }
  707. if (imagePos < topOfWindow + 75) {
  708. $(this).attr("src", "img/third/Calendar160.png");
  709. }
  710. if (imagePos < topOfWindow + 50) {
  711. $(this).attr("src", "img/third/Calendar170.png");
  712. }
  713. if (imagePos < topOfWindow + 25) {
  714. $(this).attr("src", "img/third/Calendar180.png");
  715. }
  716. if (imagePos < topOfWindow) {
  717. $(this).attr("src", "img/third/Calendar190.png");
  718. }
  719. if (imagePos < topOfWindow - 25) {
  720. $(this).attr("src", "img/third/Calendar200.png");
  721. }
  722. });
  723. $('#img-source-4').each(function() {
  724. var imagePos = $(this).offset().top;
  725. if (imagePos < topOfWindow + 440) {
  726. $(this).attr("src", "img/fourth/Compu anima10.png");
  727. }
  728. if (imagePos < topOfWindow + 420) {
  729. $(this).attr("src", "img/fourth/Compu anima20.png");
  730. }
  731. if (imagePos < topOfWindow + 400) {
  732. $(this).attr("src", "img/fourth/Compu anima30.png");
  733. }
  734. if (imagePos < topOfWindow + 380) {
  735. $(this).attr("src", "img/fourth/Compu anima40.png");
  736. }
  737. if (imagePos < topOfWindow + 360) {
  738. $(this).attr("src", "img/fourth/Compu anima50.png");
  739. }
  740. if (imagePos < topOfWindow + 340) {
  741. $(this).attr("src", "img/fourth/Compu anima60.png");
  742. }
  743. if (imagePos < topOfWindow + 320) {
  744. $(this).attr("src", "img/fourth/Compu anima70.png");
  745. }
  746. if (imagePos < topOfWindow + 300) {
  747. $(this).attr("src", "img/fourth/Compu anima80.png");
  748. }
  749. if (imagePos < topOfWindow + 280) {
  750. $(this).attr("src", "img/fourth/Compu anima90.png");
  751. }
  752. if (imagePos < topOfWindow + 260) {
  753. $(this).attr("src", "img/fourth/Compu anima100.png");
  754. }
  755. if (imagePos < topOfWindow + 240) {
  756. $(this).attr("src", "img/fourth/Compu anima110.png");
  757. }
  758. if (imagePos < topOfWindow + 220) {
  759. $(this).attr("src", "img/fourth/Compu anima120.png");
  760. }
  761. if (imagePos < topOfWindow + 200) {
  762. $(this).attr("src", "img/fourth/Compu anima130.png");
  763. }
  764. if (imagePos < topOfWindow + 180) {
  765. $(this).attr("src", "img/fourth/Compu anima140.png");
  766. }
  767. if (imagePos < topOfWindow + 160) {
  768. $(this).attr("src", "img/fourth/Compu anima150.png");
  769. }
  770. if (imagePos < topOfWindow + 140) {
  771. $(this).attr("src", "img/fourth/Compu anima160.png");
  772. }
  773. if (imagePos < topOfWindow + 120) {
  774. $(this).attr("src", "img/fourth/Compu anima170.png");
  775. }
  776. if (imagePos < topOfWindow + 100) {
  777. $(this).attr("src", "img/fourth/Compu anima180.png");
  778. }
  779. if (imagePos < topOfWindow + 80) {
  780. $(this).attr("src", "img/fourth/Compu anima190.png");
  781. }
  782. if (imagePos < topOfWindow + 60) {
  783. $(this).attr("src", "img/fourth/Compu anima200.png");
  784. }
  785. });
  786. $('#img-source-5').each(function() {
  787. var imagePos = $(this).offset().top;
  788. if (imagePos < topOfWindow + 375) {
  789. $(this).attr("src", "img/fifth/Tablero anima10.png");
  790. }
  791. if (imagePos < topOfWindow + 360) {
  792. $(this).attr("src", "img/fifth/Tablero anima20.png");
  793. }
  794. if (imagePos < topOfWindow + 345) {
  795. $(this).attr("src", "img/fifth/Tablero anima30.png");
  796. }
  797. if (imagePos < topOfWindow + 340) {
  798. $(this).attr("src", "img/fifth/Tablero anima40.png");
  799. }
  800. if (imagePos < topOfWindow + 330) {
  801. $(this).attr("src", "img/fifth/Tablero anima50.png");
  802. }
  803. if (imagePos < topOfWindow + 320) {
  804. $(this).attr("src", "img/fifth/Tablero anima60.png");
  805. }
  806. if (imagePos < topOfWindow + 310) {
  807. $(this).attr("src", "img/fifth/Tablero anima70.png");
  808. }
  809. if (imagePos < topOfWindow + 300) {
  810. $(this).attr("src", "img/fifth/Tablero anima80.png");
  811. }
  812. if (imagePos < topOfWindow + 290) {
  813. $(this).attr("src", "img/fifth/Tablero anima90.png");
  814. }
  815. if (imagePos < topOfWindow + 275) {
  816. $(this).attr("src", "img/fifth/Tablero anima100.png");
  817. }
  818. if (imagePos < topOfWindow + 260) {
  819. $(this).attr("src", "img/fifth/Tablero anima110.png");
  820. }
  821. if (imagePos < topOfWindow + 245) {
  822. $(this).attr("src", "img/fifth/Tablero anima120.png");
  823. }
  824. if (imagePos < topOfWindow + 230) {
  825. $(this).attr("src", "img/fifth/Tablero anima130.png");
  826. }
  827. if (imagePos < topOfWindow + 215) {
  828. $(this).attr("src", "img/fifth/Tablero anima140.png");
  829. }
  830. if (imagePos < topOfWindow + 200) {
  831. $(this).attr("src", "img/fifth/Tablero anima150.png");
  832. }
  833. if (imagePos < topOfWindow + 190) {
  834. $(this).attr("src", "img/fifth/Tablero anima160.png");
  835. }
  836. if (imagePos < topOfWindow + 180) {
  837. $(this).attr("src", "img/fifth/Tablero anima170.png");
  838. }
  839. if (imagePos < topOfWindow + 170) {
  840. $(this).attr("src", "img/fifth/Tablero anima180.png");
  841. }
  842. if (imagePos < topOfWindow + 160) {
  843. $(this).attr("src", "img/fifth/Tablero anima190.png");
  844. }
  845. if (imagePos < topOfWindow + 145) {
  846. $(this).attr("src", "img/fifth/Tablero anima200.png");
  847. }
  848. if (imagePos < topOfWindow + 130) {
  849. $(this).attr("src", "img/fifth/Tablero anima210.png");
  850. }
  851. if (imagePos < topOfWindow + 120) {
  852. $(this).attr("src", "img/fifth/Tablero anima220.png");
  853. }
  854. if (imagePos < topOfWindow + 110) {
  855. $(this).attr("src", "img/fifth/Tablero anima230.png");
  856. }
  857. if (imagePos < topOfWindow + 100) {
  858. $(this).attr("src", "img/fifth/Tablero anima240.png");
  859. }
  860. if (imagePos < topOfWindow + 90) {
  861. $(this).attr("src", "img/fifth/Tablero anima250.png");
  862. }
  863. if (imagePos < topOfWindow + 75) {
  864. $(this).attr("src", "img/fifth/Tablero anima260.png");
  865. }
  866. if (imagePos < topOfWindow + 60) {
  867. $(this).attr("src", "img/fifth/Tablero anima270.png");
  868. }
  869. if (imagePos < topOfWindow + 45) {
  870. $(this).attr("src", "img/fifth/Tablero anima280.png");
  871. }
  872. });
  873. $('#book1').each(function() {
  874. var rotar = 230 - (barra * 0.10);
  875. var blur = barra / 1000;
  876. var ancho = 125 - (barra / 50);
  877. var marginTop = 1200 - barra / 2.3;
  878. $(this).css({
  879. 'transform': 'rotate(' + rotar + 'deg)'
  880. });
  881. $(this).css({
  882. 'margin-top': marginTop + 'px'
  883. })
  884. $(this).css({
  885. 'width': ancho + 'px'
  886. })
  887. $(this).css({
  888. 'filter': 'blur(' + blur + 'px)'
  889. })
  890. });
  891. $('#book2').each(function() {
  892. var rotar = 35 - (barra * 0.10);
  893. var marginTop = 1000 - barra / 7;
  894. $(this).css({
  895. 'transform': 'rotate(' + rotar + 'deg)'
  896. });
  897. $(this).css({
  898. 'margin-top': marginTop + 'px'
  899. })
  900. });
  901. $('#book3').each(function() {
  902. var rotar = 230 - (barra * 0.10);
  903. var marginTop = 875 - barra / 8;
  904. $(this).css({
  905. 'transform': 'rotate(' + rotar + 'deg)'
  906. });
  907. $(this).css({
  908. 'margin-top': marginTop + 'px'
  909. })
  910. });
  911. $('#book4').each(function() {
  912. var rotar = 90 - (barra * 0.10);
  913. var marginTop = 800 - barra / 3;
  914. $(this).css({
  915. 'transform': 'rotate(' + rotar + 'deg)'
  916. });
  917. $(this).css({
  918. 'margin-top': marginTop + 'px'
  919. })
  920. });
  921. $('#dot1s2').each(function() {
  922. var marginTop = -500 + barra / 5;
  923. $(this).css({
  924. 'margin-top': marginTop + 'px'
  925. })
  926. });
  927. $('#plus1s2').each(function() {
  928. var marginTop = 50 + barra / 3;
  929. $(this).css({
  930. 'margin-top': marginTop + 'px'
  931. })
  932. });
  933. $('#plus2s2').each(function() {
  934. var marginTop = -700 + barra / 3;
  935. $(this).css({
  936. 'margin-top': marginTop + 'px'
  937. })
  938. });
  939. $('#plus3s2').each(function() {
  940. var marginTop = -500 + barra / 5;
  941. $(this).css({
  942. 'margin-top': marginTop + 'px'
  943. })
  944. });
  945. $('#hoja1').each(function() {
  946. var rotar = 230 - (barra * 0.10);
  947. var marginTop = barra / 8;
  948. $(this).css({
  949. 'margin-top': marginTop + 'px'
  950. });
  951. if (cont % 2 == 1) {
  952. $(this).css({
  953. 'margin-left': '760px'
  954. });
  955. } else {
  956. $(this).css({
  957. 'margin-left': '800px'
  958. });
  959. }
  960. });
  961. $('#copo1').each(function() {
  962. var rotar = 230 - (barra * 0.10);
  963. var marginTop = -50 + barra / 25;
  964. var ancho = 190 - (barra / 40);
  965. $(this).css({
  966. 'margin-top': marginTop + 'px'
  967. })
  968. $(this).css({
  969. 'transform': 'rotate(' + rotar + 'deg)'
  970. });
  971. $(this).css({
  972. 'width': ancho + 'px'
  973. })
  974. });
  975. $('#copo2').each(function() {
  976. var rotar = 90 + (barra * 0.05);
  977. var marginTop = -150 + barra / 7;
  978. var ancho = 190 + (barra / 40);
  979. $(this).css({
  980. 'margin-top': marginTop + 'px'
  981. })
  982. $(this).css({
  983. 'transform': 'rotate(' + rotar + 'deg)'
  984. });
  985. $(this).css({
  986. 'width': ancho + 'px'
  987. })
  988. });
  989. $('#dot1s3').each(function() {
  990. var marginTop = -700 + barra / 5;
  991. $(this).css({
  992. 'margin-top': marginTop + 'px'
  993. })
  994. });
  995. $('#plus1s3').each(function() {
  996. var marginTop = -950 + barra / 3;
  997. $(this).css({
  998. 'margin-top': marginTop + 'px'
  999. })
  1000. });
  1001. $('#plus2s3').each(function() {
  1002. var marginTop = -600 + barra / 6;
  1003. $(this).css({
  1004. 'margin-top': marginTop + 'px'
  1005. })
  1006. });
  1007. $('#msg1').each(function() {
  1008. scrolled = barra;
  1009. if (value < scrolled) {
  1010. signo = 1;
  1011. value = scrolled;
  1012. } else {
  1013. if (value > scrolled) {
  1014. signo = -1;
  1015. value = scrolled;
  1016. }
  1017. }
  1018. contMsg1 = contMsg1 + signo;
  1019. var rotar = 45 - (barra * 0.10);
  1020. var blur = barra / 1800;
  1021. var ancho = 175 + contMsg1 / (barra / 2);
  1022. var marginTop = 1950 - barra / 2.3;
  1023. $(this).css({
  1024. 'transform': 'rotate(' + rotar + 'deg)'
  1025. });
  1026. $(this).css({
  1027. 'margin-top': marginTop + 'px'
  1028. })
  1029. $(this).css({
  1030. 'width': ancho + 'px'
  1031. })
  1032. $(this).css({
  1033. 'filter': 'blur(' + blur + 'px)'
  1034. })
  1035. });
  1036. $('#msg2').each(function() {
  1037. var rotar = 180 + (barra * 0.10);
  1038. var blur = barra / 2800;
  1039. var ancho = 150 + barra / 1890;
  1040. var marginTop = 2550 - barra / 2.3;
  1041. $(this).css({
  1042. 'transform': 'rotate(' + rotar + 'deg)'
  1043. });
  1044. if (marginTop > 429) {
  1045. $(this).css({
  1046. 'margin-top': marginTop + 'px'
  1047. })
  1048. } else {
  1049. var marginTopTmp = 400 + barra / 100;
  1050. $(this).css({
  1051. 'margin-top': marginTopTmp + 'px'
  1052. })
  1053. }
  1054. $(this).css({
  1055. 'width': ancho + 'px'
  1056. })
  1057. $(this).css({
  1058. 'filter': 'blur(' + blur + 'px)'
  1059. })
  1060. });
  1061. $('#msg3').each(function() {
  1062. var rotar = 270 + (barra * 0.10);
  1063. var ancho = 50 + barra / 100;
  1064. var marginTop = 1850 - barra / 2.3;
  1065. $(this).css({
  1066. 'transform': 'rotate(' + rotar + 'deg)'
  1067. });
  1068. $(this).css({
  1069. 'margin-top': marginTop + 'px'
  1070. })
  1071. $(this).css({
  1072. 'width': ancho + 'px'
  1073. })
  1074. });
  1075. $('#dot1s4').each(function() {
  1076. var marginTop = -350 + barra / 5;
  1077. $(this).css({
  1078. 'margin-top': marginTop + 'px'
  1079. })
  1080. });
  1081. $('#plus1s4').each(function() {
  1082. var marginTop = -1200 + barra / 3;
  1083. $(this).css({
  1084. 'margin-top': marginTop + 'px'
  1085. })
  1086. });
  1087. $('#plus2s4').each(function() {
  1088. var marginTop = -700 + barra / 6;
  1089. $(this).css({
  1090. 'margin-top': marginTop + 'px'
  1091. })
  1092. });
  1093. $('#dcl1').each(function() {
  1094. scrolled = barra;
  1095. if (value < scrolled) {
  1096. signo = 1;
  1097. value = scrolled;
  1098. } else {
  1099. if (value > scrolled) {
  1100. signo = -1;
  1101. value = scrolled;
  1102. }
  1103. }
  1104. contMsg1 = contMsg1 + signo;
  1105. var rotar = 45 - (barra * 0.10);
  1106. var blur = barra / 2800;
  1107. var ancho = 135 + contMsg1 / (barra / 2);
  1108. var marginTop = 2150 - barra / 3.2;
  1109. $(this).css({
  1110. 'transform': 'rotate(' + rotar + 'deg)'
  1111. });
  1112. $(this).css({
  1113. 'margin-top': marginTop + 'px'
  1114. })
  1115. $(this).css({
  1116. 'width': ancho + 'px'
  1117. })
  1118. $(this).css({
  1119. 'filter': 'blur(' + blur + 'px)'
  1120. })
  1121. });
  1122. $('#dcl2').each(function() {
  1123. var rotar = 180 + (barra * 0.10);
  1124. var blur = barra / 2800;
  1125. var ancho = 80 + barra / 1890;
  1126. var marginTop = 1000 - barra / 5;
  1127. $(this).css({
  1128. 'transform': 'rotate(' + rotar + 'deg)'
  1129. });
  1130. $(this).css({
  1131. 'margin-top': marginTop + 'px'
  1132. })
  1133. $(this).css({
  1134. 'width': ancho + 'px'
  1135. })
  1136. $(this).css({
  1137. 'filter': 'blur(' + blur + 'px)'
  1138. })
  1139. });
  1140. $('#dcl3').each(function() {
  1141. var rotar = 270 + (barra * 0.10);
  1142. var ancho = 150 + barra / 100;
  1143. var marginTop = 450 - barra / 100;
  1144. $(this).css({
  1145. 'transform': 'rotate(' + rotar + 'deg)'
  1146. });
  1147. $(this).css({
  1148. 'margin-top': marginTop + 'px'
  1149. })
  1150. $(this).css({
  1151. 'width': ancho + 'px'
  1152. })
  1153. });
  1154. $('#dot1s5').each(function() {
  1155. var marginTop = -950 + barra / 5;
  1156. $(this).css({
  1157. 'margin-top': marginTop + 'px'
  1158. })
  1159. });
  1160. $('#plus1s5').each(function() {
  1161. var marginTop = -1700 + barra / 3;
  1162. $(this).css({
  1163. 'margin-top': marginTop + 'px'
  1164. })
  1165. });
  1166. $('#plus2s5').each(function() {
  1167. var marginTop = -700 + barra / 6;
  1168. $(this).css({
  1169. 'margin-top': marginTop + 'px'
  1170. })
  1171. });
  1172. $('#texto-0').each(function() {
  1173. var imagePos = $(this).offset().top;
  1174. if (imagePos < topOfWindow + 400) {
  1175. $(this).addClass("slideRight");
  1176. }
  1177. });
  1178. $('#texto').each(function() {
  1179. var imagePos = $(this).offset().top;
  1180. if (imagePos < topOfWindow + 400) {
  1181. $(this).addClass("slideLeft");
  1182. }
  1183. });
  1184. $('#texto-1').each(function() {
  1185. var imagePos = $(this).offset().top;
  1186. if (imagePos < topOfWindow + 400) {
  1187. $(this).addClass("slideRight");
  1188. }
  1189. });
  1190. $('#texto-2').each(function() {
  1191. var imagePos = $(this).offset().top;
  1192. if (imagePos < topOfWindow + 400) {
  1193. $(this).addClass("slideLeft");
  1194. }
  1195. });
  1196. $('#texto-3').each(function() {
  1197. var imagePos = $(this).offset().top;
  1198. if (imagePos < topOfWindow + 600) {
  1199. $(this).addClass("slideRight");
  1200. }
  1201. });
  1202. $('#texto-4').each(function() {
  1203. var imagePos = $(this).offset().top;
  1204. if (imagePos < topOfWindow + 400) {
  1205. $(this).addClass("slideLeft");
  1206. }
  1207. });
  1208. $('#texto-5').each(function() {
  1209. var imagePos = $(this).offset().top;
  1210. if (imagePos < topOfWindow + 400) {
  1211. $(this).addClass("slideRight");
  1212. }
  1213. });
  1214. $('#fondo-2').each(function() {
  1215. var marginTop = barra * 0.01;
  1216. $(this).css({
  1217. 'top': -marginTop + '%'
  1218. })
  1219. });
  1220. $('#fondo-3').each(function() {
  1221. var marginTop = -barra * 0.05;
  1222. $(this).css({
  1223. 'top': marginTop + '%'
  1224. })
  1225. });
  1226. $('#fondo-4').each(function() {
  1227. var marginTop = -barra * 0.5;
  1228. $(this).css({
  1229. 'transform': 'translateY(' + marginTop + 'px)'
  1230. })
  1231. });
  1232. $('#fondo-5').each(function() {
  1233. var marginTop = 0 - barra * 0.13;
  1234. $(this).css({
  1235. 'top': marginTop + '%'
  1236. })
  1237. });
  1238. $('.hide').each(function() {
  1239. if (barra > 15) {
  1240. $(this).css({
  1241. 'opacity': '0'
  1242. });
  1243. $('#link1').removeClass('blue');
  1244. $('#link1').addClass('strong-blue');
  1245. $('#link2').removeClass('blue');
  1246. $('#link2').addClass('strong-blue');
  1247. $('#link3').removeClass('white');
  1248. $('#link3').addClass('strong-blue');
  1249. $('#link4').removeClass('white');
  1250. $('#link4').addClass('strong-blue');
  1251. $('#covid').removeClass('white-button');
  1252. $('#covid').addClass('strong-blue-button');
  1253. } else {
  1254. $(this).css({
  1255. 'opacity': '1'
  1256. });
  1257. $('#link1').removeClass('strong-blue');
  1258. $('#link1').addClass('blue');
  1259. $('#link2').removeClass('strong-blue');
  1260. $('#link2').addClass('blue');
  1261. $('#link3').removeClass('strong-blue');
  1262. $('#link3').addClass('white');
  1263. $('#link4').removeClass('strong-blue');
  1264. $('#link4').addClass('white');
  1265. $('#covid').removeClass('strong-blue-button');
  1266. $('#covid').addClass('white-button');
  1267. }
  1268. });
  1269. $('#cam1').each(function() {
  1270. var rotar = 210 + (barra * 0.10);
  1271. var ancho = 150 + barra / 100;
  1272. var marginTop = 550 - barra / 100;
  1273. $(this).css({
  1274. 'transform': 'rotate(' + rotar + 'deg)'
  1275. });
  1276. $(this).css({
  1277. 'margin-top': marginTop + 'px'
  1278. })
  1279. $(this).css({
  1280. 'width': ancho + 'px'
  1281. })
  1282. });
  1283. $('#cam2').each(function() {
  1284. var rotar = -145 + (barra * 0.10);
  1285. var ancho = 75 + barra / 100;
  1286. var marginTop = 150 - barra / 5;
  1287. $(this).css({
  1288. 'transform': 'rotate(' + rotar + 'deg)'
  1289. });
  1290. $(this).css({
  1291. 'margin-top': marginTop + 'px'
  1292. })
  1293. $(this).css({
  1294. 'width': ancho + 'px'
  1295. })
  1296. });
  1297. $('#cam3').each(function() {
  1298. var rotar = 220 + (barra * 0.10);
  1299. var ancho = 100 + barra / 100;
  1300. var marginTop = 500 - barra / 100;
  1301. $(this).css({
  1302. 'transform': 'scaleX(-1) rotate(' + rotar + 'deg)'
  1303. });
  1304. $(this).css({
  1305. 'margin-top': marginTop + 'px'
  1306. })
  1307. $(this).css({
  1308. 'width': ancho + 'px'
  1309. })
  1310. });
  1311. $('#dot1s0').each(function() {
  1312. var marginTop = -150 + barra / 2.3;
  1313. $(this).css({
  1314. 'margin-top': marginTop + 'px'
  1315. })
  1316. });
  1317. $('#dot2s0').each(function() {
  1318. var marginTop = -200 + barra / 5;
  1319. $(this).css({
  1320. 'margin-top': marginTop + 'px'
  1321. })
  1322. });
  1323. $('#plus1s0').each(function() {
  1324. var marginTop = -200 + barra / 2.3;
  1325. $(this).css({
  1326. 'margin-top': marginTop + 'px'
  1327. })
  1328. });
  1329. });
  1330. $('.hide').hover(function() {
  1331. $(this).css({
  1332. 'opacity': '1'
  1333. })
  1334. })
  1335. $('.hide').mouseleave(function() {
  1336. var barra = $(window).scrollTop();
  1337. if (barra > 150) {
  1338. $(this).css({
  1339. 'opacity': '0'
  1340. });
  1341. $('#link1').removeClass('blue');
  1342. $('#link1').addClass('strong-blue');
  1343. $('#link2').removeClass('blue');
  1344. $('#link2').addClass('strong-blue');
  1345. $('#link3').removeClass('white');
  1346. $('#link3').addClass('strong-blue');
  1347. $('#link4').removeClass('white');
  1348. $('#link4').addClass('strong-blue');
  1349. $('#covid').removeClass('white-button');
  1350. $('#covid').addClass('strong-blue-button');
  1351. } else {
  1352. $(this).css({
  1353. 'opacity': '1'
  1354. });
  1355. $('#link1').removeClass('strong-blue');
  1356. $('#link1').addClass('blue');
  1357. $('#link2').removeClass('strong-blue');
  1358. $('#link2').addClass('blue');
  1359. $('#link3').removeClass('strong-blue');
  1360. $('#link3').addClass('white');
  1361. $('#link4').removeClass('strong-blue');
  1362. $('#link4').addClass('white');
  1363. $('#covid').removeClass('strong-blue-button');
  1364. $('#covid').addClass('white-button');
  1365. }
  1366. });
  1367. $('footer').hover(function() {
  1368. $(this).css({
  1369. 'background-color': '#555'
  1370. });
  1371. $('#hr1').css({
  1372. 'border-left': '2px solid #fff'
  1373. });
  1374. $('#hr2').css({
  1375. 'border-left': '2px solid #fff'
  1376. });
  1377. $('#footer-txt').removeClass('txt-gray');
  1378. $('#footer-txt').addClass('txt-white');
  1379. $('#footer-title').removeClass('txt-gray');
  1380. $('#footer-title').addClass('txt-white');
  1381. $('#copy').removeClass('txt-gray');
  1382. $('#copy').addClass('txt-white');
  1383. $('#privacidad').removeClass('txt-gray');
  1384. $('#privacidad').addClass('txt-white');
  1385. $('#terminos').removeClass('txt-gray');
  1386. $('#terminos').addClass('txt-white');
  1387. $('#footer-img-izq').removeClass('img-gray');
  1388. $('#footer-img-der').removeClass('img-gray');
  1389. });
  1390. $('footer').mouseleave(function() {
  1391. $(this).css({
  1392. 'background-color': 'rgba(0, 0, 0, 0)'
  1393. });
  1394. $('#hr1').css({
  1395. 'border-left': '2px solid #555'
  1396. });
  1397. $('#hr2').css({
  1398. 'border-left': '2px solid #555'
  1399. });
  1400. $('#footer-txt').removeClass('txt-white');
  1401. $('#footer-txt').addClass('txt-gray');
  1402. $('#footer-title').removeClass('txt-white');
  1403. $('#footer-title').addClass('txt-gray');
  1404. $('#copy').removeClass('txt-white');
  1405. $('#copy').addClass('txt-gray');
  1406. $('#privacidad').removeClass('txt-white');
  1407. $('#privacidad').addClass('txt-gray');
  1408. $('#terminos').removeClass('txt-white');
  1409. $('#terminos').addClass('txt-gray');
  1410. $('#footer-img-izq').addClass('img-gray');
  1411. $('#footer-img-der').addClass('img-gray');
  1412. });
  1413. </script>
  1414. </html>