Is there a way to have an object “Fade Out” in Wix Studio just like there is to “Fade In” an object? If not, suggest there is a “Fade Out” animation option along with the “Fade In” option currently in animation effects (or something like a “reverse” checkbox for the “Fade” animation transition).
The reason I would like this is because I want to have website visitor click on a simple logo on either white or black screen (landing page) - and then be taken to “home page” full-screen image that will gradually fade in to reveal itself.
In my case, I have a landing page that is white screen with simple logo that a visitor clicks. I would then like a exactly same white color screen appear and then a full-page image gradually fade in. Key word is gradual. Because the current experience from white landing page to having image load on main page is jarring. Looking for something almost dreamlike as if waking up in the morning.
I think I have some options but not sure if they will work:
- Overlay a white image directly over the existing image that I want to reveal. Then apply CSS code to that white image to have it “Fade Out” to then reveal the main image behind. I’m having difficulty with this but think that code can be found at this link with a “hide” function:
-
Another option is to create a video in Premiere Pro that uses one of the standard video transitions to fade-in from white/black, just like a vast majority of movie opening scenes do. Then use that video instead of the image on my home page. But this will be file-size heavy and is a lot of work. Also not sure if the video will render the same as an image on home screen.
-
Possibly another option is to create a white background section and then have an image fade in from that. This should be very simple but I can’t get this to work yet.
Is there another way or better way to accomplish this?
Really appreciate any guidance!