-
Posts
-
I am trying to accomplish the fade in of hero image shown here:
This is not my site, just illustrates idea.
I have fiddled around with color section, color section with column with image background, full width image slider.
But…since it is first item on page, it doesn’t fade…because it’s immediately visible.
Do you have any ideas of good place to dig in with existing Enfold elements. There are so many clever ones, but I don’t seem to have found a combination that can achieve this.
Any ideas would be appreciated.
Thanks!
Hey CharlieTh,
You can create a fadein effect on most any element with css keyframes like this:#top.home #av_section_1 { animation: fadein 6s; } @keyframes fadein{ 0% { opacity:0; } 50% { opacity:0; } 60% { opacity:0.1; } 100% { opacity:1; } }So as an example, the linked test home page in the Private Content area has a color section at the top with a background image
the css above is set to fadein over 6 seconds but the keyframes has the opacity set to zero for 50% of the time, so the first 3 seconds the element is hidden, then at the 60% mark the element is slowly started to show for the remaining time.
You can try different timings and opacity to get the effect you like.Best regards,
MikeMike, have been remiss!
Thank you very much for your answer, explanation — and sample. You showed…It certainly works.But…I found it didn’t always work for me. Think it is linked to the problem I see with column animation and pre-loading in option theme.
For columns, I find they DO not animate unless pre-loading in theme options is off. I had given up on consistently “fading” my hero in — and then found the column bit. Not sure if they’re linked, but prior to that point, had gotten frustrated and stopped with my quest.I truly appreciate your assistance on this and love the effect. You solved my problem so quickly and easily. Mucho thanks!
Not with fade in pic…but any suggestions on keeping both theme option preloaded and column animation would be appreciated.
- You must be logged in to reply to this topic.