28234 sujets

CSS et mise en forme, CSS3

[Résolu] Faire apparaitre une image avec transition

Bonjour à tous,

je découvre avec délice les possibilités offertes par les effets de transition css3 (quel pied!)
et je voudrais effectuer un petit effet que j'ai trouvé sympa :

on défile tranquillement dans une page un peu longue, et à un endroit donné, des images apparaissent.

pour l'apparition, je pense utiliser une transition avec transition-property:opacity de 0 à 1 en 1seconde. pas trop dur.
mais comment faire pour que l’évènement déclencheur soit : "quand je défile la page et que la div qui contient l'image arrive à l'écran"?

Merci à tous ceux qui prendront le temps de s'intéresser à mon problème, et bonne journée Smiley smile

edit : voici un exemple de ce que je voudrais faire:
http://www.pixies-agency.fr/
Modifié par Claire39 (19 Nov 2013 - 09:44)
salut,
c'est plutôt simple à faire, il suffit de récupérer la valeur actuelle du scroll et de la comparer avec la position verticale de l'élément à faire apparaître. Tu soustrait la hauteur de la fenêtre à la valeur du scroll moins la moitié de la hauteur de ton élément (valeur subjective) pour passer l'opacité à 1 à ce moment là.
Tu peux te passer de JQuery. Un exemple simple.
Bonjour et merci pour vos réponses Smiley smile

à priori, il doit y voir un chtuk, parce que en créant une page html toute simple et en testant vos deux différentes solutions, je n'obtiens absolument rien... et pourtant, je travaille avec la dernière version de mon navigateur...

Comme je travaille sur un webdesign entièrement élastique, je n'ai pas de valeurs en pixels, que des % et des rem, ce qui m'empêche de passer pas mal d'effets qui nécessitent des positions absolues et des valeurs en px.

Donc je crains que la proposition de artsx ne me serve pas à grand chose.
Serait il possible de m'aider à creuser (à comprendre aussi ;p) la proposition de Zelalsan?

ma page index.html :


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
div {
	width:50%;
	height:200px;
	margin:2500px auto;
	background:red;
	opacity:0;
	transition-property:opacity; 
	transition-duration:1s;
}
</style>
<script type="text/javascript">
function addEvent(a,b,c,d){d = !d && false;(a.addEventListener)?a.addEventListener(b,c,d):a.attachEvent('on'+b,c);}
var div = document.getElementsById("div")[0];
function scrolled(){
	var curScroll = document.documentElement.scrollTop || document.body.scrollTop,
		windowHeight = document.documentElement.clientHeight;
	
	if (curScroll >= div.offsetTop - windowHeight + div.offsetHeight/2.5){
		div.style.opacity = "1";
	}
}
addEvent(window, "scroll", scrolled, false);
</script>
</head>
<body>
<div>Bonjour!</div>
</body>
</html>


Pour l'instant, j'obtiens un grand rien tout vide...

Merci de votre aide!
Oui c'est parce que ton code est "très" faux Smiley biggrin . D'abord et un peu hors sujet, tu n'as pas besoin d'attribut xmlns en HTML5 et le charset se spécifie très facilement avec <meta charset="utf-8">. Ensuite ce n'est pas "document.getElementById("div")[0]" mais byTagName. On recherche l'élément et non l'ID (d'ailleurs l'ID est unique donc on n'aura jamais de situation où getElementById nous retournera un tableau i.e document.getElementById("div")[0] n'existera jamais et pour faire encore plus mon chieur tu as rajouté un "s" à element Smiley langue ).
Pour fini, la balise script vient en dernier et non dans le <header>, elle doit être mises après que la <div> qu'on recherchera soit déclarée.
En gros, c'est ce code là qui marche.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
div {
	width:50%;
	height:200px;
	margin:2500px auto;
	background:red;
	opacity:0;
	transition-property:opacity; 
	transition-duration:1s;
}
</style>
</head>
<body>
<div>Bonjour!</div>
<script type="text/javascript">
function addEvent(a,b,c,d){d = !d && false;(a.addEventListener)?a.addEventListener(b,c,d):a.attachEvent('on'+b,c);}
var div = document.getElementsByTagName("div")[0];
function scrolled(){
	var curScroll = document.documentElement.scrollTop || document.body.scrollTop,
		windowHeight = document.documentElement.clientHeight;
	
	if (curScroll >= div.offsetTop - windowHeight + div.offsetHeight/2.5){
		div.style.opacity = "1";
	}
}
addEvent(window, "scroll", scrolled, false);
</script>
</body>
</html>
Shame on me!

merci pour toutes ces corrections, en effet, je fais de grossières erreurs...

maintenant, ça marche, mais je ne vois pas très bien quoi en faire, pour deux raisons :

la première, c'est que c'est chouette, un div seule au milieu de rien avec une bête de marge, mais ça ne risque pas de m'arriver souvent.
J'aurais plutôt une longue page, avec des tas de div dedans, et une, identifiée par une id par exemple, à qui il va arriver cette transition.

Et là je suis perdue dans Javascript, que je ne maîtrise pas du tout (c'est la deuxième raison):

Que signifie la 1ere ligne:
function addEvent(a,b,c,d){d = !d && false;(a.addEventListener)?a.addEventListener(b,c,d):a.attachEvent('on'+b,c);}

est elle bien reliée, comme je le devine, à :
addEvent(window, "scroll", scrolled, false);


Et comment passer d'un 
getElementsByTagName
à 
getElementsById
?

je comprend bien que si je recherche un élément identifié par son Id, cela ne retournera pas de tableau, donc je pense pouvoir écrire ceci:
var div = document.getElementsById("iddemadiv");


... mais là plus rien ne fonctionne Smiley ohwell

à quel endroit est ce que j'ai décroché?
Merci d'avoir la patience de m'éclairer Smiley smile
Modifié par Claire39 (15 Nov 2013 - 09:38)
Oui c'est sûr qu'une page ne serait pas comme dans mon exemple mais ça ne changera absolument rien.

Claire39 a écrit :

Que signifie la 1ere ligne:
function addEvent(a,b,c,d){d = !d &amp;&amp; false;(a.addEventListener)?a.addEventListener(b,c,d):a.attachEvent('on'+b,c);}


C'est juste une fonction qui sert à avoir une rétrocompatibilité avec IE<9. Dans ce cas précis, elle ne sert à rien vu que "opacity" n'est pas compris par IE<9, il faut passer par les "filter" (mais ça c'est une autre histoire). C'est une habitude que j'ai pris.

Claire39 a écrit :

Et comment passer d'un 
getElementsByTagName
à 
getElementsById
?

C'est parce que c'est "getElementById" et non "getElementsById" (sans "s") comme dit dans mon précédent message (l'ID est unique).

En fait ça restera exactement la même chose. Tu pourrais à chaque fois récupérer l'ID d'un élément et appliquer la même condition pour le faire apparaître.
On pourrait faire une boucle pour faire tout d'un coup.
Tu as un exemple ici. Tous les IDs sont stockés dans le tableau "IDs" et c'est tout.
Bonjour et merci!

en modifiant le : var div = document.getElementsByTagName("div")[0];
en : var div = document.getElementById("iddemadiv");

j'obtiens bien l'effet souhaité.

Et aussi, chose que je ne comprenais pas, en rajoutant des tas de div avec plein de paragraphes avant et après ma div, et en modifiant les marges autours de la div dans le css, ça marche également!

je n'ai plus qu'à tester cela dans ma vraie page de site, en faisant apparaitre des images plutôt que la div en elle même.

pour tous eux que cela pourra aider, je colle ici la page HTML finale :


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
#bonjour {
	width:50%;
	height:200px;
	margin:100px auto;
	background:red;
	opacity:0;
	transition-property:opacity; 
	transition-duration:4s;
}
</style>
</head>

<body>
<div><p>Lorem ipsum dolor sit amet, ...</p></div>
<div><p>... et encore, et encore, pour avoir de quoi scroller</p></div>
<div id="bonjour">Bonjour!</div>
<div><p>Lorem ipsum dolor sit amet, ...</p></div>

<script type="text/javascript">
function addEvent(a,b,c,d){d = !d && false;(a.addEventListener)?a.addEventListener(b,c,d):a.attachEvent('on'+b,c);}
var bonjour = document.getElementById("bonjour");
function scrolled(){
	var curScroll = document.documentElement.scrollTop || document.body.scrollTop,
		windowHeight = document.documentElement.clientHeight;
	
	if (curScroll >= bonjour.offsetTop - windowHeight + bonjour.offsetHeight/2.5){
		bonjour.style.opacity = "1";
	}
}
addEvent(window, "scroll", scrolled, false);
</script>

</body>
</html>


En tout cas, je vous remercie tous les deux pour votre aide (et votre patience)
Bonne journée Smiley smile
Modifié par Claire39 (19 Nov 2013 - 09:45)
Sujet clos
Aller à