Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1100774

    image background efect (increasing and decreasing) in color section, is it possible in Enfold? example in this website https://www.securitasdirect.es/
    Thanks!

    #1100794

    Hey ftt123,
    Thanks for the link, this is created by this css:

    .m_banner.banner-node-86 .m_banner_image {
        -webkit-animation: cssAnimation5 26s infinite ease-in-out;
        -moz-animation: cssAnimation5 26s infinite ease-in-out;
        -o-animation: cssAnimation5 26s infinite ease-in-out;
    }
    
    @-webkit-keyframes cssAnimation5 {
        0% {
            -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
        }
    
        35% {
            -webkit-transform: rotate(0deg) scale(1.25) skew(0deg) translate(4%,0);
        }
    
        50% {
            -webkit-transform: rotate(0deg) scale(1.25) skew(0deg) translate(4%,0);
        }
    
        85% {
            -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
        }
    
        100% {
            -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
        }
    }
    
    @-moz-keyframes cssAnimation5 {
        0% {
            -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
        }
    
        35% {
            -moz-transform: rotate(0deg) scale(1.25) skew(0deg) translate(4%,0);
        }
    
        50% {
            -moz-transform: rotate(0deg) scale(1.25) skew(0deg) translate(4%,0);
        }
    
        85% {
            -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
        }
    
        100% {
            -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
        }
    }
    
    @-o-keyframes cssAnimation5 {
        0% {
            -o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
        }
    
        35% {
            -o-transform: rotate(0deg) scale(1.25) skew(0deg) translate(4%,0);
        }
    
        50% {
            -o-transform: rotate(0deg) scale(1.25) skew(0deg) translate(4%,0);
        }
    
        85% {
            -o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
        }
    
        100% {
            -o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
        }
    }
    

    If you adjust the classes you can use it for any image on any site, hope this helps

    Best regards,
    Mike

    #1101205
    This reply has been marked as private.
    #1101552

    Hi,
    You will want to add a custom class to your image, and then use that custom class in the first line of the css:
    2019-05-16-121653
    Please try setting up a test page on your site with a custom class that we can see, and we can demonstrate the adjustments.

    Best regards,
    Mike

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