¿Como funciona este slider hecho en Javascript puro?

Question

Lo que quiero hacer es un menu fixed. Cuando clickeo en el menu se active el slider. Pero no entiendo este codigo:

function funcion(){
 var page = document.getElementById('page');
 var sections = page.getElementsByTagName('section'); 
 // This transition can be defined in the CSS if preferred.
 var transition = 'top .8s cubic-bezier(0.77, 0, 0.175, 1)';
 page.style.transition = transition;
 page.onclick = slideDown;
 //document.getElementsByClassName("")

 function slideDown(e) {  
  // Delegate.
  if (e.target.className != 'next') {
   return;
  }

  // Prevent firing simultaneously.
  page.onclick = '';  
  self = e.target.parentNode; // Devuelve el elemento <section>.
  var offset = self.getBoundingClientRect(); // Devuelve tamñano y posicion relativa a la ventana.
  var scroll = self.offsetTop; // La distancia desde la parte superior de <section> con su padre (<div id=page>).

  // CSS Transition slide.
  page.style.top = (-offset.height-offset.top) + 'px'; // La altura del elemento (-offset) menos la parte mas alta de la pagina.

  setTimeout(function () {
   // Reposition the real scrollbar.
   page.style.transition = 'none';
   page.style.top = '';
   window.scrollTo(0, offset.height+scroll);
   page.style.transition = transition;
   // Reattach event.
   page.onclick = slideDown;
   // This timeout length should match the CSS animation time (.8s).
  }, 800);
 }
}

Arngue · Answer 1 · 2017-09-15T07:06:08.270

Con este código ya tienes un menú fixed que muestra el slider con una transición CSS, con este código estás haciendo clic sobre un elemento DOM con id 'page', al hacer clic recojes los elementos <section> de ese mismo id y los usas para calcular la distáncia que hay entre el elemento <section> y la parte superior de la ventana, con eso aplicas la transición calculada al elemento 'page' y tras un timeout vuelves la transición a su estado inicial

Te dejo el código comentado

   function funcion(){
        // Recuperamos el elemento con id 'page'
        var page = document.getElementById('page');
        // Recuperamos todas las etiquetas <section> dentro del elemento 'page'
        var sections = page.getElementsByTagName('section');

        // Definimos la transicion css a aplicar al elemento id 'page'
        var transition = 'top .8s cubic-bezier(0.77, 0, 0.175, 1)';
        // Aplicamos la transicion como un estilo css
        page.style.transition = transition;
        // Al clicar en el elemento 'page' hacemos la funcion slideDown
        page.onclick = slideDown;

        function slideDown(e) {  
            // Si estamos haciendo click sobre un elemento DOM con clase 'next',
            // no hacemos nada de la funcion slideDown
            if (e.target.className != 'next') {
                return;
            }
            // Prevenimos el doble click
            page.onclick = ''; 
            // Recuperamos el elemento DOM Padre inmediato del elemento que hemos hecho click *(event.target)*
            self = e.target.parentNode; 
            // Cogemos el elemento <section> dentro del padre recuperado.
            var offset = self.getBoundingClientRect(); 
            // Recojemos tamñano y posicion relativa a la ventana,
            // de la distancia desde la parte superior de <section> con su padre (<div id=page>).
            var scroll = self.offsetTop; 

            // Aplicamos la transicion CSS calculando
            // La altura del elemento <section> menos la parte mas alta de la pagina.
            page.style.top = (-offset.height-offset.top) + 'px'; 

            // Con un timeout volvemos la transicion a su estado inicial
            setTimeout(function () {
                // Reposicionar la barra de scroll.
                page.style.transition = 'none';
                page.style.top = '';
                window.scrollTo(0, offset.height+scroll);
                // Reasignamos la transicion inicial
                page.style.transition = transition;
                // Reasignamos el evento onclick.
                page.onclick = slideDown;
                // Este timeout debería de durar parecido a la transicion (8s).
            }, 800);
        }
     }

Ya que me lo pediste en un comentario dejo el enlace al JSFiddle aqui con el ejemplo funcionando https://jsfiddle.net/w0usmrbj/1/

No entiendo la parte de "recuperamos las secciones del elemento page".. — TOMAS, Sep 08 '17 at 06:57
Perdón, he cambiado la frase entera, espero que ahora la entiendas mejor — Arngue, Sep 11 '17 at 15:22
de todas formas, y aprovechando el post, ¿porque se declaran funciones dentro de functiones? — GDP, Sep 11 '17 at 15:28
Tengo un problema cuando selecciono un `section ` con `offset = document.getElementsByTagName("section")[0].getBoundingClientRect();` a este `section` lo reconoce como primero cuando en realidad es el segundo. — TOMAS, Sep 11 '17 at 17:29
@GDP esto la forma de programar javascript lo permite y el ejemplo mas claro es en el que asignas esta funcion `function()` al onload de una pagina `` donde te interesa que esa funcion se carge en el onload de la pagina — Arngue, Sep 12 '17 at 06:35
@TOMAS hay que cercionarse de que el `
` al que quieres acceder esté dentro del elemento `'page'`, si és así sería de ayuda que nos pasases un ejemplo del codigo que te esta causando eso, en https://jsfiddle.net/ por ejemplo — Arngue, Sep 12 '17 at 06:39
https://jsfiddle.net/maradona86/w0usmrbj/ ahi lo dejo pero no anda el scroll con JsFiddle... — TOMAS, Sep 12 '17 at 11:28
he reparado tu problema con el onload, és mejor que uses `window.onload = new funtion() {}` antes que `` con este pequeño cambio a mi me funciona todo, me coge todos los `
` sin problema https://jsfiddle.net/w0usmrbj/1/ A mí con firefox si me funciona el scroll — Arngue, Sep 15 '17 at 07:02
@GDP Declarar funciones dentro de funciones es muy útil cuando necesitas acceder a variables de la función padre, mira cómo funcionan las [clausuras](https://es.stackoverflow.com/questions/607/c%C3%B3mo-funcionan-las-clausuras-en-javascript) — Pablo Lozano, Sep 15 '17 at 07:12
@PabloLozano Estoy acostumbrado a ello en JQuery, pero no sabia que se utilizasen tambien en javascript. Gracias. — GDP, Sep 15 '17 at 07:48
@PabloLozano si si, me refiero a que las usas de continuo en JQery tipicas ready, click etc, que ni te das cuenta de que es eso. Me acabais de abrir un mundo jajaja — GDP, Sep 15 '17 at 08:24

¿Como funciona este slider hecho en Javascript puro?

1 Answers1