Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • January 21, 2022 at 5:21 pm #1336564
    bbertuzzi7

    Hello,

    I have a .png set as the background of the color section on my home page and I would like for it to slide in from the left on page load. Is there a way to achieve this? If you click on the link, I’m looking to animate the outlined word behind the photo and text.

    Thanks in Advance!

    Becky

    January 22, 2022 at 12:43 pm #1336642
    Guenni007

    well try to create your own keyframe animation.
    At the end f.e. a kenburns effect is nothing else than that. see: https://codepen.io/SaijoGeorge/pen/LxeGgY

    so to better select the color-section – give a unique ID or custom-class to it – in my test page it is: animated-background as class.
    a slide from left to right and back is f.e:

    .avia-section.animated-background {
 animation: anime 60s linear infinite;
}

@keyframes anime {
 0% {
  background-position:0% 50%
 }
 50% {
  background-position:100% 50%
 }
 100% {
  background-position:0% 50%
 }
}

    (see link to codepen – and add the other browser fixes too ( -webkit seems to be the most important now ) )
    see: https://webers-web.info/moving-background/

    January 24, 2022 at 3:29 pm #1336910
    bbertuzzi7

    Thank you! I’ll give this a shot this morning and report back.

    January 24, 2022 at 4:59 pm #1336924
    bbertuzzi7

    Hello, I tried the code that you gave me, but the animation is not working. I called my color section .homeheader and inserted this code:

    .avia-section .homeheader {
    animation: anime 60s linear infinite;
    }

    @keyframes anime {
    0% {
    background-position:0% 50%
    }
    50% {
    background-position:100% 50%
    }
    100% {
    background-position:0% 50%
    }
    }

    When I refreshed the page, the background did not animate. https://wordpress-692037-2388778.cloudwaysapps.com/

    January 25, 2022 at 4:04 am #1336956
    Rikard

    Hi,

    Please try this CSS instead:

    .avia-section.homeheader {
animation: anime 60s linear infinite;
}

@keyframes anime {
0% {
background-position:0% 50%
}
50% {
background-position:100% 50%
}
100% {
background-position:0% 50%
}
}

    Best regards,
    Rikard

    January 25, 2022 at 3:32 pm #1337095
    bbertuzzi7

    It’s still not animating. I’m using a color section with the word “extrusion” as the background of the section. I’m putting the code into Quick CSS in the General Styling section. Should it go somewhere else?

    January 26, 2022 at 4:07 am #1337192
    Ismael

    Hi,

    Thank you for the update.

    The background is animating on our end. Please make sure to purge the cache before testing the page, or switch to incognito mode to refresh the stylesheets.

    Best regards,
    Ismael

    January 26, 2022 at 5:16 pm #1337329
    bbertuzzi7

    I’ve tried looking at in Incognito mode, I’ve cleared the cache but I still cannot get the background to animate when I hit refresh. Here is the site address to check. https://wordpress-692037-2388778.cloudwaysapps.com/. Thanks!

    January 26, 2022 at 8:52 pm #1337363
    Guenni007

    i can see the animation too. ( Firefox, Safari, Chrome on OSX )

    there is one thing to mention : if your screen is bigger than the image size – the animation stops.
    maybe you setup a background-size to that section f.e. : background-size: 110%

    January 26, 2022 at 10:35 pm #1337370
    bbertuzzi7

    Yep, that’s it! I was viewing on my larger monitor and when I just pulled it down onto my laptop, I could see the animation. Where would I add piece of CSS? into the .homeheader section?

    January 27, 2022 at 5:00 am #1337386
    Rikard

    Hi,

    Thanks for the update. What new CSS are you looking to add?

    Best regards,
    Rikard

    February 1, 2022 at 1:26 pm #1338215
    bbertuzzi7

    Hi Rikard,

    Sorry for my delayed response. I need to add CSS that will show the animation on larger screens like you mentioned.

    Thanks!

    Becky

    February 1, 2022 at 4:23 pm #1338261
    Yigit

    Hi Becky,

    Thanks for contacting us!

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    
.avia-section.homeheader {
background-size: 110%;
}

    Regards,
    Yigit

    February 1, 2022 at 4:35 pm #1338265
    bbertuzzi7

    That worked, thanks Yigit!!!

    February 1, 2022 at 4:39 pm #1338269
    Yigit

    Hi,

    You are welcome! We are happy that @guenni007 could help you out :)

    For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/

    If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)

    Enjoy the rest of your day!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Animate Color Section’ is closed to new replies.