Transition animation lors du scroll ( bi sens)

bonjour
Quel est le principe des transitions et des animations sur une page web lors d'un scroll vertical ( mouvement de bas en haut de la souris et inversement ) ?

1) Si je sélectionne un sélecteur ( div ) et modifie ces propriétés css ( pour le réduire de taille ) ce div va entrainer une réorganisation des div situés autour de lui . Comment se fait il que ce n 'est pas le cas ? ( Dans quelle contexte et par quelle technique cela ne se produit pas ( but recherché) !!

2) pour ajouter à un page contenant une image un effet d 'apparition de cette image la droite vers sa position actuelle lors de l apparition de cette image dans la zone visible du navigateur ( viewport ? ) ;
si j ai un évenement view ( plugin jquery view) , quelle modification dois je effectuer au niveau du css et de jquery ?







Merci
Modifié par 75lionel (14 Jul 2016 - 23:37)

bonjour, les boites qui se repositionnent et se recalculent lors de la modification d'une est appelé un «reflow», «page reflow». Cette opération peut s'avérer très gourmande selon les cas et engendrer de graves problèmes de performances. Il y a de bonnes pratiques pour diminuer l'impact. Pour l'éviter complètement, il faut sortir les éléments que l'on va modifier du flux.

Hello,

Il existe des librairies qui t'ajoute simplement une class lorsque ton élément soit rentre dans la page, soit est entièrement dans la page. Rien ne t'empêche non plus de créer ton propre composant pour le faire, ce n'est que du calcul de position...

À partir de là, c'est assez simple... Tu prévois quelque class de ce genre :

.slideTop,
.slideRight,
.slideBottom,
.slideLeft{
	transition: all 2s ease;
	opacity: 0;
}

.slideTop.active,
.slideRight.active,
.slideBottom.active,
.slideLeft.active{
	transform: none;
	opacity: 1;
}

.slideTop{transform: translateY(-100px;)}
.slideRight{transform: translateX(100px;)}
.slideBottom{transform: translateY(100px;)}
.slideLeft{transform: translateX(-100px;)}

Tu vois que par défaut, tes éléments son masqués et décalés (pas top si le CSS se charge mais pas le JS) et dès que le script ajoute la class active, il retrouve son opacité et sa position avec la belle animation qui va bien.


ps : Quand on voit du code comme ça maintenant avec du Less/Sass/..., on voit qu'on peut vite gagner pas mal de temps et de lisibilité dans le code...

Ma question était la possibilité et le contexte pour pouvoir animer des éléments ( h2 <<img> div ...) d'une page lors du scroll d'une page de haut en bas ou bas en haut .

Donc Pour sortir les élément du flux ( out of the flow) il semble qu il n y ai que :
float: right|left
position: absolute|fixed

Je vais creuser tout ça et merci pour le mot clé reflow ...( google )!!! ...

merci
https://24ways.org/2011/your-jquery-now-with-less-suck/
https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode
Modifié par 75lionel (16 Jul 2016 - 00:22)