18041 sujets

Questions générales et questions de débutants

Image qui disparait en fondu au scroll de la page

Bonjour la communauté!

Je souhaiterais créer une page sur laquelle se trouve mon logo en header et qui reste au meme endroit même si l'on scroll la page. (en position fixed je crois)
Cette image sera donc pas scrollable avec le reste de la page, cependant, j'aimerais qu'elle disparaisse en fondu une fois que l'on a scrollé la page d'environ 1000px a peu près donc en utilisant je suppose du javascript!
Voila pour ma problématique, je ne sais pas faire et je fais appel à l'ingéniosité des internautes!! merci beaucoup Smiley smile
Il ne te reste plus qu’à remplacer les ??? par le nom des fonctions qui vont bien et tu auras ce que tu veux.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Image disparaissant au défilement</title>
	<style type="text/css">
		#logo {
			position:fixed;
			transition:opacity 0.5s
		}
		
		body {
			height:3000px
		}
	</style>
</head>
<body>
	<img alt="logo" id="logo" src="http://www.alsacreations.com/css/img/menu-li-forum.png"/>
	<script type="text/javascript"><!--
		/**
		 * Change l’opacité d’un obj
		 *
		 * @param obj objet HTML
		 * @param opacite flottant compris entre 0 (transparent) et 1 (opaque)
		 */
		function ???(obj, opacite) {
				obj.style["filter"] = "alpha(opacity=" + (opacite * 100) + ")";
				obj.style["-moz-opacity"] = opacite;
				obj.style["-khtml-opacity"] = opacite;
				obj.style["opacity"] = opacite;
		}
		
		/**
		 * Retourne la position des ascenseurs dans une page
		 *
		 * @return tableau de deux entiers, première case position horizontale, seconde position verticale
		 */
		function ???() {
			return [(document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft, (document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop];
		}
		
		window.onload = function () {
			"use strict";
			window.onscroll = function () {
				"use strict";
				var tabPosition = obtenirPositionDefilement(), fltOpacite;
				if (tabPosition[1] < 1000) {
					fltOpacite = 1;
				} else {
					fltOpacite = 0;
				}
				changerOpacite(document.getElementById("logo"), fltOpacite);
			}
		};
		//-->
	</script>
</body>
</html>
Je suis désolé, je vais peut etre paraitre un peu trop novice, mais a quoi correspond les ??? par exemple ?
merci déja pour cette énorme coup de main Smiley smile
Modifié par tshinkiz (11 Jul 2013 - 16:12)
Sujet clos
Aller à