Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I have a webpage that uses the jQuery library scrollreveal to slowly reveal various html elements on the page when the window is loaded.

The code works fine as it is now. But it is a bit slow to respond when the page is initially loaded. I think this is because I have multiple sr.reveal() functions running. I have tried putting the elements into three or four separate functions with the duration and origin attributes but this did not work.

I want to shorten the code down so that all elements that originate from the top/bottom/left and have the same duration time are placed within the same function. Essentially, I want to shorten down my code.

jQuery source code:

<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>
I tried doing this: 
sr.reveal('h2', 'h3', {} ... etc)
But then the code did not run. Any help would be great thanks. 
                If you just want to shorten it, build an array with your strings. It would be a multidimentional array. Something like array[0]['element'] = 'h1'; array[0]['duration'] = 1500; array[0]['origin'] = 'top'; Throw it all in an array initializer of course. Then loop through the array a call the reveal method with your values.
– adprocas
                Feb 23, 2018 at 13:27
I think this would shorten it quite a bit.  You would need to add the rest of your data to the array.  This is not tested.
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]
You could throw that all in a function if you'd like.  That makes it look nicer.
EDIT:
As a function for reusability:
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]
And in a different spot:   
window.sr = ScrollReveal(); 
var revealers = [
    ['h1', 1500, 'top'],
    ['.icons', 3500, 'top']
revealMe(revealers, sr);
                Cheers I grouped elements with the same duration and origin attributes into with three arrays and three for loops and it worked!
– Dr.Gonzo
                Feb 23, 2018 at 17:47
                In that case you could probably abstract that for loop out into a function, then pass the array into that function.
– adprocas
                Feb 23, 2018 at 17:52
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.