-
AuthorPosts
-
September 18, 2015 at 10:23 pm #505782
Is there a way to change the animations on the title, subtitle and button? I’d like all of the elements to fade in at the same time (.5s after pageload).
Thanks for your help.
September 18, 2015 at 11:17 pm #505793*more specifically, have those elements fade in at the same time for each slide .5s after the slide transition.
September 21, 2015 at 5:30 am #506194Hey,
Could you provide us with a link to the site in question so that we can take a closer look please?
Best regards,
RikardSeptember 21, 2015 at 4:31 pm #506507Sorry, Rikard, but the site is currently only installed locally as it gets built out. I did add this to the Quick CSS to stop the animation altogether:
.avia_transform .av_slideshow_full .active-slide .avia-caption-title, .avia_transform .av_fullscreen .active-slide .avia-caption-title, .avia_transform .av_slideshow_full .avia-caption-content, .avia_transform .av_slideshow_full .avia-caption-title, .avia_transform .av_fullscreen .avia-caption-content, .avia_transform .av_fullscreen .avia-caption-title, .avia_transform .avia-slideshow-button { animation: none !important; -webkit-animation: none !important; visibility: visible !important; }
But I’d like the elements (title, caption and button) to fade in together (right now there’s no fade or motion at all).
Hopefully that helps identify what I’m trying to do more clearly.
September 21, 2015 at 4:46 pm #506511If you go to this demo you can see the Title, Caption, and buttons all fade in and move:
– “NEW SPRING EDITION FOR WOMEN AND MEN NOW AVAILABLE” slides in from top (with fade)
– “The new beautiful spring collection, created by star designer Konrad Kries is now available.” slides in from bottom (with fade)
– “Women’s Collection” and “Men’s Collection” both slide in from top (with fade, and I think a delay as well)I’d like to have all of those elements fade in at the same time without any motion.
Thanks for you help – and sorry for being unclear before.
September 22, 2015 at 3:37 pm #507133Hi!
In the /enfold/css/shortcodes.css file around line 4450 you should see the CSS animations setup.
@keyframes caption-top { 0% { transform:translate(0,-20px); opacity: 0; } 100% { transform:translate(0,0); opacity: 1; } }
Remove the transform declarations like so.
@keyframes caption-top { 0% { opacity: 0; } 100% { opacity: 1; } }
So only opacity is left.
Cheers!
ElliottSeptember 22, 2015 at 7:02 pm #507299Thanks! I’ll try that out.
September 23, 2015 at 5:50 am #507468 -
AuthorPosts
- You must be logged in to reply to this topic.