Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › JavaScript › Fade-in menu background on scroll from transparent to white

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 15, 2015 at 1:54 am #195916
    bchevreau
    Participant

    Hi guys !

    I’m trying to make the background of my menu fade-in from transparent to white (#ffffff) after the user scrolls down.

    I would then add this js to my wordpress theme using the section for custom CSS integrated to the <head> section, hence the script tags.

    Below are the 2 codes I tried so far, without result.

    NOTE: I’m a total newbie on js (I only have CSS/HTML basics) but I’m a a little code literate so I should be able to follow.

    http://codepen.io/anon/pen/VYQxRY

    and

    http://codepen.io/anon/pen/wByjOd

    The second one uses opacity but it won’t work for me I’m afraid, as it would reduce opacity of the child items like the nav links, instead of just acting on the transparency of the menu’s background.

    Thanks in advance for your help !

    February 15, 2015 at 6:53 am #195934
    Shikkediel
    Participant

    Unfortunately jQuery cannot animate colors – unless a plugin is used :

    http://api.jqueryui.com/color-animation/

    Of course a simpler approach is to use opacity like the second pen but for this the background needs to be a separate element (like you discovered) and then fade() can simply be used. Third option – a minor hack I put together not too long ago with a ‘parallel’ animation :

    http://codepen.io/Shikkediel/pen/xbRaZz

    February 16, 2015 at 3:08 am #195973
    Paulie_D
    Member

    Unfortunately jQuery cannot animate colors – unless a plugin is used

    No…but it can add a class with a bg color transition attached.

    Wouldn’t that be simpler?

    http://codepen.io/Paulie-D/pen/ekKru/

    February 16, 2015 at 6:19 am #195998
    Shikkediel
    Participant

    Nice… simpler and definitely a ‘cleaner’ approach as well.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.