Tagged: 

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • March 16, 2015 at 3:12 pm #412188
    simonac

    Hi,
    how to customize the new scroll down arrow in color section.

    Color – Size – speed – shadow color

    Thanks Simon

    March 17, 2015 at 3:47 pm #413004
    Andy

    Hey simonac!

    color, size and shadow:

    #top .scroll-down-link {
color: red;
font-size: 150px;
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
}

    adjust as needed.

    For arrow speed add this as well:

    #top .scroll-down-link {
-webkit-animation: avia_fade_move_down 2s ease-in-out infinite;
animation: avia_fade_move_down 2s ease-in-out infinite;
}

    and adjust “2s” to “1s” to increase (double) speed.

    Best regards,
    Andy

    March 28, 2015 at 3:18 pm #419841
    MSM

    Andy, I have the same question about customizing scroll down arrow. I believe this original code is in the Shortcodes.css file. If I’m using a Child theme can you help me identify the file name and where I would locate the file holding this change.

    Thanks
    Mike

    March 30, 2015 at 5:37 pm #420634
    Elliott

    Hey!

    If your wanting to do the edit in a child theme then you would just copy the CSS code and paste it into your child theme stylesheet (style.css) and add the !important; rule like so.

    #top .scroll-down-link {
color: red !important;
font-size: 150px !important;
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4) !important;
}

    Best regards,
    Elliott

    March 24, 2020 at 9:23 pm #1197117
    jannnnnneke

    Hi! How can you change the sort of animation. Now its fading down. But is it possible to only fade in one time, or to pop up… or another animation?

    animation: avia_fade_move_down 2s ease-in-out infinite

    What is “avia_fade_move_down” is that a class? Are there more classes for animations?

    Hope you understand me! Thanks!

    March 24, 2020 at 9:58 pm #1197123
    Jordan Shannon

    Hey jannnnnneke,

    Please provide a link to the site/page in question so we can look into this issue further.

    Best regards,
    Jordan Shannon

    March 24, 2020 at 10:07 pm #1197131
    jannnnnneke

    See private data!

    March 31, 2020 at 2:07 am #1199233
    Ismael

    Hi,

    You can apply a different animation to the scroll to top button using this css code.

    .avia_pop_class, .avia-search-tooltip {
    -webkit-animation: avia_pop 0.3s 1 cubic-bezier(0.175,0.885,0.320,1.275);
    animation: avia_pop 0.3s 1 cubic-bezier(0.175,0.885,0.320,1.275);
}

    avia_pop is a custom css animation.

    @-webkit-keyframes avia_pop {
  0%   { -webkit-transform:scale(0.8);  }
  100% { -webkit-transform:scale(1);  }
}
@-moz-keyframes avia_pop {
  0%   { -moz-transform:scale(0.8);  }
  100% { -moz-transform:scale(1);   }
}
@-o-keyframes avia_pop {
  0%   { -o-transform:scale(0.8);  }
  100% { -o-transform:scale(1);   }
}
@keyframes avia_pop {
  0%   { transform:scale(0.8);  }
  100% { transform:scale(1);   }
}

    You can create your own animation and apply it to the button.

    // https://animista.net/

    Best regards,
    Ismael

    March 31, 2020 at 11:35 am #1199288
    jannnnnneke

    Sorry, i’m not talking about the scroll to top button but the scroll down link, the arrow what sent you to the section down under.

    I dont understand your css code. What are the classes “.avia_pop_class, .avia-search-tooltip”? Or do I need to fill in my own class here? The class of the scroll down arrow is:

    #top .scroll-down-link {
    -webkit-animation: avia_fade_move_down 2s ease-in-out infinite;
    animation: avia_fade_move_down 2s ease-in-out infinite;
    bottom: 40px;
}
    March 31, 2020 at 11:45 am #1199290
    jannnnnneke

    I know tried this code:

    #top .scroll-down-link {
-webkit-animation: scale-down-center 1s ease-in-out infinite alternate both;
animation: scale-down-center 1s ease-in-out infinite alternate both;
bottom: 40px;
}

    But now there is no animation at all. Any ideas?

    March 31, 2020 at 11:56 am #1199294
    jannnnnneke

    Ah sorry, I see I had to add this code also:

    /**
 * ----------------------------------------
 * animation scale-down-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-down-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}
@keyframes scale-down-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}

    Now it’s working! THANKS!

    March 31, 2020 at 6:31 pm #1199418
    Jordan Shannon

    Hi,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

    March 31, 2020 at 9:39 pm #1199544
    jannnnnneke

    No, it’s working now! Thanks!

    March 31, 2020 at 9:41 pm #1199545
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Customize new scroll down arrow in color section’ is closed to new replies.