-
Posts
-
Hi
I ,have only 1 slide with a background image and animated logo and texts.
If want that logo & texts stay like they are and just change after few secondes the background.
How can i do it?
ThanksHey jb84,
Could you post a link to the site in question so that we can take a closer look please?
Best regards,
Rikardhi
find link in private
at the end of animation i want the background image switch to another but the other elements stayon layerslider it is easier to make a new slide – on top there is an option “duplicate slide”
it is where the slider tabs are on the right side of the window
after that change background imageyes i know how to made lots of slide.
if i make another slide it will mask the animated elements… i want to keep them in place and change background WITHOUT mask the elements.Yes it will and it will create a second slide… but if so than there will be a transition between 1 and 2 and it will erase all elements from slider 1.
I want all elements indteed background display all the time.
than you will have no chance but set up a layer on the bottom of all with the “new” background image .
than duplicate this slide – because advanced layerslider could not loop a single slide. – and set transition between the both slides the same as between inside one slide ( cross-fading – same timing)PS i believe that Revolution Slide has this on default
Hi,
Thanks for helping out @guenni007, did you have any luck with the suggestions @jb84?
Best regards,
Rikardhi
no suggestion was to create a new slide with a transition. I don’t want a transition making disappered all elements…
So it seems that there is no solution for my need.Hi,
You can add the “logo & texts” as the slider’s logo. Go to the Slider Settings > YourLogo panel. You can only use an image so you might want to included the text in the image.
Best regards,
IsmaelWell if i understand it what you want – there is a possibility to make an infinite animation via css
make your one slide slider – you now have to know the id ( you can see it as shortcode in layerslider options)
than you can add to that slider a background image create a keyframe animation and set this layerslider background image to be animated
looks this way on my test installation:#layerslider_25 .ls-bg-wrap { background-image: url(https://webers-testseite.de/wp-content/uploads/layerslider/Homepage-Slider/macro.jpg); background-size: cover; background-repeat : no-repeat } @keyframes fadeanimation { 0% { opacity:1; } 40% { opacity:1; } 50% { opacity:0; } 90% { opacity:0; } 100% { opacity:1; } } #layerslider_25 .ls-bg { opacity: 1; -webkit-animation: fadeanimation 10s infinite; animation: fadeanimation 10s infinite; }result see here: https://webers-testseite.de/one-slide-slider/
if you don’t like the infinite loop you can add an iteration count (don’t forget the webkit opiton)
you can play with these settings (ask google) and always insert it with -webkit option too !#layerslider_25 .ls-bg { opacity: 1; -webkit-animation-name: fadeanimation; animation-name: fadeanimation; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-duration: 9s; animation-duration: 9s; -webkit-animation-iteration-count: 2; animation-iteration-count: 2; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }so if you only want to make it once you can take the code instead of infinite:
#layerslider_25 .ls-bg { opacity: 1; -webkit-animation: fadeanimation 10s infinite; animation: fadeanimation 10s 1; }
- You must be logged in to reply to this topic.