Animating Page Opacity

  • Is it possible to animate the opacity of a page? Currently, if I set my opacity to zero on my home page it will only show the background image and nothing else. I wanted the text to then be readable after a few seconds, so, is it possible to animate this so it shows just the background image and then fades back in to show the text? I’m not sure how to go about changing that value dynamically based on amount of time passed. I’ve tried a few plugins, but none of them affect the page as a whole, only content within the page. If I get it to work right, my plan was not to use an image, but an animation. However, I wanted to start small.

    • This topic was modified 8 years, 2 months ago by acejhm. Reason: Clarifying
Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Please provide a link to your site! Thanks.

    Also, look at “transition duration” CSS

    https://www.google.com/search?q=css+transition+duration

    Thread Starter acejhm

    (@acejhm)

    My apologies, I didn’t think the link would matter since it’s not working, but here ya go: https://acejhm.com/

    I’ll look into the CSS transition thing and see if I can get it working. Thanks!

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    The way you have things arranged on your site makes it very hard to do that. There are a lot of pieces. It might be easier to have the “background” an layer that sites on top of the site and fades away when the page is loaded. I’m not finding any plugins on a quick search of the library.

    Thread Starter acejhm

    (@acejhm)

    Well, I used a theme to set up the site, and then I’ve been more-or-less studying how it works to learn HTML better. What would you suggest to make it better? I’ve tried using the CSS transition thing, but I can’t get it to actually do the transition.

    Thread Starter acejhm

    (@acejhm)

    It’s not letting me edit my previous post, but basically, the transition isn’t being triggered, and that’s the problem.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    heh… I’ve been strugging with CSS transitions on a site I’m building right now and they’re just not working for me.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Animating Page Opacity’ is closed to new replies.