[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
 

frizzel

Well-known member
Trusted Uploader
Jun 13, 2019
485
253
63
Wherever my imagination takes me
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.
 

shikerissimo

New member
Feb 28, 2021
9
2
3
This was just a guess, as it sounds easier using a plug-in.

Any advice on how to do it with CSS?

Thanks
 

frizzel

Well-known member
Trusted Uploader
Jun 13, 2019
485
253
63
Wherever my imagination takes me
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;
}
 

shikerissimo

New member
Feb 28, 2021
9
2
3
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
 

ngepetlo

Member
Nov 26, 2020
36
15
8
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

shikerissimo

New member
Feb 28, 2021
9
2
3
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.
 

About us

  • Our community has been around for many years and pride ourselves on offering unbiased, critical discussion among people of all different backgrounds. We are working every day to make sure our community is one of the best.

Quick Navigation

User Menu