Animated Banner / Background - by LisaA - on WordPress WooCommerce support

2 replies2 participantsUpdated by 8theme

  • Avatar: LisaA
    LisaA
    Participant

    On your https://www.8theme.com/demo/xstore/ demo, in the center of the page you show an animated background image were it says “Get 10% Off by liking us on Facebook”. I have duplicated the settings in the example but can not achieve the same effect (moving background). Is there a script or something that actually makes this work? Can you please provide instructions on how to do this?

    #152703 Copied

    2 Answers

    Avatar: LisaA
    LisaA
    Participant

    anyone?

    #152820 Copied
    Avatar: 8theme
    8theme
    Support staff

    Hello,

    Try to add this extra class name for the block with background anim-banner and add this code to the custom CSS

    .anim-banner {
    background-repeat: repeat no-repeat !important;
    -webkit-animation: animatedBackground 30s linear infinite;
       -moz-animation: animatedBackground 30s linear infinite;
         -o-animation: animatedBackground 30s linear infinite;
            animation: animatedBackground 30s linear infinite;
}
@-webkit-keyframes animatedBackground {
    from {
        background-position: 0 center;
    }
    to {
        background-position: -2076px center;
    }
}
@-moz-keyframes animatedBackground {
    from {
        background-position: 0 center;
    }
    to {
        background-position: -2076px center;
    }
}
@keyframes animatedBackground {
    from {
        background-position: 0 center;
    }
    to {
        background-position: -2076px center;
    }
}

    Regards

    #152896 Copied

You must be logged in to reply to this topic.Log in/Sign up