|
|
@@ -0,0 +1,1420 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <script async src="https://www.googletagmanager.com/gtag/js?id=UA-46001212-3"></script>
|
|
|
+ <script>
|
|
|
+ window.dataLayer = window.dataLayer || [];
|
|
|
+
|
|
|
+ function gtag() {
|
|
|
+ dataLayer.push(arguments);
|
|
|
+ }
|
|
|
+ gtag('js', new Date());
|
|
|
+ gtag('config', 'UA-46001212-3');
|
|
|
+ </script>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
|
|
|
+ <link rel="stylesheet" href="css/style-main.css">
|
|
|
+ <link rel="stylesheet" href="css/animations.css">
|
|
|
+ <link rel="stylesheet" href="css/animation-main.css">
|
|
|
+ <link rel="stylesheet" href="css/loading.css">
|
|
|
+ <link rel="stylesheet" href="css/icons-platform.css">
|
|
|
+ <link rel="stylesheet" href="css/menu-main.css">
|
|
|
+ <link rel="stylesheet" href="css/arrows.css">
|
|
|
+ <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
|
|
|
+ <title>Plataforma Educativa</title>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <header id="menu" class="header hide">
|
|
|
+ <a href="index.html" class="logo"><img id="#logo-menu" width="100%" src="img/logos/logo.png" alt="Logo"></a>
|
|
|
+ <input class="menu-btn" type="checkbox" id="menu-btn" />
|
|
|
+ <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
|
|
|
+ <ul class="menu">
|
|
|
+ <li><a id="link1" class="white-blue" href="index.html">Inicio</a></li>
|
|
|
+ <li><a id="link2" class="white-blue" href="conocenos.html">Conócenos</a></li>
|
|
|
+ <li><a id="link3" class="white-blue" href="funciones.html">Funciones</a></li>
|
|
|
+ <li><a id="link4" class="white-blue" href="contacto.php">Contacto</a></li>
|
|
|
+ <li><a id="covid" class="covid slideDown white-button" href="apoyo-covid-19.html">Apoyo COVID-19</a></li>
|
|
|
+ </ul>
|
|
|
+ </header>
|
|
|
+ <section class="sections">
|
|
|
+ <div class="relleno">
|
|
|
+ <div class="streaming streamVisible">
|
|
|
+ <div id="streaming-content" class="streaming-content">
|
|
|
+ <h1 class="streaming-title">Clases en línea</h1>
|
|
|
+ <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>
|
|
|
+ <div class="arrows-container">
|
|
|
+ <div class="chevron-1 topArrow">
|
|
|
+ <p class="flecha"><i class="icon-down-open"></i></p>
|
|
|
+ </div>
|
|
|
+ <div class="chevron-2 middleArrow">
|
|
|
+ <p class="flecha"><i class="icon-down-open"></i></p>
|
|
|
+ </div>
|
|
|
+ <div class="chevron-3 bottomArrow">
|
|
|
+ <p class="flecha"><i class="icon-down-open"></i></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="fondo-1" class="fondo-1"><img width="100%" src="img/main/fondo azul20.png" alt="Fondo"></div>
|
|
|
+ <div id="fondo-2" class="fondo-2"><img width="100%" src="img/main/bolitas y estrellas0.png" alt="Fondo2"></div>
|
|
|
+ <div id="fondo-3" class="fondo-3"><img width="100%" src="img/main/materias0.png" alt="Fondo3"></div>
|
|
|
+ <div id="fondo-4" class="fondo-4"><img width="100%" src="img/main/compu0.png" alt="Fondo2"></div>
|
|
|
+ <div id="part1" class="part1 topLeft"><img width="100%" height="100%" src="img/main/xl30.png" alt="Pieza1"></div>
|
|
|
+ <div id="part2" class="part2 bottomLeft"><img width="100%" height="100%" src="img/main/x30.png" alt="Pieza3"></div>
|
|
|
+ <div id="part3" class="part3 topRight"><img width="100%" height="100%" src="img/main/x20.png" alt="Pieza2"></div>
|
|
|
+ <div id="part4" class="part4 bottomRight"><img width="100%" height="100%" src="img/main/x10.png" alt="Pieza4"></div>
|
|
|
+ </div>
|
|
|
+ <div class="separator">
|
|
|
+ <img width="100%" height="100%" src="img/Separador1_10.png" alt="Separador">
|
|
|
+ </div>
|
|
|
+ <div class="zero-section">
|
|
|
+ <div class="container">
|
|
|
+ <div id="texto-0" class="content">
|
|
|
+ <h1 class="title padding-2">Clases en línea</h1>
|
|
|
+ <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
|
|
|
+ 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>
|
|
|
+ </div>
|
|
|
+ <div class="img-container right">
|
|
|
+ <img id="img-source-0" width="95%" src="img/zero/Animacion_00000.png" alt="Clases">
|
|
|
+ </div>
|
|
|
+ <div id="cam1" class="layer-one-s0"><img width="100%" src="img/zero/camara.png" alt="Cam"></div>
|
|
|
+ <div id="cam2" class="layer-two-s0"><img width="100%" src="img/zero/camara.png" alt="Cam"></div>
|
|
|
+ <div id="cam3" class="layer-three-s0"><img width="100%" src="img/zero/camara.png" alt="Cam"></div>
|
|
|
+ <div id="dot1s0" class="layer-four-s0"><img src="img/Circulin0.png" alt="Dot"></div>
|
|
|
+ <div id="dot2s0" class="layer-five-s0"><img src="img/Circulin0.png" alt="Dot"></div>
|
|
|
+ <div id="plus1s0" class="layer-six-s0"><img src="img/Mas0.png" alt="Plus"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="separator">
|
|
|
+ <img width="100%" height="100%" src="img/Separador1_10.png" alt="Separador">
|
|
|
+ </div>
|
|
|
+ <div class="first-section">
|
|
|
+ <div class="container">
|
|
|
+ <div class="img-container left">
|
|
|
+ <img id="img-source-1" width="85%" src="img/first/animacion 10.png" alt="Circulares">
|
|
|
+ </div>
|
|
|
+ <div id="texto" class="content">
|
|
|
+ <h1 class="title">Circulares digitales</h1>
|
|
|
+ <p class="description">Optimiza la comunicación entre alumnos, profesores y padres de familia, enviando circulares electrónicas de actividades y eventos.</p>
|
|
|
+ </div>
|
|
|
+ <div id="doc1" class="layer-one"><img width="100%" src="img/first/Document0.png" alt="Doc"></div>
|
|
|
+ <div id="doc2" class="layer-two"><img width="100%" src="img/first/Document0.png" alt="Doc"></div>
|
|
|
+ <div id="doc3" class="layer-three"><img width="100%" src="img/first/Document0.png" alt="Doc"></div>
|
|
|
+ <div id="dot1" class="layer-four"><img src="img/Circulin0.png" alt="Dot"></div>
|
|
|
+ <div id="dot2" class="layer-five"><img src="img/Circulin0.png" alt="Dot"></div>
|
|
|
+ <div id="plus1" class="layer-six"><img src="img/Mas0.png" alt="Plus"></div>
|
|
|
+ <div id="plus2" class="layer-seven"><img src="img/Mas0.png" alt="Plus"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="separator">
|
|
|
+ <img width="100%" height="100%" src="img/Separador1_10.png" alt="Separador">
|
|
|
+ </div>
|
|
|
+ <div class="second-section">
|
|
|
+ <div class="container">
|
|
|
+ <div id="texto-1" class="content">
|
|
|
+ <h1 class="title">Administración de Tareas</h1>
|
|
|
+ <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
|
|
|
+ tareas permite incluir adjuntos de gran tamaño y vínculos directos a los contenidos, para el caso de los videos.</p>
|
|
|
+ </div>
|
|
|
+ <div id="loader-2" class="img-container right">
|
|
|
+ <img id="img-source-2" width="85%" src="img/second/TR 10.png" alt="Administración">
|
|
|
+ </div>
|
|
|
+ <div id="book1" class="layer-one-s2"><img width="100%" src="img/second/cuadern0.png" alt="Libro"></div>
|
|
|
+ <div id="book2" class="layer-two-s2"><img width="100%" src="img/second/Lapiz0.png" alt="Libro"></div>
|
|
|
+ <div id="book3" class="layer-three-s2"><img width="100%" src="img/second/cuadern0.png" alt="Libro"></div>
|
|
|
+ <div id="book4" class="layer-four-s2"><img width="100%" src="img/second/cuadern0.png" alt="Libro"></div>
|
|
|
+ <div id="dot1s2" class="layer-five-s2"><img src="img/Circulin0.png" alt="Dor"></div>
|
|
|
+ <div id="plus1s2" class="layer-six-s2"><img src="img/Mas0.png" alt="Plus"></div>
|
|
|
+ <div id="plus2s2" class="layer-seven-s2"><img src="img/Mas0.png" alt="Plus"></div>
|
|
|
+ <div id="plus3s2" class="layer-eight-s2"><img src="img/Mas0.png" alt="Plus"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="separator">
|
|
|
+ <img width="100%" height="100%" src="img/Separador1_10.png" alt="Separador">
|
|
|
+ </div>
|
|
|
+ <div class="third-section">
|
|
|
+ <div class="container">
|
|
|
+ <div id="loader-3" class="img-container">
|
|
|
+ <img id="img-source-3" width="85%" src="img/third/Calendar10.png" alt="Calendario">
|
|
|
+ </div>
|
|
|
+ <div id="texto-2" class="content">
|
|
|
+ <h1 class="title">Calendario de actividades</h1>
|
|
|
+ <p class="description">Planifica las actividades del Colegio a lo largo del ciclo escolarde forma unificada.</p>
|
|
|
+ </div>
|
|
|
+ <div id="hoja1" class="layer-one-s3"><img width="100%" src="img/third/Hoja0.png" alt="Hoja"></div>
|
|
|
+ <div id="copo1" class="layer-two-s3"><img width="100%" src="img/third/Copito0.png" alt="Copito"></div>
|
|
|
+ <div id="copo2" class="layer-three-s3"><img width="100%" src="img/third/Copito0.png" alt="Copito"></div>
|
|
|
+ <div id="dot1s3" class="layer-five-s3"><img src="img/Circulin0.png" alt="Dot"></div>
|
|
|
+ <div id="plus1s3" class="layer-six-s3"><img src="img/Mas0.png" alt="Plus"></div>
|
|
|
+ <div id="plus2s3" class="layer-seven-s3"><img src="img/Mas0.png" alt="Plus"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="separator">
|
|
|
+ <img width="100%" height="100%" src="img/Separador1_10.png" alt="Separador">
|
|
|
+ </div>
|
|
|
+ <div class="fourth-section">
|
|
|
+ <div class="container">
|
|
|
+ <div id="texto-3" class="content">
|
|
|
+ <h1 class="title">Centro de Mensajes</h1>
|
|
|
+ <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
|
|
|
+ en casa.</p>
|
|
|
+ </div>
|
|
|
+ <div id="loader-4" class="img-container right">
|
|
|
+ <img id="img-source-4" width="95%" src="img/fourth/Compu anima10.png" alt="Centro de Mensajes">
|
|
|
+ </div>
|
|
|
+ <div id="msg1" class="layer-one-s4"><img width="100%" src="img/fourth/mensaje0.png" alt="Mensaje"></div>
|
|
|
+ <div id="msg2" class="layer-two-s4"><img width="100%" src="img/fourth/mensaje0.png" alt="Mensaje"></div>
|
|
|
+ <div id="msg3" class="layer-three-s4"><img width="100%" src="img/fourth/mensaje0.png" alt="Mensaje"></div>
|
|
|
+ <div id="dot1s4" class="layer-four-s4"><img src="img/Circulin0.png" alt="Dot"></div>
|
|
|
+ <div id="plus1s4" class="layer-five-s4"><img src="img/Mas0.png" alt="Plus"></div>
|
|
|
+ <div id="plus2s4" class="layer-six-s4"><img src="img/Mas0.png" alt="Plus"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="separator">
|
|
|
+ <img width="100%" height="100%" src="img/Separador1_10.png" alt="Separador">
|
|
|
+ </div>
|
|
|
+ <div class="fifth-section">
|
|
|
+ <div class="container">
|
|
|
+ <div id="loader-5" class="img-container">
|
|
|
+ <img id="img-source-5" width="85%" src="img/fifth/Tablero anima10.png" alt="Centro de Recursos">
|
|
|
+ </div>
|
|
|
+ <div id="texto-4" class="content">
|
|
|
+ <h1 class="title">Centro de Recursos por Materia</h1>
|
|
|
+ <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
|
|
|
+ es ilimitado.</p>
|
|
|
+ </div>
|
|
|
+ <div id="dcl1" class="layer-one-s5"><img width="100%" src="img/fifth/Documento liston0.png" alt="Doc Loston"></div>
|
|
|
+ <div id="dcl2" class="layer-two-s5"><img width="100%" src="img/fifth/Documento liston0.png" alt="Doc Loston"></div>
|
|
|
+ <div id="dcl3" class="layer-three-s5"><img width="100%" src="img/fifth/Documento liston0.png" alt="Doc Loston"></div>
|
|
|
+ <div id="plus1s5" class="layer-four-s5"><img src="img/Mas0.png" alt="Plus"></div>
|
|
|
+ <div id="plus2s5" class="layer-five-s5"><img src="img/Mas0.png" alt="Plus"></div>
|
|
|
+ <div id="dot1s5" class="layer-six-s5"><img src="img/Circulin0.png" alt="Dot"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="separator">
|
|
|
+ <img width="100%" height="100%" src="img/Separador1_10.png" alt="Separador">
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <div class="hidden-movil">
|
|
|
+ <div id="menu-bottom" class="ul-menu-bottom">
|
|
|
+ <div class="li-menu centrar"><a class="menu-item blue-bottom" href="index.html">Inicio</a></div>
|
|
|
+ <div class="li-menu centrar"><a class="menu-item blue-bottom" href="conocenos.html">Conócenos</a></div>
|
|
|
+ <div class="li-menu centrar"><a class="menu-item blue-bottom" href="funciones.html">Funciones</a></div>
|
|
|
+ <div class="li-menu centrar"><a class="menu-item blue-bottom" href="contacto.php">Contacto</a></div>
|
|
|
+ <div class="li-menu centrar"><a class="menu-item blue-bottom" href="apoyo-covid-19.html">COVID-19</a></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <footer>
|
|
|
+ <div id="footer-part-1">
|
|
|
+ <div class="footer-izq">
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ <div id="hr1" class="vl"></div>
|
|
|
+ <div class="footer-cen">
|
|
|
+ <h1 id="footer-title" class="footer-title txt-gray">Contacto</h1>
|
|
|
+ <p class="txt-gray" id="footer-txt">
|
|
|
+ <i class="icon-volume-control-phone"></i> (55) 6267 2444 <br>
|
|
|
+ <i class="icon-mail-alt"></i> soluciones@ittec.mx <br>
|
|
|
+ <i class="icon-globe"></i> www.plataforma-educativa.com.mx
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div id="hr2" class="vl"></div>
|
|
|
+ <div class="footer-der">
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="footer-part-2">
|
|
|
+ <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 ©
|
|
|
+ ITTEC. Tecnología inteligente. Todos los derechos reservados.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
+</body>
|
|
|
+<script type="text/javascript">
|
|
|
+ var body = document.body;
|
|
|
+ var contMsg1 = 0;
|
|
|
+ var contMsg2 = 0;
|
|
|
+ var contMsg3 = 0;
|
|
|
+ body.scrollTop += 10;
|
|
|
+ var cont = 1;
|
|
|
+ setInterval('contador1()', 750);
|
|
|
+
|
|
|
+ function contador1() {
|
|
|
+ if (cont > 2) {
|
|
|
+ $('#covid').addClass('pulse');
|
|
|
+ }
|
|
|
+ if (cont > 4) {
|
|
|
+ $('#part1').addClass('goOut');
|
|
|
+ $('#part2').addClass('goOut');
|
|
|
+ $('#part3').addClass('goOut');
|
|
|
+ $('#part4').addClass('goOut');
|
|
|
+ }
|
|
|
+ if (cont > 7) {
|
|
|
+ $('#part1').css({
|
|
|
+ 'visibility': 'hidden'
|
|
|
+ });
|
|
|
+ $('#part2').css({
|
|
|
+ 'visibility': 'hidden'
|
|
|
+ });
|
|
|
+ $('#part3').css({
|
|
|
+ 'visibility': 'hidden'
|
|
|
+ });
|
|
|
+ $('#part4').css({
|
|
|
+ 'visibility': 'hidden'
|
|
|
+ });
|
|
|
+ $('#fondo-2').addClass('fadeIn');
|
|
|
+ $('#fondo-3').addClass('bigEntrance');
|
|
|
+ $('#fondo-4').addClass('slideLeft');
|
|
|
+ $('#streaming-content').addClass('slideRight');
|
|
|
+ }
|
|
|
+ cont++;
|
|
|
+ }
|
|
|
+ var scrolled = 1;
|
|
|
+ var value = 0;
|
|
|
+ var signo = 1;
|
|
|
+
|
|
|
+ function isMobile() {
|
|
|
+ return (
|
|
|
+ (navigator.userAgent.match(/Android/i)) ||
|
|
|
+ (navigator.userAgent.match(/webOS/i)) ||
|
|
|
+ (navigator.userAgent.match(/iPhone/i)) ||
|
|
|
+ (navigator.userAgent.match(/iPod/i)) ||
|
|
|
+ (navigator.userAgent.match(/iPad/i)) ||
|
|
|
+ (navigator.userAgent.match(/BlackBerry/i))
|
|
|
+ );
|
|
|
+ }
|
|
|
+ if (isMobile()) {
|
|
|
+ $('#menu-bottom').remove();
|
|
|
+ $('#footer-part-1').css({
|
|
|
+ 'margin-top': '70px'
|
|
|
+ });
|
|
|
+ $('#cam1').remove();
|
|
|
+ $('#cam2').remove();
|
|
|
+ $('#cam3').remove();
|
|
|
+ $('#doc1').remove();
|
|
|
+ $('#doc2').remove();
|
|
|
+ $('#doc3').remove();
|
|
|
+ $('#book1').remove();
|
|
|
+ $('#book2').remove();
|
|
|
+ $('#book3').remove();
|
|
|
+ $('#book4').remove();
|
|
|
+ $('#copo1').remove();
|
|
|
+ $('#copo2').remove();
|
|
|
+ $('#hoja1').remove();
|
|
|
+ $('#msg1').remove();
|
|
|
+ $('#msg2').remove();
|
|
|
+ $('#msg3').remove();
|
|
|
+ $('#dcl1').remove();
|
|
|
+ $('#dcl2').remove();
|
|
|
+ $('#dcl3').remove();
|
|
|
+ $('#dot1').remove();
|
|
|
+ $('#dot2').remove();
|
|
|
+ $('#plus2').remove();
|
|
|
+ $('#plus1s0').css({
|
|
|
+ 'margin-left': ($(window).width() * 0.3)
|
|
|
+ });
|
|
|
+ $('#plus1s2').css({
|
|
|
+ 'margin-left': ($(window).width() * 0.001)
|
|
|
+ });
|
|
|
+ $('#plus2s2').css({
|
|
|
+ 'margin-left': ($(window).width() * 0.4)
|
|
|
+ });
|
|
|
+ $('#plus3s2').css({
|
|
|
+ 'margin-left': ($(window).width() * -0.4)
|
|
|
+ });
|
|
|
+ $('#plus1s3').css({
|
|
|
+ 'margin-left': ($(window).width() * 0.4)
|
|
|
+ });
|
|
|
+ $('#plus2s3').css({
|
|
|
+ 'margin-left': ($(window).width() * -0.4)
|
|
|
+ });
|
|
|
+ $('#plus1s4').css({
|
|
|
+ 'margin-left': ($(window).width() * 0.35)
|
|
|
+ });
|
|
|
+ $('#plus2s4').css({
|
|
|
+ 'margin-left': ($(window).width() * -0.2)
|
|
|
+ });
|
|
|
+ $('#plus1s5').css({
|
|
|
+ 'margin-left': ($(window).width() * 0.1)
|
|
|
+ });
|
|
|
+ $('#plus2s5').css({
|
|
|
+ 'margin-left': ($(window).width() * -0.25)
|
|
|
+ });
|
|
|
+ $('.header').css({
|
|
|
+ 'background': 'rgba(255, 255, 255, 0.5)'
|
|
|
+ });
|
|
|
+ $('#link1').removeClass('white');
|
|
|
+ $('#link1').addClass('strong-blue');
|
|
|
+ $('#link2').removeClass('white');
|
|
|
+ $('#link2').addClass('strong-blue');
|
|
|
+ $('#link3').removeClass('white');
|
|
|
+ $('#link3').addClass('strong-blue');
|
|
|
+ $('#link4').removeClass('white');
|
|
|
+ $('#link4').addClass('strong-blue');
|
|
|
+ $('#covid').removeClass('white-button');
|
|
|
+ $('#covid').addClass('strong-blue-button');
|
|
|
+ $('#menu').removeClass('hide')
|
|
|
+ }
|
|
|
+ $(window).scroll(function() {
|
|
|
+ var topOfWindow = $(window).scrollTop();
|
|
|
+ var barra = $(window).scrollTop();
|
|
|
+ var barra = $(window).scrollTop();
|
|
|
+ var ventanaAncho = $(window).width();
|
|
|
+ var escala1 = 15 + (barra / 10);
|
|
|
+ var escala2 = -21 + (barra / 5);
|
|
|
+ var escala3 = -21 - (barra / 15);
|
|
|
+ var posicionDoc1 = 1000 - (barra * 0.35) + 150;
|
|
|
+ var posicionDoc1X = ventanaAncho * 0.60;
|
|
|
+ var posicionDoc2 = 250 - (barra * 0.35) + 250;
|
|
|
+ var posicionDoc2X = ventanaAncho * 0.75;
|
|
|
+ var posicionDoc3 = 900 - (barra * 0.35) + 250;
|
|
|
+ var posicionDoc3X = ventanaAncho * 0.65;
|
|
|
+ var posicionDot1 = -360 + (barra * 0.50) - 250;
|
|
|
+ var posicionDot1X = ventanaAncho * 0.05;
|
|
|
+ var posicionDot2 = -280 + (barra * 0.50) - 250;
|
|
|
+ var posicionDot2X = ventanaAncho * 0.87;
|
|
|
+ var posicionPlus1 = -180 + (barra * 0.50) - 250;
|
|
|
+ var posicionPlus1X = ventanaAncho * 0.375;
|
|
|
+ var posicionPlus2 = -100 + (barra * 0.50) - 250;
|
|
|
+ var posicionPlus2X = ventanaAncho * 0.65;
|
|
|
+ if (posicionDoc1 >= 360) {
|
|
|
+ $('#doc1').css({
|
|
|
+ 'transform': 'translateX(' + posicionDoc1X + 'px) rotate(15deg) translateY(' + posicionDoc1 + 'px)'
|
|
|
+ });
|
|
|
+ $('#doc1').css({
|
|
|
+ 'width': '100px'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ var posicionDoc1Tmp = 60 + (barra * 0.35);
|
|
|
+ var ancho1 = 100 + (barra / 100);
|
|
|
+ $('#doc1').css({
|
|
|
+ 'width': ancho1 + 'px'
|
|
|
+ });
|
|
|
+ $('#doc1').css({
|
|
|
+ 'transform': 'translateX(' + posicionDoc1X + 'px) rotate(15deg) translateY(' + posicionDoc1Tmp + 'px)'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (posicionDoc3 >= 360) {
|
|
|
+ $('#doc3').css({
|
|
|
+ 'transform': 'translateX(' + posicionDoc3X + 'px) rotate(-20deg) translateY(' + posicionDoc3 + 'px)'
|
|
|
+ });
|
|
|
+ $('#doc3').css({
|
|
|
+ 'width': '70px'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ var ancho3 = 70 + (barra / 120);
|
|
|
+ var posicionDoc3Tmp = 60 + (barra * 0.35);
|
|
|
+ $('#doc3').css({
|
|
|
+ 'width': ancho3 + 'px'
|
|
|
+ });
|
|
|
+ $('#doc3').css({
|
|
|
+ 'transform': 'translateX(' + posicionDoc3X + 'px) rotate(-20deg) translateY(' + posicionDoc3Tmp + 'px)'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ $('#doc2').css({
|
|
|
+ 'transform': 'translateX(' + posicionDoc2X + 'px) rotate(-20deg) translateY(' + posicionDoc2 + 'px)'
|
|
|
+ });
|
|
|
+ $('#dot1').css({
|
|
|
+ 'transform': 'translateX(' + posicionDot1X + 'px) translateY(' + posicionDot1 + 'px)'
|
|
|
+ });
|
|
|
+ $('#dot2').css({
|
|
|
+ 'transform': 'translateX(' + posicionDot2X + 'px) translateY(' + posicionDot2 + 'px)'
|
|
|
+ });
|
|
|
+ $('#plus1').css({
|
|
|
+ 'transform': 'translateX(' + posicionPlus1X + 'px) translateY(' + posicionPlus1 + 'px)'
|
|
|
+ });
|
|
|
+ $('#plus2').css({
|
|
|
+ 'transform': 'translateX(' + posicionPlus2X + 'px) translateY(' + posicionPlus2 + 'px)'
|
|
|
+ });
|
|
|
+ $('#img-source-0').each(function() {
|
|
|
+ var imagePos = $(this).offset().top;
|
|
|
+ if (imagePos < topOfWindow + 450) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00007.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 435) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00008.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 420) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00009.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 405) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00010.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 390) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00011.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 375) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00012.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 360) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00014.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 345) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00015.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 330) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00017.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 315) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00018.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 300) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00020.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 285) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00021.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 270) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00022.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 255) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00024.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 240) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00025.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 225) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00027.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 210) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00028.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 195) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00030.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 180) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00031.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 165) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00032.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 150) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00033.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 135) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00034.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 120) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00036.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 105) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00038.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 90) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00039.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 75) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00040.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 60) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00041.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 45) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00042.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 30) {
|
|
|
+ $(this).attr("src", "img/zero/Animacion_00043.png");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#img-source-1').each(function() {
|
|
|
+ var imagePos = $(this).offset().top;
|
|
|
+ if (imagePos < topOfWindow + 600) {
|
|
|
+ $(this).attr("src", "img/first/animacion r10.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 580) {
|
|
|
+ $(this).attr("src", "img/first/h10.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 540) {
|
|
|
+ $(this).attr("src", "img/first/h20.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 520) {
|
|
|
+ $(this).attr("src", "img/first/h30.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 500) {
|
|
|
+ $(this).attr("src", "img/first/h40.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 480) {
|
|
|
+ $("#img-source-1").attr("src", "img/first/h50.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 460) {
|
|
|
+ $(this).attr("src", "img/first/h60.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 440) {
|
|
|
+ $(this).attr("src", "img/first/h70.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 420) {
|
|
|
+ $(this).attr("src", "img/first/h80.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 400) {
|
|
|
+ $(this).attr("src", "img/first/h90.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 380) {
|
|
|
+ $(this).attr("src", "img/first/h100.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 360) {
|
|
|
+ $("#img-source-1").attr("src", "img/first/h110.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 340) {
|
|
|
+ $(this).attr("src", "img/first/h120.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 320) {
|
|
|
+ $(this).attr("src", "img/first/h130.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 300) {
|
|
|
+ $(this).attr("src", "img/first/h140.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 280) {
|
|
|
+ $(this).attr("src", "img/first/h150.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 260) {
|
|
|
+ $(this).attr("src", "img/first/h160.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 240) {
|
|
|
+ $(this).attr("src", "img/first/h170.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 220) {
|
|
|
+ $(this).attr("src", "img/first/h180.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 200) {
|
|
|
+ $(this).attr("src", "img/first/animacion 20.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 180) {
|
|
|
+ $(this).attr("src", "img/first/animacion 30.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 160) {
|
|
|
+ $(this).attr("src", "img/first/animacion 40.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 140) {
|
|
|
+ $(this).attr("src", "img/first/animacion 50.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 120) {
|
|
|
+ $(this).attr("src", "img/first/animacion 60.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 100) {
|
|
|
+ $(this).attr("src", "img/first/animacion 70.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 80) {
|
|
|
+ $(this).attr("src", "img/first/animacion 80.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 60) {
|
|
|
+ $(this).attr("src", "img/first/animacion 90.png");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#img-source-2').each(function() {
|
|
|
+ var imagePos = $(this).offset().top;
|
|
|
+ if (imagePos < topOfWindow + 510) {
|
|
|
+ $(this).attr("src", "img/second/TR 10.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 480) {
|
|
|
+ $(this).attr("src", "img/second/TR 20.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 450) {
|
|
|
+ $(this).attr("src", "img/second/TR 30.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 420) {
|
|
|
+ $(this).attr("src", "img/second/TR 40.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 390) {
|
|
|
+ $(this).attr("src", "img/second/TR 50.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 360) {
|
|
|
+ $(this).attr("src", "img/second/TR 60.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 330) {
|
|
|
+ $(this).attr("src", "img/second/TR 70.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 300) {
|
|
|
+ $(this).attr("src", "img/second/TR 80.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 270) {
|
|
|
+ $(this).attr("src", "img/second/TR 90.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 240) {
|
|
|
+ $(this).attr("src", "img/second/TR 100.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 210) {
|
|
|
+ $(this).attr("src", "img/second/TR 110.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 180) {
|
|
|
+ $(this).attr("src", "img/second/TR 120.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 150) {
|
|
|
+ $(this).attr("src", "img/second/TR 130.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 120) {
|
|
|
+ $(this).attr("src", "img/second/TR 140.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 90) {
|
|
|
+ $(this).attr("src", "img/second/TR 150.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 60) {
|
|
|
+ $(this).attr("src", "img/second/TR 160.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 30) {
|
|
|
+ $(this).attr("src", "img/second/TR 170.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow) {
|
|
|
+ $(this).attr("src", "img/second/TR 180.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow - 30) {
|
|
|
+ $(this).attr("src", "img/second/TR 190.png");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#img-source-3').each(function() {
|
|
|
+ var imagePos = $(this).offset().top;
|
|
|
+ if (imagePos < topOfWindow + 450) {
|
|
|
+ $(this).attr("src", "img/third/Calendar10.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 425) {
|
|
|
+ $(this).attr("src", "img/third/Calendar20.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 400) {
|
|
|
+ $(this).attr("src", "img/third/Calendar30.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 375) {
|
|
|
+ $(this).attr("src", "img/third/Calendar40.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 350) {
|
|
|
+ $(this).attr("src", "img/third/Calendar50.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 325) {
|
|
|
+ $(this).attr("src", "img/third/Calendar60.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 300) {
|
|
|
+ $(this).attr("src", "img/third/Calendar70.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 275) {
|
|
|
+ $(this).attr("src", "img/third/Calendar80.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 250) {
|
|
|
+ $(this).attr("src", "img/third/Calendar90.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 225) {
|
|
|
+ $(this).attr("src", "img/third/Calendar100.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 200) {
|
|
|
+ $(this).attr("src", "img/third/Calendar110.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 175) {
|
|
|
+ $(this).attr("src", "img/third/Calendar120.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 150) {
|
|
|
+ $(this).attr("src", "img/third/Calendar130.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 125) {
|
|
|
+ $(this).attr("src", "img/third/Calendar140.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 100) {
|
|
|
+ $("#img-source-3").attr("src", "img/third/Calendar150.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 75) {
|
|
|
+ $(this).attr("src", "img/third/Calendar160.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 50) {
|
|
|
+ $(this).attr("src", "img/third/Calendar170.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 25) {
|
|
|
+ $(this).attr("src", "img/third/Calendar180.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow) {
|
|
|
+ $(this).attr("src", "img/third/Calendar190.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow - 25) {
|
|
|
+ $(this).attr("src", "img/third/Calendar200.png");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#img-source-4').each(function() {
|
|
|
+ var imagePos = $(this).offset().top;
|
|
|
+ if (imagePos < topOfWindow + 440) {
|
|
|
+ $(this).attr("src", "img/fourth/Compu anima10.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 420) {
|
|
|
+ $(this).attr("src", "img/fourth/Compu anima20.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 400) {
|
|
|
+ $(this).attr("src", "img/fourth/Compu anima30.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 380) {
|
|
|
+ $(this).attr("src", "img/fourth/Compu anima40.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 360) {
|
|
|
+ $(this).attr("src", "img/fourth/Compu anima50.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 340) {
|
|
|
+ $(this).attr("src", "img/fourth/Compu anima60.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 320) {
|
|
|
+ $(this).attr("src", "img/fourth/Compu anima70.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 300) {
|
|
|
+ $(this).attr("src", "img/fourth/Compu anima80.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 280) {
|
|
|
+ $(this).attr("src", "img/fourth/Compu anima90.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 260) {
|
|
|
+ $(this).attr("src", "img/fourth/Compu anima100.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 240) {
|
|
|
+ $(this).attr("src", "img/fourth/Compu anima110.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 220) {
|
|
|
+ $(this).attr("src", "img/fourth/Compu anima120.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 200) {
|
|
|
+ $(this).attr("src", "img/fourth/Compu anima130.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 180) {
|
|
|
+ $(this).attr("src", "img/fourth/Compu anima140.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 160) {
|
|
|
+ $(this).attr("src", "img/fourth/Compu anima150.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 140) {
|
|
|
+ $(this).attr("src", "img/fourth/Compu anima160.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 120) {
|
|
|
+ $(this).attr("src", "img/fourth/Compu anima170.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 100) {
|
|
|
+ $(this).attr("src", "img/fourth/Compu anima180.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 80) {
|
|
|
+ $(this).attr("src", "img/fourth/Compu anima190.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 60) {
|
|
|
+ $(this).attr("src", "img/fourth/Compu anima200.png");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#img-source-5').each(function() {
|
|
|
+ var imagePos = $(this).offset().top;
|
|
|
+ if (imagePos < topOfWindow + 375) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima10.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 360) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima20.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 345) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima30.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 340) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima40.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 330) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima50.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 320) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima60.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 310) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima70.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 300) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima80.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 290) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima90.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 275) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima100.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 260) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima110.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 245) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima120.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 230) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima130.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 215) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima140.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 200) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima150.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 190) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima160.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 180) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima170.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 170) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima180.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 160) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima190.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 145) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima200.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 130) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima210.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 120) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima220.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 110) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima230.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 100) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima240.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 90) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima250.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 75) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima260.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 60) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima270.png");
|
|
|
+ }
|
|
|
+ if (imagePos < topOfWindow + 45) {
|
|
|
+ $(this).attr("src", "img/fifth/Tablero anima280.png");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#book1').each(function() {
|
|
|
+ var rotar = 230 - (barra * 0.10);
|
|
|
+ var blur = barra / 1000;
|
|
|
+ var ancho = 125 - (barra / 50);
|
|
|
+ var marginTop = 1200 - barra / 2.3;
|
|
|
+ $(this).css({
|
|
|
+ 'transform': 'rotate(' + rotar + 'deg)'
|
|
|
+ });
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ $(this).css({
|
|
|
+ 'width': ancho + 'px'
|
|
|
+ })
|
|
|
+ $(this).css({
|
|
|
+ 'filter': 'blur(' + blur + 'px)'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#book2').each(function() {
|
|
|
+ var rotar = 35 - (barra * 0.10);
|
|
|
+ var marginTop = 1000 - barra / 7;
|
|
|
+ $(this).css({
|
|
|
+ 'transform': 'rotate(' + rotar + 'deg)'
|
|
|
+ });
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#book3').each(function() {
|
|
|
+ var rotar = 230 - (barra * 0.10);
|
|
|
+ var marginTop = 875 - barra / 8;
|
|
|
+ $(this).css({
|
|
|
+ 'transform': 'rotate(' + rotar + 'deg)'
|
|
|
+ });
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#book4').each(function() {
|
|
|
+ var rotar = 90 - (barra * 0.10);
|
|
|
+ var marginTop = 800 - barra / 3;
|
|
|
+ $(this).css({
|
|
|
+ 'transform': 'rotate(' + rotar + 'deg)'
|
|
|
+ });
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#dot1s2').each(function() {
|
|
|
+ var marginTop = -500 + barra / 5;
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#plus1s2').each(function() {
|
|
|
+ var marginTop = 50 + barra / 3;
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#plus2s2').each(function() {
|
|
|
+ var marginTop = -700 + barra / 3;
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#plus3s2').each(function() {
|
|
|
+ var marginTop = -500 + barra / 5;
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#hoja1').each(function() {
|
|
|
+ var rotar = 230 - (barra * 0.10);
|
|
|
+ var marginTop = barra / 8;
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ });
|
|
|
+ if (cont % 2 == 1) {
|
|
|
+ $(this).css({
|
|
|
+ 'margin-left': '760px'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ $(this).css({
|
|
|
+ 'margin-left': '800px'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#copo1').each(function() {
|
|
|
+ var rotar = 230 - (barra * 0.10);
|
|
|
+ var marginTop = -50 + barra / 25;
|
|
|
+ var ancho = 190 - (barra / 40);
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ $(this).css({
|
|
|
+ 'transform': 'rotate(' + rotar + 'deg)'
|
|
|
+ });
|
|
|
+ $(this).css({
|
|
|
+ 'width': ancho + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#copo2').each(function() {
|
|
|
+ var rotar = 90 + (barra * 0.05);
|
|
|
+ var marginTop = -150 + barra / 7;
|
|
|
+ var ancho = 190 + (barra / 40);
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ $(this).css({
|
|
|
+ 'transform': 'rotate(' + rotar + 'deg)'
|
|
|
+ });
|
|
|
+ $(this).css({
|
|
|
+ 'width': ancho + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#dot1s3').each(function() {
|
|
|
+ var marginTop = -700 + barra / 5;
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#plus1s3').each(function() {
|
|
|
+ var marginTop = -950 + barra / 3;
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#plus2s3').each(function() {
|
|
|
+ var marginTop = -600 + barra / 6;
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#msg1').each(function() {
|
|
|
+ scrolled = barra;
|
|
|
+ if (value < scrolled) {
|
|
|
+ signo = 1;
|
|
|
+ value = scrolled;
|
|
|
+ } else {
|
|
|
+ if (value > scrolled) {
|
|
|
+ signo = -1;
|
|
|
+ value = scrolled;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ contMsg1 = contMsg1 + signo;
|
|
|
+ var rotar = 45 - (barra * 0.10);
|
|
|
+ var blur = barra / 1800;
|
|
|
+ var ancho = 175 + contMsg1 / (barra / 2);
|
|
|
+ var marginTop = 1950 - barra / 2.3;
|
|
|
+ $(this).css({
|
|
|
+ 'transform': 'rotate(' + rotar + 'deg)'
|
|
|
+ });
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ $(this).css({
|
|
|
+ 'width': ancho + 'px'
|
|
|
+ })
|
|
|
+ $(this).css({
|
|
|
+ 'filter': 'blur(' + blur + 'px)'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#msg2').each(function() {
|
|
|
+ var rotar = 180 + (barra * 0.10);
|
|
|
+ var blur = barra / 2800;
|
|
|
+ var ancho = 150 + barra / 1890;
|
|
|
+ var marginTop = 2550 - barra / 2.3;
|
|
|
+ $(this).css({
|
|
|
+ 'transform': 'rotate(' + rotar + 'deg)'
|
|
|
+ });
|
|
|
+ if (marginTop > 429) {
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ var marginTopTmp = 400 + barra / 100;
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTopTmp + 'px'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ $(this).css({
|
|
|
+ 'width': ancho + 'px'
|
|
|
+ })
|
|
|
+ $(this).css({
|
|
|
+ 'filter': 'blur(' + blur + 'px)'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#msg3').each(function() {
|
|
|
+ var rotar = 270 + (barra * 0.10);
|
|
|
+ var ancho = 50 + barra / 100;
|
|
|
+ var marginTop = 1850 - barra / 2.3;
|
|
|
+ $(this).css({
|
|
|
+ 'transform': 'rotate(' + rotar + 'deg)'
|
|
|
+ });
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ $(this).css({
|
|
|
+ 'width': ancho + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#dot1s4').each(function() {
|
|
|
+ var marginTop = -350 + barra / 5;
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#plus1s4').each(function() {
|
|
|
+ var marginTop = -1200 + barra / 3;
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#plus2s4').each(function() {
|
|
|
+ var marginTop = -700 + barra / 6;
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#dcl1').each(function() {
|
|
|
+ scrolled = barra;
|
|
|
+ if (value < scrolled) {
|
|
|
+ signo = 1;
|
|
|
+ value = scrolled;
|
|
|
+ } else {
|
|
|
+ if (value > scrolled) {
|
|
|
+ signo = -1;
|
|
|
+ value = scrolled;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ contMsg1 = contMsg1 + signo;
|
|
|
+ var rotar = 45 - (barra * 0.10);
|
|
|
+ var blur = barra / 2800;
|
|
|
+ var ancho = 135 + contMsg1 / (barra / 2);
|
|
|
+ var marginTop = 2150 - barra / 3.2;
|
|
|
+ $(this).css({
|
|
|
+ 'transform': 'rotate(' + rotar + 'deg)'
|
|
|
+ });
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ $(this).css({
|
|
|
+ 'width': ancho + 'px'
|
|
|
+ })
|
|
|
+ $(this).css({
|
|
|
+ 'filter': 'blur(' + blur + 'px)'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#dcl2').each(function() {
|
|
|
+ var rotar = 180 + (barra * 0.10);
|
|
|
+ var blur = barra / 2800;
|
|
|
+ var ancho = 80 + barra / 1890;
|
|
|
+ var marginTop = 1000 - barra / 5;
|
|
|
+ $(this).css({
|
|
|
+ 'transform': 'rotate(' + rotar + 'deg)'
|
|
|
+ });
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ $(this).css({
|
|
|
+ 'width': ancho + 'px'
|
|
|
+ })
|
|
|
+ $(this).css({
|
|
|
+ 'filter': 'blur(' + blur + 'px)'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#dcl3').each(function() {
|
|
|
+ var rotar = 270 + (barra * 0.10);
|
|
|
+ var ancho = 150 + barra / 100;
|
|
|
+ var marginTop = 450 - barra / 100;
|
|
|
+ $(this).css({
|
|
|
+ 'transform': 'rotate(' + rotar + 'deg)'
|
|
|
+ });
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ $(this).css({
|
|
|
+ 'width': ancho + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#dot1s5').each(function() {
|
|
|
+ var marginTop = -950 + barra / 5;
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#plus1s5').each(function() {
|
|
|
+ var marginTop = -1700 + barra / 3;
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#plus2s5').each(function() {
|
|
|
+ var marginTop = -700 + barra / 6;
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#texto-0').each(function() {
|
|
|
+ var imagePos = $(this).offset().top;
|
|
|
+ if (imagePos < topOfWindow + 400) {
|
|
|
+ $(this).addClass("slideRight");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#texto').each(function() {
|
|
|
+ var imagePos = $(this).offset().top;
|
|
|
+ if (imagePos < topOfWindow + 400) {
|
|
|
+ $(this).addClass("slideLeft");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#texto-1').each(function() {
|
|
|
+ var imagePos = $(this).offset().top;
|
|
|
+ if (imagePos < topOfWindow + 400) {
|
|
|
+ $(this).addClass("slideRight");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#texto-2').each(function() {
|
|
|
+ var imagePos = $(this).offset().top;
|
|
|
+ if (imagePos < topOfWindow + 400) {
|
|
|
+ $(this).addClass("slideLeft");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#texto-3').each(function() {
|
|
|
+ var imagePos = $(this).offset().top;
|
|
|
+ if (imagePos < topOfWindow + 600) {
|
|
|
+ $(this).addClass("slideRight");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#texto-4').each(function() {
|
|
|
+ var imagePos = $(this).offset().top;
|
|
|
+ if (imagePos < topOfWindow + 400) {
|
|
|
+ $(this).addClass("slideLeft");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#texto-5').each(function() {
|
|
|
+ var imagePos = $(this).offset().top;
|
|
|
+ if (imagePos < topOfWindow + 400) {
|
|
|
+ $(this).addClass("slideRight");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#fondo-2').each(function() {
|
|
|
+ var marginTop = barra * 0.01;
|
|
|
+ $(this).css({
|
|
|
+ 'top': -marginTop + '%'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#fondo-3').each(function() {
|
|
|
+ var marginTop = -barra * 0.05;
|
|
|
+ $(this).css({
|
|
|
+ 'top': marginTop + '%'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#fondo-4').each(function() {
|
|
|
+ var marginTop = -barra * 0.5;
|
|
|
+ $(this).css({
|
|
|
+ 'transform': 'translateY(' + marginTop + 'px)'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#fondo-5').each(function() {
|
|
|
+ var marginTop = 0 - barra * 0.13;
|
|
|
+ $(this).css({
|
|
|
+ 'top': marginTop + '%'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('.hide').each(function() {
|
|
|
+ if (barra > 15) {
|
|
|
+ $(this).css({
|
|
|
+ 'opacity': '0'
|
|
|
+ });
|
|
|
+ $('#link1').removeClass('blue');
|
|
|
+ $('#link1').addClass('strong-blue');
|
|
|
+ $('#link2').removeClass('blue');
|
|
|
+ $('#link2').addClass('strong-blue');
|
|
|
+ $('#link3').removeClass('white');
|
|
|
+ $('#link3').addClass('strong-blue');
|
|
|
+ $('#link4').removeClass('white');
|
|
|
+ $('#link4').addClass('strong-blue');
|
|
|
+ $('#covid').removeClass('white-button');
|
|
|
+ $('#covid').addClass('strong-blue-button');
|
|
|
+ } else {
|
|
|
+ $(this).css({
|
|
|
+ 'opacity': '1'
|
|
|
+ });
|
|
|
+ $('#link1').removeClass('strong-blue');
|
|
|
+ $('#link1').addClass('blue');
|
|
|
+ $('#link2').removeClass('strong-blue');
|
|
|
+ $('#link2').addClass('blue');
|
|
|
+ $('#link3').removeClass('strong-blue');
|
|
|
+ $('#link3').addClass('white');
|
|
|
+ $('#link4').removeClass('strong-blue');
|
|
|
+ $('#link4').addClass('white');
|
|
|
+ $('#covid').removeClass('strong-blue-button');
|
|
|
+ $('#covid').addClass('white-button');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#cam1').each(function() {
|
|
|
+ var rotar = 210 + (barra * 0.10);
|
|
|
+ var ancho = 150 + barra / 100;
|
|
|
+ var marginTop = 550 - barra / 100;
|
|
|
+ $(this).css({
|
|
|
+ 'transform': 'rotate(' + rotar + 'deg)'
|
|
|
+ });
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ $(this).css({
|
|
|
+ 'width': ancho + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#cam2').each(function() {
|
|
|
+ var rotar = -145 + (barra * 0.10);
|
|
|
+ var ancho = 75 + barra / 100;
|
|
|
+ var marginTop = 150 - barra / 5;
|
|
|
+ $(this).css({
|
|
|
+ 'transform': 'rotate(' + rotar + 'deg)'
|
|
|
+ });
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ $(this).css({
|
|
|
+ 'width': ancho + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#cam3').each(function() {
|
|
|
+ var rotar = 220 + (barra * 0.10);
|
|
|
+ var ancho = 100 + barra / 100;
|
|
|
+ var marginTop = 500 - barra / 100;
|
|
|
+ $(this).css({
|
|
|
+ 'transform': 'scaleX(-1) rotate(' + rotar + 'deg)'
|
|
|
+ });
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ $(this).css({
|
|
|
+ 'width': ancho + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#dot1s0').each(function() {
|
|
|
+ var marginTop = -150 + barra / 2.3;
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#dot2s0').each(function() {
|
|
|
+ var marginTop = -200 + barra / 5;
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $('#plus1s0').each(function() {
|
|
|
+ var marginTop = -200 + barra / 2.3;
|
|
|
+ $(this).css({
|
|
|
+ 'margin-top': marginTop + 'px'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ });
|
|
|
+ $('.hide').hover(function() {
|
|
|
+ $(this).css({
|
|
|
+ 'opacity': '1'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ $('.hide').mouseleave(function() {
|
|
|
+ var barra = $(window).scrollTop();
|
|
|
+ if (barra > 150) {
|
|
|
+ $(this).css({
|
|
|
+ 'opacity': '0'
|
|
|
+ });
|
|
|
+ $('#link1').removeClass('blue');
|
|
|
+ $('#link1').addClass('strong-blue');
|
|
|
+ $('#link2').removeClass('blue');
|
|
|
+ $('#link2').addClass('strong-blue');
|
|
|
+ $('#link3').removeClass('white');
|
|
|
+ $('#link3').addClass('strong-blue');
|
|
|
+ $('#link4').removeClass('white');
|
|
|
+ $('#link4').addClass('strong-blue');
|
|
|
+ $('#covid').removeClass('white-button');
|
|
|
+ $('#covid').addClass('strong-blue-button');
|
|
|
+ } else {
|
|
|
+ $(this).css({
|
|
|
+ 'opacity': '1'
|
|
|
+ });
|
|
|
+ $('#link1').removeClass('strong-blue');
|
|
|
+ $('#link1').addClass('blue');
|
|
|
+ $('#link2').removeClass('strong-blue');
|
|
|
+ $('#link2').addClass('blue');
|
|
|
+ $('#link3').removeClass('strong-blue');
|
|
|
+ $('#link3').addClass('white');
|
|
|
+ $('#link4').removeClass('strong-blue');
|
|
|
+ $('#link4').addClass('white');
|
|
|
+ $('#covid').removeClass('strong-blue-button');
|
|
|
+ $('#covid').addClass('white-button');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('footer').hover(function() {
|
|
|
+ $(this).css({
|
|
|
+ 'background-color': '#555'
|
|
|
+ });
|
|
|
+ $('#hr1').css({
|
|
|
+ 'border-left': '2px solid #fff'
|
|
|
+ });
|
|
|
+ $('#hr2').css({
|
|
|
+ 'border-left': '2px solid #fff'
|
|
|
+ });
|
|
|
+ $('#footer-txt').removeClass('txt-gray');
|
|
|
+ $('#footer-txt').addClass('txt-white');
|
|
|
+ $('#footer-title').removeClass('txt-gray');
|
|
|
+ $('#footer-title').addClass('txt-white');
|
|
|
+ $('#copy').removeClass('txt-gray');
|
|
|
+ $('#copy').addClass('txt-white');
|
|
|
+ $('#privacidad').removeClass('txt-gray');
|
|
|
+ $('#privacidad').addClass('txt-white');
|
|
|
+ $('#terminos').removeClass('txt-gray');
|
|
|
+ $('#terminos').addClass('txt-white');
|
|
|
+ $('#footer-img-izq').removeClass('img-gray');
|
|
|
+ $('#footer-img-der').removeClass('img-gray');
|
|
|
+ });
|
|
|
+ $('footer').mouseleave(function() {
|
|
|
+ $(this).css({
|
|
|
+ 'background-color': 'rgba(0, 0, 0, 0)'
|
|
|
+ });
|
|
|
+ $('#hr1').css({
|
|
|
+ 'border-left': '2px solid #555'
|
|
|
+ });
|
|
|
+ $('#hr2').css({
|
|
|
+ 'border-left': '2px solid #555'
|
|
|
+ });
|
|
|
+ $('#footer-txt').removeClass('txt-white');
|
|
|
+ $('#footer-txt').addClass('txt-gray');
|
|
|
+ $('#footer-title').removeClass('txt-white');
|
|
|
+ $('#footer-title').addClass('txt-gray');
|
|
|
+ $('#copy').removeClass('txt-white');
|
|
|
+ $('#copy').addClass('txt-gray');
|
|
|
+ $('#privacidad').removeClass('txt-white');
|
|
|
+ $('#privacidad').addClass('txt-gray');
|
|
|
+ $('#terminos').removeClass('txt-white');
|
|
|
+ $('#terminos').addClass('txt-gray');
|
|
|
+ $('#footer-img-izq').addClass('img-gray');
|
|
|
+ $('#footer-img-der').addClass('img-gray');
|
|
|
+ });
|
|
|
+</script>
|
|
|
+
|
|
|
+</html>
|
