Tagged: , , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 23, 2020 at 7:41 pm #1232766
    ferdle

    hi there,

    on the right side on the page you will find a standalone icon with subtitle. this got the standard sonar effect of enfold.
    i would like to have this sonar effect working without mouseover, that means, continously “blinking”.
    its not sure yet, if i need this effect for all icons over the site, maybe just a few. probably i can point them with custom css ids?

    do you have a solution for that?

    thanks in advance!
    ferdle

    July 24, 2020 at 5:49 am #1232865
    Nikko

    Hey ferdle,

    Thanks for giving us admin access.

    In your icon, I put sonar in Custom CSS Classes (in Advanced > Developer Options).
    Then in your Quick CSS, added this:

    /* Sonar Effect */
#top .sonar a.av-icon-char:after {
  -webkit-animation: sonarEffect 1s ease-out ;
  animation: sonarEffect 1s ease-out ;
  animation-iteration-count: infinite;
}

    As long as you add the sonar in the Custom CSS Class of the icon, it should add that infinite sonar effect :)

    Best regards,
    Nikko

    July 24, 2020 at 6:25 am #1232880
    ferdle

    hey nikko,
    thank you so much for your fast response. Again I see, with enfold it´s possible to build everything I need ;)

    One more thing; If you check for example the page “Leistungen”, I use the icon as inline document.
    Do you have a solution to make that somehow blinking or with a kind of infinite effect, without mouseover and without setting it up as standalone icon?

    thanks in advance!
    best regards
    ferdle

    July 24, 2020 at 7:45 am #1232889
    Nikko

    Hi ferdle,

    I have modified the CSS code which should work on inline icons:

    /* Sonar Effect */
#top .sonar .av-icon-char:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: '';
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    top: 0;
    left: 0;
    padding: 0;
    z-index: -1;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
    opacity: 0;
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transform-style: preserve-3d;
    -webkit-animation: sonarEffect 2s ease-out ;
    animation: sonarEffect 2s ease-out ;
    animation-iteration-count: infinite;
}

    however when I checked the effect it doesn’t look good because the width and the height of the icon isn’t the same, so it looks like an oval sonar effect.
    I think it would be better if you use a stand-alone icon style then use some css to fix the position.

    Best regards,
    Nikko

    July 24, 2020 at 10:06 am #1232915
    ferdle

    Thanks a lot again! almost done ;)
    with the code its possible to change the size of the sonar (see “Leistungen”-page)
    is it possible to change the position also (kind of padding, but only for the sonar)?
    thanks in advance!
    best regards
    ferdle

    July 25, 2020 at 6:00 am #1233141
    Nikko

    Hi ferdle,

    I have changed the height for iconsonar that you created from 50% to 100% then added this code on top of it:

    #top .iconsonar .av-icon-char {
    display: block !important;
    width: 133px !important;
}

    Best regards,
    Nikko

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.