How does Google achieve the fading effect on the home page?

后端 未结 7 2170
猫巷女王i
猫巷女王i 2021-01-14 06:27

If you go to google.com, you notice the menu on top slowly appears once you have mouse over the page. I was wondering what does Google use to control the fading effect?

7条回答
  •  隐瞒了意图╮
    2021-01-14 06:58

    I've never looked at it, but it's only logical to assume that there's a timer that gets started at load time for the page, and that adjusts either the alpha for the specified element or the opacity of another element that overlays it, in that element's CSS. Every timer tick, the numbers get turned up/down a little and the text becomes a bit more legible. When full visibility is reached, the timer is turned off.

    JQuery is a finished, ready to use implementation of this in a cross-platform compatible package. You just add it, stir it up and it's done.

    If you choose not to take the advice of the other answers, you'll have to research and implement the strategy from my top paragraph on your own. Good luck!

提交回复
热议问题