Comment faire de Fading Backgrounds dans HTML et CSS

Vous n'êtes pas besoin de Flash ou plug-ins tiers pour impressionner les visiteurs du site. CSS et javascript, il est possible pour vous de générer des animations colorées et des effets visuels à l'intérieur du navigateur d'un utilisateur. Une façon de rendre votre site Web se démarquer est d'estomper l'arrière-plan d'une page Web lorsqu'un utilisateur entre votre site. Ceci est une ancienne effet de HTML, mais il peut encore attirer l'attention du public numériques partout.

Instructions

  1. Ouvrez un de vos documents HTML en utilisant un éditeur HTML ou Notepad.




  2. Collez le code javascript suivant dans le document de "tête" section:




    Le "fadeBackground" fonction appelle cette "getHexVal" fonction. Le "getHexVal" fonction convertit les valeurs de couleur décimales en hexadécimal. Les deux dernières lignes de code sont les plus importants. Ils provoquent le navigateur à exécuter tout ce à chaque fois que votre page web charges.

  3. Enregistrez le fichier et l'ouvrir dans un navigateur. Votre page Web apparaît et disparaît de votre couleur de départ à blanc.

Conseils & Avertissements

  • Visitez une couleur site de tutoriel HTML pour en apprendre davantage sur la façon dont les couleurs hexadécimaux travaillent. Vous pouvez ensuite modifier les valeurs de "rougequeue," "greenStart" et "blueStart" à tout ce que vous aimez. Par exemple, pour changer votre couleur de départ au vert, définir la valeur de "greenStart à "0xFF" et la valeur des deux autres couleurs à "0x00." Faire la couleur de fin noir au lieu de blanc en changeant la valeur de "couleurFin" à "# 000000";
  • Réglez les valeurs pour "incrément" et "retard" pour affiner l'effet de fondu et de réaliser la transition que vous désirez. La diminution de la valeur de "incrément" produit un effet plus doux de transition de couleur, mais elle provoque aussi l'effet de prendre plus de temps. Réduire la valeur de "retard" accélère la transition.
» » » » Comment faire de Fading Backgrounds dans HTML et CSS