Tengo una página web que usa la biblioteca jQuery scrollreveal para revelar lentamente varios elementos html en la página cuando se carga la ventana.

El código funciona bien como está ahora. Pero es un poco lento responder cuando la página se carga inicialmente. Creo que esto se debe a que tengo varias funciones sr.reveal () ejecutándose. Intenté poner los elementos en tres o cuatro funciones separadas con los atributos de duración y origen, pero esto no funcionó.

Quiero acortar el código para que todos los elementos que se originan en la parte superior / inferior / izquierda y tienen el mismo tiempo de duración se coloquen dentro de la misma función. Esencialmente, quiero acortar mi código.

Código fuente de jQuery:

<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
    <script>
      window.sr = ScrollReveal();
      sr.reveal('h1', {
        duration: 1500,
        origin: 'top'
      });

      sr.reveal('.icons', {
        duration: 3500,
        origin: 'left'
      });

      sr.reveal('#email-link1', {
        duration: 1000,
        origin: 'bottom'
      });

      sr.reveal('#cv-link', {
        duration: 1000,
        origin: 'bottom'
      });

      sr.reveal('#tel-link', {
        duration: 1000,
        origin: 'bottom'
      });

      sr.reveal('p', {
        duration: 1000,
        origin: 'bottom'
      });

      sr.reveal('h2', {
        duration: 1000,
        origin: 'top'
      });

      sr.reveal('h3', {
        duration: 1000,
        origin: 'top'
      });

      sr.reveal('.back-to-top', {
        duration: 1000,
        origin: 'top'
      });

      sr.reveal('.email-link2', {
        duration: 1000,
        origin: 'bottom'
      });

      sr.reveal('.tel-link2', {
        duration: 1000,
        origin: 'bottom'
      });

    </script>

Intenté hacer esto:

Sr.reveal ('h2', 'h3', {} ... etc)

Pero luego el código no se ejecutó. Cualquier ayuda sería genial, gracias.

0
Dr.Gonzo 23 feb. 2018 a las 16:21

2 respuestas

La mejor respuesta

Creo que esto lo acortaría un poco. Debería agregar el resto de sus datos a la matriz. Esto no está probado.

window.sr = ScrollReveal();    

var revealers = [
    ['h1', 1500, 'top'],
    ['.icons', 3500, 'top']
];

for(var i = 0; i < revealers.length; i++) {
    sr.reveal(revealers[i][0], {
        duration: revealers[i][1],
        origin: revealers[i][2]
    });
}

Podría incluir todo eso en una función si lo desea. Eso lo hace lucir mejor.

EDITAR:

Como función de reutilización:

function revealMe(revealerArray, scrollReveal) {
    for(var i = 0; i < revealerArray.length; i++) {
        sr.reveal(revealerArray[i][0], {
            duration: revealerArray[i][1],
            origin: revealerArray[i][2]
        });
    }
}

Y en un lugar diferente:

window.sr = ScrollReveal(); 

var revealers = [
    ['h1', 1500, 'top'],
    ['.icons', 3500, 'top']
];

revealMe(revealers, sr);
1
adprocas 23 feb. 2018 a las 17:54

Vale la pena mencionar que si tiene un código como este:

  sr.reveal('h2', {
    duration: 1000,
    origin: 'top'
  });

  sr.reveal('h3', {
    duration: 1000,
    origin: 'top'
  });

  sr.reveal('.back-to-top', {
    duration: 1000,
    origin: 'top'
  });

Es lo mismo que:

  sr.reveal('h2, h3, .back-to-top', {
    duration: 1000,
    origin: 'top'
  });

El primer argumento es solo un selector de CSS. Si necesita hacer coincidir más de un selector, es lo mismo que en CSS, simplemente separe sus selectores con comas.

0
jlmakes 22 mar. 2018 a las 03:45