Transition de page avec fondu, ça marche, oui mais...

bonjour à tous,

je me permet de poster un sujet sur ce forum, car après trois jours de recherches sur le web, je ne trouve pas la solution à mon problème. je m'explique :

sur le site que je suis en train de créer en html5 et css3, j'utilise la propriété opacity pour organiser un fondu de différents contenus au centre de la page. voici les codes respectifs :

<article class="first id="contenu1>test1</arcticle>
<article class="first id="contenu2>test2</arcticle>
<article class="first id="contenu5>test3</arcticle>
<article class="first id="contenu5>test4</arcticle>
<article class="first id="contenu5>test5</arcticle>

ces articles sont tous dans une section class="contenu".

code css :

.contenu
	{
	position : relative;
	clear:both;
	}
.contenu [class="first"] {  
	position : absolute;
	top : 0px;
	left : 0px;
	opacity : 0;
	-moz-transition-property : opacity z-index;
	-webkit-transition-property : opacity z-index;
	-o-transition-property : opacity z-index;
	-moz-transition-duration : 2s;
	-webkit-transition-duration : 2s;
	-o-transition-property : 2s;
	z-index : 1;
	}
	/* 
	#contenu1 
	{
	opacity : 1;} */
	
	#contenu1:target, #contenu2:target, #contenu3:target, #contenu4:target, #contenu5:target {
	opacity : 1;
	z-index : 2;
	}

dans cet état, cela fonctionne parfaitement, sauf qu'à la première ouverture de la page, j'ai page blanche à la place du contenu1.

si je lui octrois l'opacité en commentaire, la page reste affichée en permanence.

j'aimerai savoir donc comment faire pour que cela fonctionne avec le contenu1 en ouverture de page et qu'il fonde avec les autres quand on appelle un autre contenu.

merci d'avance pour votre aide.

cordialement.
Modifié par fspc'yo (11 Dec 2011 - 18:23)

petit up 60 vues pas une réponse merci.

bonjour,

:target = cible une "ancre" html = une adresse type: mapage.html#contenu1 par exemple pour y accéder et émuler le style.

Ton code n'a pas vraiment de défaut, c'est la méthode qui est mauvaise .

Cordialement.

merci pour ta réponse.

j'ai oublié de préciser que la page est unique, les contenuX sont accessibles par le menu en haut de page dans le <header> hors de la <section> et c'est le contenu1 quoi doit apparaitre quand on ouvre la page vu que c'est le contenu d'accueil qui doit apparaitre en milieu de page. le reste fonctionne parfaitement. me manque le petit truc pour que contenu1 s'affiche à l'ouverture de la page.
Modifié par fspc'yo (13 Dec 2011 - 01:37)

bonjour,

Par exemple: tu appelles ta page avec une ancre, ou tu décommente les style pour #contenu1 et tu ajoute un background aux .first.

++

alors si je décommente, je le précise dans le premier post, le #contenu1 est bien présent à l'ouverture de la page, mais reste affiché quand j'appelle un autre #contenuX par le biais du menu. donc je vois pas trop ce qu'un background peut changer dans l'histoire. j'ai d'ailleurs essayé et le résultat est le même, le #contenu1 est bien présent à l'ouverture de la page mais reste affiché à l'appel des autres #contenuX

à part faire une redirection à l'ouverture de la page, je ne vois pas ce que tu veux me faire comprendre par tu appelles la page avec une ancre. je ne l'appelle pas, je l'ouvre. La page c'est l'index.html et le #contenu1 est le contenu de l'accueil.

je connais pas encore très bien les rouages du css malheureusement.
Modifié par fspc'yo (13 Dec 2011 - 10:27)

bonsoir,

sans avoir tester ton code, j'en déduit que :

.first est en position absolute avec un index de 1.

.first:target passe a z-index 2 et passe au dessus des autres.

Tes elements .first sont superposés, si celui qui est au dessus a une couleur de fond, ceux qui seront en dessous ne seront pas visibles quelque soit leur opacité.

En laissant #contenu1 visible par défaut, il faut bien qu'il ne soit plus visible par transparence lorsque l'un des autres viens en avant plan via :target. CSS n'est pas interactif ... :not-target n'existe pas , il n'est pas possible non plus de cibler le n élément précédent.

Ton approche full CSS n'est pas la meilleur à mon avis, :target ne passe pas partout et un peu de javascript serait nécessaire pour t'assurer que ça fonctionne.

Le scenario que je te propose en test avec #contenu1 visible et les autres avec un fond (opaque) est basique mais ne serait pas l'option que je garderais.

Je resterais sur une feuille de style classique avec les effet de fondu et de superposition gérer via javascript. De nombreux exemple jalonne le net.

Cordialement, GC

je te remercie d'avoir éclairer mes sombres pensées

je vais chercher du côté d'un jquery bien que je ne voulais pas trop insérer de code en dehors du hmtl css mais comme ça n'est pas faisable, je vais aller fouiller.

merci

après avoir cherché et essayé plusieurs jquery avec lesquels je n'arrivais toujours pas à faire ce que je voulais, j'ai glissé un bout de code en onload :

<body onload="location.href = '#contenu1'">

ça marche parfaitement maintenant sous FF.

par contre ça fait un bloquage IE9 avec demande d'autorisation activeX, il me semble qu'il y a une équivalence au niveau code pour IE.

Est-ce une bonne solution si le site reste en page unique avec surement un rewriting d'url en .fr ou .com constant ?

petit édition du post pour avoir enfin trouvé la solution sans passer par la balise body :

<script> window.onload = function open(){
	document.location.href="#contenu1";}</script>

malheureusement, dans IE toujours les problèmes de scripts activeX présents.
Modifié par fspc'yo (15 Dec 2011 - 06:16)