Bonjours,

Je n'arrive pas à trouver ce que je veux alors je post, peut etre que quelqu'un ici aura déjà vu ça. Je cherche une sources, ou un tuto sur les anim css en relation avec le scrolling.

En gros le scénario c'est
-une image et un texte en dessous.
-lorsque je scroller le texte disparait, l'image fait une rotation de 180°
-un nouveau texte apparait sous l'image , à l'endroit du premier.

Je pense que c'est faisable, mais je ne trouve pas d'exemple.
Merci de votre aide

En fait rectification, c'est pas une rotation 180° que je veux, mais un miroir (renversement) vertical.
J'espère que le css permet toujours de faire ça

img {
display: block;
height: 100px;
width: 500px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
}

img:hover {
display: block;
height:100px;
width:500px;

-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
-webkit-transition: all 1s;
-moz-transition: all 1s;

}

Pour ce qui est du renversement c'est bon.
ici je l'ai fais sur "l'hover" de mon image.
Une idée pour lier ça au scroll?
Merci

Avec du javascript ? Ou sans ?

Et pour les navigateurs qui ne sont pas sous webkit ou gecko, ils n'ont pas droit à une propriété de transition valide ? ;)

axelradio : Peut importe, mais je ne maîtrise pas le JS donc ça va être dur pour moi de le modifier

warpshadow : si, je veux bien, un coup de main ?

Pour la phrase qui est sous l'image, je peux surrement utiliser ça :

$(window).scroll(function (event) {
var y = $(this).scrollTop();

if (y <= 300) {
$('#my-div').addClass('animate');
}
else
{
$('#my-div').removeClass('animate');
}
});

Je mets deux fois ce code, un pour la phrase qui va disparaitre par exemple à 300px de scroll, et l'autre qui va apparaitre a 350px, en ajoutant un img.animate sur le css. Et je joue sur l'opacité avec une transition sur le temps.
ça pourrait marcher je pense, faut que je teste.

Par contre je sais toujours pas comment lier la rotation de l'image au scroll.
Je ne veut pas que à 300px, mon anim se lance (comme je pourrai le faire avec le code ci-dessus) Mais bien que ce soit lier au scroll (si scroll vers le bas, l'image commence à se retourner, si scroll en haut au milieu de la rotation, elle repart en sens inverse.

J'espere expliquer clairement
Merci

Tiens, de quoi t'aider à mieux comprendre les préfixes : http://www.emmanuelbeziat.com/blog/prefixes-css-jusqua-quand/ ;)

Pour ta question de JS, regarde le dernier post sur cette page : http://stackoverflow.com/questions/9957860/detect-user-scroll-down-or-scroll-up-in-jquery

Tu devrais utiliser ça ; détecter la direction du Scroll en jQuery n'est pas facile du tout.

Je vais essayer de trouver des trucs, des solutions toutes prêtes, je suis déjà tombé la dessus: http://stackoverflow.com/questions/7978139/rotating-an-image-while-scrolling

Merci à vous deux,

Axelradio, le liens est assez proche de ce que je veux faire.
Ils utilisent ce code pour faire la rotation de l'image :

$(document).ready(function() {
//scroll
$(window).scroll(function(e) {
var top = $(document).scrollTop();
var wHeight = Math.max(600,$(window).height());

var actPage = Math.floor((top+(wHeight/2))/wHeight);

//page1 anim
if (actPage == 0) {

$('.logo .bg').css({'-webkit-transform':'rotate('+top+'deg)
','-moz-transform':'rotate('+top+'deg)','-o-transf
orm':'rotate('+top+'deg)','-ms-transform':'rotate(
'+top+'deg)','transform':'rotate('+top+'deg)'});

}
});
});

Je voudrai remplacer la rotation par mon scaleY, mais je n'arrive pas à ré-ecrire le css.
J'ai l'impression qu'il faut se servir de leur +top+ mais je ne sais pas comment.
Est ce qu'il faut faire un truc du genre divisé le -1 du scale par leur top pour que se soit lié au scroll ?
Je bloque un peu sur ça

Merci de votre aide

J'ai utilisé ceci, qui marche nikel, merci axelradio pour le lien.

$('.headline .accroche').css({'-webkit-transform':'rotateX('+to
p/5+'deg)','-moz-transform':'rotateX('+top/5+'deg)
','-o-transform':'rotateX('+top/5+'deg)','-ms-tran
sform':'rotateX('+top/5+'deg)','transform':'rotate
X('+top/5+'deg)'});