Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1047158

    Hi there,
    I added an image to my frontpage and changed it’s appearance to make it look like a button (the golden one with “Sportmassage” on it).
    Now I saw a very cool background gradient animation on another page and want to add it to my button (just in white color) if possible, but have no idea how to.
    Could you help me?
    I want the effect to look like the on at the yellow button on this page: https://zebrabi.com/

    Best regards

    #1047161

    Also, is it possible to change it’s position and sitz when the page is being scrolled?
    I could change its position to “fixed”, but then i would like it to become smaller and move a little to the left, as soon as someone starts scrolling down the page?
    Thank you in advance

    #1047929

    Hi,
    Is there anybody who can help? Please?

    #1048379

    Hi Misantaller,

    They are using some SVG and some css to do that.
    It’s a bit complicated but if you’d give us temporary admin access, we’ll try to add it for you.
    Just post the login credentials in private content.

    Best regards,
    Nikko

    #1048469

    Hi nikko, thanks for your answer. Of course.

    #1048489

    maybe this effect of enfold standard behavior of a standalone icon (right side of the example ) could be an alternative:
    https://webers-testseite.de/button-link/
    but this is only on hovering the “button” – you can have a link on the icon and an optional Caption.
    The animation effect is called: sonarEffect

    #1048492

    this seems to be only a png file:
    you can do it with pseudo content.
    insert an image from alb elements and give it a custom class ( i took : animated-button )

    then we create the before content:

    .animated-button .avia_image::before {
        content: "";
        background-color: rgba(255,255,255,1);
        border-radius: 50%;
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        animation: pulse 3s ease-in-out 0s infinite
    }

    to have not the overlay effect on enfold images and to see the scale effect :

    .animated-button .image-overlay {
        display: none !important;
    }
    
    .animated-button .avia_image {
        overflow: visible !important;
    }

    now the animation keyframe for it:

    @keyframes pulse {
      0% {
          transform: scale(1.05);
          opacity: 1
      }
      50% {
          transform: scale(1.25);
          opacity: 0.3
      }
      100% {
          transform: scale(1.05);
          opacity: 1
      }
    }

    see result : https://webers-testseite.de/accordion/
    you can change it to your needs?
    In my case it is a dark background image so – it is a white pulsating thing.

    #1048493

    you see how it works : the keyframe is the base for the animation.
    you have start point and some interstage points and the end point. If you like you can do more here – or set an 80% style etc. pp.
    on the animation then you take this custom defined keyframe for it.

    #1048524

    I guess I did it! Thank you very much for your help!!
    Can you check it out if it looks good on your site?
    Best wishes,
    Sebastian

    #1048541

    sorry – i’m Participant as you are – so i can not see Private Message Area.

    #1049079

    Hi Misantaller,

    It’s looking great :)

    @guenni007, thanks for helping out. :)

    Best regards,
    Nikko

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.