Faire une belle transition d'une page à l'autre [sympa]

Bonsoir,

je cherche à réaliser des effets de transition d'une page à l'autre (navigation sur un même site) qui concerneraient évidemment le plus de navigateurs possibles dans un souci de compatibilité, donc une propriété avec les formats propriétaires: -o-, -webkit-, -moz-, etc.

En connaissez vous ?
Modifié par jmlapam (08 Dec 2011 - 11:48)

Hello.
Tu peux tester un truc du genre (syntaxe mozilla only, à adapter)

@-moz-keyframes FADE {
        0%   { opacity: 0; }
        100% { opacity: 1; }
}

body {
 -moz-animation-name: FADE;
 -moz-animation-duration: 1s;
}

Pas forcément terrible selon la page, et ça doit avoir un coût en terme de perf, par contre je n'ai pas de doc sur le sujet, désolé.

Ah salut,


Donc les keyframes, oui pas de problème je connais un peu.
EDIT: pour la perf, oui j'imagine mais il n 'y a même pas de BDD sur le site en question et très peu de PHP donc...

EDIT2: Sympa, voici l'équivalent pour chrome quand même:

@-moz-keyframes FADE{
	0%{ 
	opacity: 0;
	}
	100% { 
	opacity: 1;/
	}
}
@-webkit-keyframes FADE{
	0%{ 
	opacity: 0;
	}
	100% { 
	opacity: 1;

	}
}
body{
	-webkit-animation-name:FADE;
	-webkit-animation-duration:1s;
	-webkit-animation-iteration-count:1;
	-moz-animation-name: FADE;
	-moz-animation-duration: 1s;
}

Modifié par jmlapam (05 Dec 2011 - 23:18)

bonjour je cherche la même chose mais je ne voit pas comment le faire fonctionner ?

Juste par curiosité jmlapam la transition du code c'est celle qui y a sur ton site ?
(via le lien WWW en bas de tes messages)

jmlapam a écrit :

EDIT: pour la perf, oui j'imagine mais il n 'y a même pas de BDD sur le site en question et très peu de PHP donc...

Et le rapport entre une transition CSS sur le front-end et la technologie et les ressources utilisées pour le back-end tu le vois où ?

Suis-je bête en faite sa marche mais je ne m’attendais pas a cela la effectivement cela fait apparaitre progressivement le body

jb_gfx a écrit :


Et le rapport entre une transition CSS sur le front-end et la technologie et les ressources utilisées pour le back-end tu le vois où ?

On me parle de perf, je dis qu'il n'y a que du CSS et de l'HTML sur le site, très peu de scripts donc que je peux me permettre de mettre des petits effets quand bien même cela consommerait.
Ca va mieux?

@azledev: oui, c'est sympa sans être extraordinaire mais cela agrémente je trouve.
@nux02160 : il doit y avoir plein d'autres effets possibles, à tester. Tu peux même créer plus d'étapes je pense en mettant par pallier de 30%
Modifié par jmlapam (08 Dec 2011 - 08:18)