Comment Google atteint-il l'effet de décoloration sur la page d'accueil?

Il y a deux façons.

Javascript

Fonctionne dans la plupart des navigateurs.

Modifiez progressivement l'attribut d'opacité CSS d'un élément en utilisant Javascript. C'est plus facile avec un bon cadre comme jQuery , mais c'est assez simple à faire vous-même.

function fadeIn() { var element = document.getElementById("someID"); var newOpacity = element.style.opacity + 0.05; element.style.opacity = newOpacity; if (newOpacity < 1) { window.setTimeout(fadeIn, 50); } } 

Pure CSS

Uniquement pris en charge par Webkit pour le moment.

 #someID { opacity:0; -webkit-transition: opacity 1s linear; } #someID:hover { opacity:1; } 

Pour un exemple, regardez le blog Surfin 'Safari .

Vous pouvez utiliser jQuery et ajouter un rappel call onmousemove sur la balise qui disparaît une division cachée avec id "mymenu" dans quelque chose comme:

 $("html").one("mousemove", function() { $("#mymenu").fadeIn("slow") }); 

Avertissement: ceci a été tapé ici, donc je ne sais pas s'il compile ootb.

Je ne l'ai jamais regardé, mais il est logique de supposer qu'il y a une minuterie qui démarre à l'heure de chargement de la page et qui ajuste soit l'alpha pour l'élément spécifié, soit l'opacité d'un autre élément qui le recouvre, en ce que CSS de l'élément. Chaque touche de minuterie, les chiffres s'allument un peu et le texte devient un peu plus lisible. Lorsque la visibilité complète est atteinte, la minuterie est désactivée.

JQuery est une mise en œuvre terminée, prête à l'emploi, dans un package compatible avec plate-forme croisée. Il suffit de l'ajouter, de le remuer et de le faire.

Si vous choisissez de ne pas prendre l'avis des autres réponses, vous devrez rechercher et mettre en œuvre la stratégie à partir de mon premier paragraphe. Bonne chance!

C'est en fait une chose assez complexe à faire en raison des différences entre navigateurs. Les bases sont les suivantes:

1. Obtenez l'opacité actuelle de l'élément en tant que flotteur.
2. Déterminez l'opacité finale en tant que flotteur.
3. Déterminer la vitesse de votre taux – je ne sais pas ce que cela devrait être en termes bruts – quelque chose comme .01 / ms peut-être?
4. Utilisez un setInterval pour déclencher une fonction qui augmente l'opacité par votre taux où: setInterval(function(){myElement.style.opacity = parseFloat(myElement.style.opacity)+0.01;}, 1); Dans certains endroits, vous devez vérifier si vous avez atteint le point final de votre animation et arrêtez votre intervalle.

Je pense qu'ils ont défini l'opacité initiale des éléments autres que le champ de recherche à zéro. Lorsque l'événement Mouseover est déclenché, l'opacité des éléments augmente progressivement à 1.

Edit: Dans le code, il ressemblerait à ceci:

 var hiddenStuff = document.getElementByClassName("hiddenStuff"); var interval=document.setInterval(function() { for (var i=0; i<hiddenStuff.length;i++){ hiddenStuff[i].style.opacity+=0.1 } if (hiddenStuff[1].style.opacity===1){ window.clearInterval(interval); } }, 100); 

Vous devrez peut-être modifier les paramètres pour obtenir une animation en douceur.

@ Georg , cet exemple fonctionne également sur Firefox 3.5. 🙂

Démo: PURE CSS http://jsfiddle.net/6QS2a/1/

 </div> 

Css:

 .item { height:150px; width:150px; border-radius:100%; background:skyblue; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; opacity:0.2; } .item:hover { opacity: 1; }