2

Muy buenos días, me han pasado un proyecto hecho en algún framework que desconozco y donde el desarrollador solo le ha compartido el proyecto ya en producción. El asunto es que tiene un efecto de scroll en toda la página, que hace que al menor movimiento de scroll con la rueda del mouse salte muy abajo o muy arriba. Efecto que solo creo que se aprecia en monitores.

El enlace al proyecto en cuestión es: http://dreamlandcompany.net/chp/proyectos-de-arquitectura.html

Le he pedido a mi amiga que me pase los archivos, si es necesario, lo subo a un drive y les comparto el enlace.

Actualizado: Enlace a los archivos

Lastimosamente no se hacer debug, pero fui eliminando script por script y ver que se iba desactivando y creo que lo hace el plugin de tweenmax, pero no veo donde cambiar la medida que escoge para dar ese "salto". (Creo que es ese, porque cuando lo elimino con el inspeccionador, ya no me deja hacer scroll). He buscado en la documentación de greensock.com, pero es que no se donde se modifica exactamente lo del scroll.

¿Alguien que me pueda echar una mano? Algún tip? O cómo buscar?

Coloco algo de código por recomendación

El código html, no tiene mayor misterio, usa bootstrap para maquetación y las dependencias de css, son estas:

<link rel="stylesheet" href="assets/js/libs/font-awesome/css/font-awesome.min.css"/>
  <link rel="stylesheet" href="assets/js/libs/bootstrap/dist/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="assets/css/icons/nucleo.css"/>
  <link rel="stylesheet" href="assets/js/libs/animate.css/animate.min.css"/>
  <!-- BEGIN PAGE STYLE -->
  <link rel="stylesheet" href="assets/css/form.css"/>
  <link rel="stylesheet" href="assets/css/hover-effects.css"/>
  <link rel="stylesheet" href="assets/css/masonry.css"/>
  <link rel="stylesheet" href="assets/css/portfolio.css"/>
  <!-- END PAGE STYLE -->
  <link rel="stylesheet" href="assets/css/buttons.css"/>
  <link rel="stylesheet" href="assets/css/builder.css"/>
  <link rel="stylesheet" href="assets/css/colors.css"/>
  <link rel="stylesheet" href="assets/css/footers.css"/>    
  <link rel="stylesheet" href="assets/css/main.css"/>
  <link rel="stylesheet" href="assets/css/nav.css"/>
  <link rel="stylesheet" href="assets/css/preloader.css"/>
  <link rel="stylesheet" href="assets/css/themes.css"/>
  <link rel="stylesheet" href="assets/css/ui.css"/>
  <link rel="stylesheet" href="assets/css/widgets.css"/>

En cuanto javascript, las dependencias son:

<script src="assets/js/libs/jquery/dist/jquery.min.js"></script>
  <script src="assets/js/libs/jquery-ui/jquery-ui.min.js"></script>
  <script src="assets/js/libs/gsap/src/minified/TweenMax.min.js"></script>
  <script src="assets/js/libs/gsap/src/minified/plugins/ScrollToPlugin.min.js"></script>
  <script src="assets/js/libs/tether/dist/js/tether.min.js"></script>
  <script src="assets/js/libs/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="assets/js/libs/superfish/dist/js/superfish.min.js"></script>
  <script src="assets/js/libs/appear/jquery.appear.js"></script>
  <script src="assets/js/libs/easyticker-jquery/jquery.easy-ticker.min.js"></script>  

  <!-- BEGIN PAGE SCRIPT -->
  <script src="assets/js/libs/magnific-popup/dist/jquery.magnific-popup.min.js"></script>
  <script src="assets/js/libs/isotope/dist/isotope.pkgd.min.js"></script>
  <script src="assets/js/libs/isotope-packery/packery-mode.pkgd.min.js"></script>
  <script src="assets/js/masonry.js"></script>
  <script src="assets/js/widgets.js"></script>
  <!-- END PAGE SCRIPT -->

  <script src="assets/js/navigation.js"></script>
  <script src="assets/js/search.js"></script>
  <script src="assets/js/builder.js"></script>
  <script src="assets/js/main.js"></script>

En fin que el código espagueti es tal, que ni idea de cómo y por empezar a expurgar, voy a tratar de pasar el html tal como esta en un archivo html:

<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""><![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" lang=""><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="es"><!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Proyectos Tierra Firme - Acabados</title>
  <meta name="description" content="Create your website using Engage multipurposes html template: corporate, ecommerce, blog, creative and much more. Only $17 for unlimited possibilities.">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon" href="assets/imagenes/various/apple-touch-icon.png">
  <link rel="shortcut icon" href="assets/imagenes/favicon.ico" type="image/x-icon">
  <link href='https://fonts.googleapis.com/css?family=Montserrat:500%7COpen+Sans:300,400,700,800' rel='stylesheet' />
  <link rel="stylesheet" href="assets/js/libs/font-awesome/css/font-awesome.min.css"/>
  <link rel="stylesheet" href="assets/js/libs/bootstrap/dist/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="assets/css/icons/nucleo.css"/>
  <link rel="stylesheet" href="assets/js/libs/animate.css/animate.min.css"/>
  <!-- BEGIN PAGE STYLE -->
  <link rel="stylesheet" href="assets/js/libs/flexslider/flexslider.css"/>
  <link rel="stylesheet" href="assets/css/portfolio.css"/>
  <link rel="stylesheet" href="assets/css/sliders.css"/>
  <!-- END PAGE STYLE -->
  <link rel="stylesheet" href="assets/css/buttons.css"/>
  <link rel="stylesheet" href="assets/css/builder.css"/>
  <link rel="stylesheet" href="assets/css/colors.css"/>
  <link rel="stylesheet" href="assets/css/footers.css"/>    
  <link rel="stylesheet" href="assets/css/main.css"/>
  <link rel="stylesheet" href="assets/css/nav.css"/>
  <link rel="stylesheet" href="assets/css/preloader.css"/>
  <link rel="stylesheet" href="assets/css/themes.css"/>
  <link rel="stylesheet" href="assets/css/ui.css"/>
  <link rel="stylesheet" href="assets/css/widgets.css"/>
  <script src="assets/js/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>

<body class="header-transparent header-scroll-dark">
  <!--[if lt IE 8]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <!-- BEGIN PRELOADER -->
  <div class="loader-wrapper">
    <div class="loader-circle"></div>
  </div>
  <!-- END PRELOADER -->

  <div id="wrapper">

    <!-- BEGIN LATERAL NAVIGATION -->
    <aside id="aside-nav">
      <div id="main-aside-navigation">
        <div class="main-nav-wrapper">
          <div class="close-aside-nav">
            <i class="nc-icon-outline ui-1_simple-remove"></i>
          </div>
          <div id="aside-logo">
            <a href="index.html" data-logo-light="assets/imagenes/logo-aside-light.png" data-logo-dark="assets/imagenes/logo-aside-dark.png">
              <img width="170" height="120" src="assets/imagenes/logo-aside-dark.png" alt="logo-casallas-arquitectos">
            </a>
          </div>
          <nav id="main-aside-menu">
            <ul>
              <li class="submenu">
                <a href="nosotros.html">Nosotros</a>
              </li>
              <li class="submenu">
                <a href="proyectos-de-aquitectura.html"><span2>Proyectos</span2></a>
              </li>
               <li>
                    <a href="#">Espacios</a>
                      <ul>
                         <li>
                            <a href="arquitectura-para-salas.html">Salas</a>
                         </li>
                          <li>
                             <a href="fullscreen-image-parallax">Habitaciones</a>
                          </li>
                           <li>
                                <a href="fullscreen-video">Estudios</a>
                              </li>
                              <li>
                                <a href="fullscreen-text-rotator">Cocinas</a>
                              </li>
                              <li>
                                <a href="fullscreen-text-rotator">Baños</a>
                              </li>
                    </ul>
              <li>
                    <a href="#">Publicaciones</a>
                      <ul>
                         <li>
                            <a href="publicacion-revista-axxis.html">Revista Axxis Ed.200</a>
                         </li>
                            </ul>
              </li>
              <li class="submenu">
                <a href="contacto.html">Contáctenos</a>
              </li>

            </ul>
          </nav>
          <footer>
            <a href="#" class="facebook">
              <span><i class="fa fa-facebook"></i></span>
            </a>
            <a href="#" class="instagram">
              <span><i class="fa fa-instagram"></i></span>
            </a>
            <a href="#" class="twitter">
              <span><i class="fa fa-twitter"></i></span>
            </a>
          </footer>
        </div>
      </div>
    </aside>
    <!-- END LATERAL NAVIGATION -->

    <!-- BEGIN MAIN NAVIGATION -->
    <header id="header">
      <div id="main-navigation" class="submenu-dark">
        <div class="main-nav-wrapper">
          <div class="container-fluid">
            <div class="nav-left">
              <div id="logo">
                <a href="index.html" data-logo-light="assets/imagenes/logo-aside-light.png" data-logo-dark="assets/imagenes/logo-aside-dark.png">
                  <img width="90" height="20" src="assets/imagenes/logo-aside-light.png" alt="logo-casallas-arquitectos">
                </a>
              </div>
            </div>
            <div class="nav-right">
              <nav id="main-menu">
                <ul>
                  <li class="mega-menu menu-layouts">
                    <a href="nosotros.html">Nosotros</a>
                  </li>
                  <li class="mega-menu menu-layouts">
                    <a href="proyectos-de-arquitectura.html"><span2>Proyectos</span2></a></li>
                       <li>
                    <a href="#">Espacios</a>
                      <ul>
                         <li>
                            <a href="arquitectura-para-salas.html">Salas</a>
                         </li>
                          <li>
                             <a href="fullscreen-image-parallax">Habitaciones</a>
                          </li>
                           <li>
                                <a href="fullscreen-video">Estudios</a>
                              </li>
                              <li>
                                <a href="fullscreen-text-rotator">Cocinas</a>
                              </li>
                              <li>
                                <a href="fullscreen-text-rotator">Baños</a>
                              </li>
                            </ul>
                   <li>
                    <a href="#">Publicaciones</a>
                      <ul>
                         <li>
                            <a href="publicacion-revista-axxis.html">Revista Axxis Ed.200</a>
                         </li>
                            </ul>
              </li>
                  <li class="mega-menu menu-layouts">  
                    <a href="contacto.html">Contáctenos</a></li>
                </ul>
              </nav>
              <ul class="nav-tools">
                <li class="cart-tool">
                  <a href="shopping-cart" class="tools-btn">
                    <span class="tools-btn-icon"><i class="nc-icon-glyph shopping_bag-16"></i></span>
                    <span class="cart_items_number">5</span>
                  </a>
                </li>
                <li class="wishlist-tool">
                  <a href="shop-wishlist" class="tools-btn">
                    <span class="tools-btn-icon"><i class="nc-icon-outline ui-2_favourite-28"></i></span>
                    <span class="wishlist_items_number">0</span>
                  </a>
                </li>
                <li class="mobile-menu-btn">
                  <button class="toggle-menu" data-toggle="mobile-menu" data-effect="hover">
                    <span class="menu-label label-left">Menu</span>
                    <i class="nc-icon-outline ui-2_menu-35"></i>
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- END MAIN NAVIGATION -->

    <!-- BEGIN MAIN CONTENT -->
    <div id="main-content">

      <!-- BEGIN PAGE TITLE -->
      <section id="page-title" class="page-title-dark">
        <div class="container">
          <div class="page-title-wrapper">
            <div class="page-title-txt">
              <h1>Proyecto <span2>Edificio HG</span2></h1>
              <p>Residencial // Diseño Cocina</p>
            </div>
            <div class="breadcrumb">
              <a href="proyectos-de-arquitectura.html#volverf1">Volver</a>
            </div>
          </div>
        </div>
      </section>
      <!-- END PAGE TITLE -->

    
    <!-- BEGIN MAIN CONTENT -->
      <section class="container">
        <div class="row m-t-40">
          <div class="col-md-12">
            <div class="flexslider" data-plugin-options='{"directionNav": true,"slideshowSpeed":3500}'>
              <ul class="slides">
                <li>
                  <img src="assets/imagenes/proyectos/tierra-firme/tierra-firme-oficina.jpg" alt="acabados-tierra-firme-oficina">
                </li>
                <li>
                  <img src="assets/imagenes/proyectos/tierra-firme/tierra-firme-sala.jpg" alt="acabados-tierra-firme-sala">
                </li>
                <li>
                  <img src="assets/imagenes/proyectos/tierra-firme/tierra-firme-workstation.jpg" alt="acabados-tierra-firme-workstation">
                </li>
                <li>
                  <img src="assets/imagenes/proyectos/tierra-firme/tierra-firme-oficinas2.jpg" alt="acabados-tierra-firme-sala">
                </li>
                <li>
                  <img src="assets/imagenes/proyectos/tierra-firme/tierra-firme-salas-juntas-lobby.jpg" alt="acabados-tierra-firme-sala-juntas-lobby">
                </li>
                <li>
                  <img src="assets/imagenes/proyectos/tierra-firme/tierra-firme-workstation2.jpg" alt="acabados-tierra-firme-workstation-2">
                </li>
                <li>
                  <img src="assets/imagenes/proyectos/tierra-firme/tierra-firme-lobby-bano.jpg" alt="acabados-tierra-firme-lobby-bano">
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      <section class="section section-portfolio p-b-40">
        <div class="container">
          <div class="row">
            <div class="col-md-2">
             <div class="title title-line m-b-0">
                <h5>Lugar</h5>
              </div>
              <p>Edificio</p>
            </div>
            <div class="col-md-2">
              <div class="title title-line m-b-0">
                <h5>Intervención</h5>
              </div>
              <p>Acabados</p>
             </div>
            <div class="col-md-3">
              <div class="title title-line m-b-0">
                <h5>Metros Intervenidos</h5>
              </div>
              <p>0 M&#178</p>
             </div>
              <div class="col-md-2">
              <div class="title title-line m-b-0">
                <h5>Fecha</h5>
              </div>
              <p>Febrero 2015</p>
             </div>
              <div class="col-md-3">
              <div class="title title-line m-b-0">
                <h5>Comparte este proyecto</h5>
              </div>
              <div class="icon-square icon-gray icon-hover icon-md">
                <a href="#" class="icon-google-plus" data-toggle="tooltip" data-placement="bottom" title="Comparte en Google">
                  <i class="fa fa-google-plus"></i>
                </a>
                <a href="http://www.facebook.com/sharer.php?u=http://www.chp-casallasarq.com/" class="icon-facebook" data-toggle="tooltip" data-placement="bottom" title="Publica en Facebook">
                  <i class="fa fa-facebook"></i>
                </a>
                <a href="#" class="icon-twitter" data-toggle="tooltip" data-placement="bottom" title="Tweet">
                  <i class="fa fa-twitter"></i>
                </a>
                <a href="#" class="icon-pinterest" data-toggle="tooltip" data-placement="bottom" title="Pin en Pinterest">
                  <i class="fa fa-pinterest-p"></i>
                </a>
              </div>
            </div>
               </div>
          </div>
      </section>
      </div>

    <!-- BEGIN FOOTER -->
    <footer id="footer">
      <div id="footer-main" class="container-large">
        <div class="row">
          <div class="col-lg-4 col-md-6">
            <div class="widget widget-text">
              <img width="350" height="78" class="footer-logo" src="assets/imagenes/logo-footer.png" alt="logo">
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="widget widget-text"><div class="widget-title">
                <h3 class="widget-title">Contácto</h3>
              </div>
              <p><i class="nc-icon-outline ui-1_home-minimal"></i> Carrera 12 # 119 - 08 Of 406 <br>Edificio BOX Office</p>
              <p><i class="nc-icon-outline location_pin"></i> Bogotá - Colombia</p>
              <p><i class="nc-icon-outline ui-1_email-85"></i> <a href="mailto:[email protected]">[email protected]</a></p>
              <p><i class="nc-icon-outline tech_mobile"></i> <a href="571000000" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Contáctenos Ahora"> 57+1 703 1339</a></p>
            </div>
            <div id="widget-social" class="widget widget-social-icons">
              <div class="icon-square icon-hover icon-black">
                <a href="#" class="icon-facebook">
                  <i class="fa fa-facebook"></i>
                </a>
                <a href="#" class="icon-instagram">
                  <i class="fa fa-instagram"></i>
                </a>
                <a href="#" class="icon-youtube">
                  <i class="fa fa-youtube"></i>
                </a>
              </div>
            </div>
          </div>
            

          <div class="col-lg-3 col-md-6">
            <div class="widget widget-text">
              <div class="widget-title">
                <h3 class="widget-title">Aliado Estratégico</h3>
			  </div>
              <a href="http://audiovideosolution.com.co" target="_blank">
              <img width="208" height="150" class="footer-logo2" src="assets/imagenes/logo-audio-video-solution.png" alt="logo-audio-video-solution"></a>
              <ul>
                <li>
                  <a href="http://audiovideosolution.com.co" target="_blank">Audio Video Solution</a>
                </li>
                <li>
                  Especialistas en domótica, integración de sistemas de Audio, Video y Automatización.
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div id="footer-bottom">
        <div class="container-fullwidth">
          <div class="row">
            <div class="col-sm-12 t-center">
              <p class="copyright">© Casallas Arquitectos 2017. Todos los derechos reservados.</p>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <!-- END FOOTER -->

  </div>

  <a href="#" class="scrollup">
    <i class="nc-icon-outline arrows-1_minimal-up"></i>
  </a>

  <script src="assets/js/libs/jquery/dist/jquery.min.js"></script>
  <script src="assets/js/libs/jquery-ui/jquery-ui.min.js"></script>
  <script src="assets/js/libs/gsap/src/minified/TweenMax.min.js"></script>
  <script src="assets/js/libs/gsap/src/minified/plugins/ScrollToPlugin.min.js"></script>
  <script src="assets/js/libs/tether/dist/js/tether.min.js"></script>
  <script src="assets/js/libs/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="assets/js/libs/superfish/dist/js/superfish.min.js"></script>
  <script src="assets/js/libs/appear/jquery.appear.js"></script>
  <script src="assets/js/libs/skrollr/dist/skrollr.min.js"></script>
  <script src="assets/js/libs/easyticker-jquery/jquery.easy-ticker.min.js"></script>  
  
  <!-- BEGIN PAGE SCRIPT -->
  <script src="assets/js/libs/flexslider/jquery.flexslider-min.js"></script>
  <script src="assets/js/sliders.js"></script>
  <script src="assets/js/widgets.js"></script>
  <!-- END PAGE SCRIPT -->

  <script src="assets/js/navigation.js"></script>
  <script src="assets/js/search.js"></script>
  <script src="assets/js/builder.js"></script>
  <script src="assets/js/main.js"></script>
</body>
</html>

PDta: Aún no tengo claro si esta forma de preguntar, es de acuerdo a las normas del foro o si debo preguntarlo por el chat.

2
  • 2
    Hola Alvaro, yo sé de 1ra mano precisamente lo importante que es colocar un código minimo, completo y verificable, pero en este caso el volumen de código espagueti es tal que ni idea de por donde fragmentar (Son casi 20 dependencias). Igual voy a hacer el intento, ya que ya tengo los archivos. Gracias. el 26 feb. 2018 a las 23:40
  • 2
    He subido el código, no es precisamente un fragmento o un ejemplo mínimo, pero creo que es suficiente para dimensionar el problema. Si crees que habría otra forma, estaré atento a tus sugerencias. el 27 feb. 2018 a las 0:01

1 respuesta 1

2

Inspeccionando tu código en la función scrollEasing puedes definir la distancia del desplazamiento al hacer scroll

En el archivo (main.js), puedes cambiar el valor en esta linea de código:

var scrollDistance = 600; 

Puedes colocarlo en 50 para ver el efecto de desplazamiento.

Espero que sea lo que buscas :), saludos.

2
  • MUUUUUUCHAS GRACIAS POR LA RESPUESTA!!! ha funcionado, llevaba como 3 horas dándole vueltas y buscando en la documentación de greensock. el 27 feb. 2018 a las 0:51
  • De nada me da gusto que se resolviera, saludos.
    – A. Palacio
    el 27 feb. 2018 a las 0:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.