Bonjour à tous,

J'ai un petit soucis avec une animation que j'aimerais réaliser.

Pour faire simple cette animation correspond à un texte en image de fond (.png admettons) qui grossit au lancement de la page jusqu'à devenir complètement zoomé.

Par exemple, le texte "toto" devient zoomé jusqu'à ne voir plus qu'un bout du o et du t du milieu.

Problème, j'ai essayé d'utiliser les transformations webkit et notamment scale mais impossible de créer ce que je veux. Si quelqu'un à une idée je suis preneur.
Sachant que ça doit être compatible iPhone et iPad.

Merci d'avance pour votre aide.

Cordialement,
Vincent.

Qu'est-ce qui te pose problème ? Qu'as-tu tenté ? etc. etc.

J'ai tenté de faire l'effet en CSS :

-webkit-transition: all .2s ease-in-out;
+ ajout d'un scale : 1.2; quand le document est pret mais ça ne marche pas.

Et même après avec un :hover sur le div de fond, l'image est bien grossie mais la div s'agrandie énormément et ça ne correspond pas à ce que je veux.

J'ai regardé un peu du coté de jQuery UI mais je n'ai pas d'effet qui correspond à ce que je recherche. (Scale faisant disparaître l'image dans la démo)
Peut-être que je ne l'ai pas bien utilisée.

Avez-vous des idées ?

Merci.

Comme ça ?

<style type="text/css">
#wrapper {
	width: 200px;
	height: 150px;
	overflow: hidden;
	border: 1px solid #000;
}
#inner {
	width: 200px;
	height: 150px;
	-moz-transform-origin: 50% 50%;
	-moz-transform: scale(1);
	-moz-transition: all 500ms linear 0s;
	-webkit-transform-origin: 50% 50%;
	-webkit-transform: scale(1);
	-webkit-transition: all 2000ms linear 0s;
}
#inner:hover {
	-moz-transform: scale(2.5);
	-webkit-transform: scale(2.5);
}
</style>

<div id="wrapper">
<img src="http://golmote.free.fr/image1.jpg" id="inner" />
</div>

Ouai complètement ! L'idée est là !

Il faut que j'arrive à mettre ça en background parce qu'enfaite le <div> est le conteneur de mon site.
Et aussi que l'animation se déclenche directement une fois que la page est chargée.

Bon déjà, l'animation est exactement ce que je recherche. C'est peut-être plus parlant

As-tu une idée pour mettre l'image en background ?

Parce que le code suivant ne fonctionne pas :

<style type="text/css">
#wrapper {
	background:#FFFFFF  url('images/fond-home.jpg');
     background-repeat: no-repeat;
     background-position: center center;
	width: 200px;
	height: 150px;
	overflow: hidden;
	border: 1px solid #000;
}
.inner {
	width: 200px;
	height: 150px;
	-moz-transform-origin: 50% 50%;
	-moz-transform: scale(1);
	-moz-transition: all 500ms linear 0s;
	-webkit-transform-origin: 50% 50%;
	-webkit-transform: scale(1);
	-webkit-transition: all 2000ms linear 0s;
}
.inner:hover {
	-moz-transform: scale(2.5);
	-webkit-transform: scale(2.5);
}
</style>
<div id="wrapper" class="inner">

</div>

Parce qu'enfaite je vire la balise <img> (vu que je veux que ça soit en background) et du coup je mets une classe "inner" à la div wrapper et effectivement ça fonctionne mais maintenant le div s'agrandit avec l'image (le problème que j'avais rencontré avant) et il faut un :hover
Pour le :hover je peux toujours simuler l'évenement avec jQuery mais pour l'image en background c'est plus génant par contre

Garde une image.

background-size, je crois pas que ce soit encore méga supporté.

Donc mets en image en absolu derrière ton site.

<style type="text/css">
#wrapper {
	width: 200px;
	height: 150px;
	overflow: hidden;
	border: 1px solid #000;
}
#inner {
	width: 200px;
	height: 150px;
	-moz-transform-origin: 50% 50%;
	-moz-transform: scale(1);
	-moz-transition: all 500ms linear 0s;
	-webkit-transform-origin: 50% 50%;
	-webkit-transform: scale(1);
	-webkit-transition: all 2000ms linear 0s;
}
</style>

<script>
window.onload = function() {
	var inner = document.getElementById('inner');
	inner.style.MozTransform = inner.style.WebkitTransform = "scale(2.5)";
};
</script>

<div id="wrapper">
<img src="http://golmote.free.fr/image1.jpg" id="inner" />
</div>

Je suis désolé d'abuser de ta bonne volonté mais j'y suis vraiment presque et je ne comprends pas ce que tu veux dire par "met en absolu l'image"

J'ai ça :

<style type="text/css">
#wrapper {
	width: 1px;
	height: 1px;
	overflow: hidden;
}
#inner {
	width: 683px;
	height: 384px;
	-moz-transform-origin: 50% 50%;
	-moz-transform: scale(1);
	-moz-transition: all 500ms linear 0s;
	-webkit-transform-origin: 50% 50%;
	-webkit-transform: scale(1);
	-webkit-transition: all 2000ms linear 0s;
	position: absolute;
	top: 80px; 
	left: 100px;
}
</style>

<script>
window.onload = function() {
	var inner = document.getElementById('inner');
	inner.style.MozTransform = inner.style.WebkitTransform = "scale(2.5)";
};
</script>
	
	</head>
<body>

</div>
<div id="wrapper">
<img src="img/fond-home.jpg" id="inner" />
</div>
<div id="content">Ceci est un test </div>
</body>

L'image s'affiche parfaitement et fait exactement ce que je veux. En revanche la div avec du texte qui simule le futur contenu de mon site s'affiche bien mais "sous" l'image.

Comment je peux faire pour que l'image passe à l'arrière plan par rapport aux autres div ?

Merci encore pour ton aide.

C'est quoi cette ligne 32 ?

Tu mets le wrapper en position absolue, de la taille que tu souhaites, avec un z-index de 1 ; et ton contenu principal en position absolue avec un z-index de 2.

Potentiellement, tu mets le tout dans un autre wrapper en position relative, pour "stabiliser" ton site (genre une largeur fixe d'environ 960px, avec un margin auto).

Parfait ! Ca marche nickel !

Je mets le code final en ligne si ça peut servir à quelqu'un :

<style type="text/css">
#wrapper {
	width: 900px;
	height: 600px;
	overflow: hidden;
	position: absolute;
	z-index: 1;
}
#inner {
	width: 683px;
	height: 384px;
	-moz-transform-origin: 50% 50%;
	-moz-transform: scale(1);
	-moz-transition: all 500ms linear 0s;
	-webkit-transform-origin: 50% 50%;
	-webkit-transform: scale(1);
	-webkit-transition: all 2000ms linear 0s;
}
#content {
	position: absolute;
	z-index: 2;
}
</style>

<script>
window.onload = function() {
	var inner = document.getElementById('inner');
	inner.style.MozTransform = inner.style.WebkitTransform = "scale(2.5)";
};
</script>

<div id="wrapper">
<img src="img/fond-home.jpg" id="inner" />
</div>
<div id="content">Ceci est un test</div>

La ligne 32 était une coquille de c/c

Dernière question. J'ai testé sous FF3.6 et ça ne fonctionne pas. As-tu une idée à partir de quelle version de FF, ce code est-il compatible ?
Y a-t-il possibilité de le rendre compatible Opéra en ajoutant les préfixes -o- ?

Merci encore.

FF 4 ou 5, je pense.

Mais de toutes façons, la 3.6 est la seule qui ait été maintenue en vie. Donc tous ceux qui ont upgradé doivent avoir désormais la version 8.

Pour Opera, je sais pas s'il faut des préfixes -o- ou pas de préfixe du tout. Google pourra surement t'aider. De même pour IE9, y'a surement un -ms- à placer. (Attention, je crois qu'au niveau du JS, sous IE9, le "m" de "ms" reste en minuscule, contrairement aux autres préfixes. Mais encore une fois, c'est une information que tu trouveras sans mal sur Google)

Parfait ! Merci à toi pour tout.

Bonne soirée/nuit