• You MUST read the Babiato Rules before making your first post otherwise you may get permanent warning points or a permanent Ban.

    Our resources on Babiato Forum are CLEAN and SAFE. So you can use them for development and testing purposes. If your are on Windows and have an antivirus that alerts you about a possible infection: Know it's a false positive because all scripts are double checked by our experts. We advise you to add Babiato to trusted sites/sources or disable your antivirus momentarily while downloading a resource. "Enjoy your presence on Babiato"

[Help] - Infinite falling animation (wordpress)

shikerissimo

New member
Feb 28, 2021
9
2
3
Hello,

First of all, apologies for the ignorance, just trying to work things out by trial and error so far.

I want to recreate a simple effect but am struggling to find the correct answer anywhere.

I am looking for this falling effect: https://ingridkuhn.com/themes/petz/?storefront=envato-elements

1618089497351.png

In theory it's just a set of 2 illustrations (the bones) falling infinitely over 3rd image (the dog) - i am trying to do this on slider revolution but so far no luck.


Thanks
 
Why do you want to do that on Slider Revolution? Why not just a header section where you apply the images and CSS as done on your example? When a third-party plug-in is not needed to get a desired effect, don't use it.
 
This was just a guess, as it sounds easier using a plug-in.

Any advice on how to do it with CSS?

Thanks
 
Simple: the section has an id 'stats', then look at the CSS applied.

CSS:
#stats {
    background-image: url(../img/illustrations/bones.png), url(../img/stats.png), url(../img/illustrations/bones1.png);
    animation: dog-bones-falling 9s linear infinite;
    animation-duration: 9s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: dog-bones-falling;
    animation-direction: normal;
    background-repeat: no-repeat;
}
 
I added the code in 'additional CSS' in the theme customization, updated the image URLs , however, i'm pretty sure there's more to it. How do i make it appear in a certain section of the site?

Thanks
 
I added the code in 'additional CSS' in the theme customization, updated the image URLs , however, i'm pretty sure there's more to it. How do i make it appear in a certain section of the site?

Thanks
to make css animations work you need to copy the keyframe, it will not working if you only copy the css code from the ID or class.
here the code

CSS:
#stats {
    background-image: url(../img/illustrations/bones.png), url(../img/stats.png), url(../img/illustrations/bones1.png);
    animation: dog-bones-falling 9s linear infinite;
    animation-direction: normal;
    background-repeat: no-repeat;
    height: 100vh;
}


@keyframes dog-bones-falling {
    0% {
        background-position: 94% -100px, 96% 100px, 99% -300px
    }
    100% {
        background-position: 94% 500px, 96% 100px, 99% 500px;
    }
}
 
  • Like
Reactions: shikerissimo
Thanks for your help guys, at least i have some directions now.

Unfortunately, at the moment i can't make it work, especially with 0 coding knowledge.

For now I'll stick with easier wordpress options.
 
AdBlock Detected

We get it, advertisements are annoying!

However in order to keep our huge array of resources free of charge we need to generate income from ads so to use the site you will need to turn off your adblocker.

If you'd like to have an ad free experience you can become a Babiato Lover by donating as little as $5 per month. Click on the Donate menu tab for more info.

I've Disabled AdBlock