Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 15, 2019 at 1:53 pm #1127924
    bergsmapaul

    Hi,

    I would like to add a looping bounce animation to an arrow icon in my frontpage, so the visitors will know they have to scroll down to view the rest of the page. I know it’s possible in a slider, but I don’t want to use that. I’m just using the Advanced Layout Builder. I cannot find it anywhere on this forum.

    Keep up the good work of this forum, it’s really really helpful to me!

    Best,

    Paul

    August 15, 2019 at 7:59 pm #1128026
    Victoria

    Hey bergsmapaul,

    Please have a look at solutions posted here
    https://stackoverflow.com/questions/32306089/css-smooth-bounce-animation

    Best regards,
    Victoria

    August 16, 2019 at 10:08 am #1128215
    bergsmapaul

    Thank you! How do I add this custom CSS to only the icon I was talking about? Or can I just add this to the general styling CSS? Thanks in advance!

    August 16, 2019 at 1:09 pm #1128243
    Victoria

    Hi bergsmapaul,

    You need to add a class to this icon or the code will affect some other icons.

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top .av-icon-char {
  display: inline-block;
  position: relative;
  -moz-animation: bounce 1.5s infinite linear;
  -o-animation: bounce 1.5s infinite linear;
  -webkit-animation: bounce 1.5s infinite linear;
  animation: bounce 1.5s infinite linear;
  colr:000;
}
@-webkit-keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
@-moz-keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
@-o-keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
@-ms-keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
@keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 16, 2019 at 1:14 pm #1128246
    bergsmapaul

    It worked like a charm! Thanks!!

    August 16, 2019 at 8:51 pm #1128365
    Basilis

    Hi,

    Glad we could help!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Please bookmark Enfold Documentation for future reference.
    Thank you for using Enfold :)

    Best regards,
    Basilis

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Bounce effect on icon arrow.’ is closed to new replies.