28112 sujets

CSS et mise en forme, CSS3

Evolution d'image ou de vidéo a mesure de descente de page

Pages :
Modérateur
Bonjour,

Bon, je retire la poussière d'un pc qui traine dans un coin et je teste (mais je pense que le mieux, ce serait de mettre tous les PC de la Terre entière en déchèterie Smiley lol Smiley lol Smiley lol ).

Amicalement,
Je suis d’accord avec toi mais mon mac est en panne. Et puis le site de Apple marche nickel sur mon PC.
Modérateur
Bonjour,

Alors résultat des tests sur un lenovo portable configuration médiocre et qui a environ 3 ans.

Firefox : c'est un peu saccadé, mais bon, ça passe quand même. Pas de tressaillement.

Edge : j'ai vu le cadre tout pourri moi aussi qui apparait quelques millisecondes. Ça tremblote latéralement (ça doit être dû au reflow). C'est saccadé aussi.

J'ai trouvé une amélioration sensible. On peut remplacer la ligne :
mh1--;

par la ligne
mh1=mh1-5;

Ça améliore pas mal la fluidité (en fait on accélère le rétrécissement de la vidéo en faisant des "pas" plus grands, et du coup on diminue sans doute pas mal le nombre de reflow : même quand la machine est un peu juste, ça me semble passer). Au lieu de "-5", on peut essayer d'autres valeurs plus grandes ou plus petites et voir ce que ça donne avec la "vraie" page.

On a encore pas mal d'autres possibilités pour améliorer la fluidité, en particulier en travaillant sur la taille de la vidéo (mais est-ce nécessaire ?).

Par ailleurs, j'ai mis dans le css le min-height du <body> à 150vh. Ça a l'air d'être suffisant. Et j'ai mis la largeur du <main> à 100% (je ne sais pas si c'est vraiment important, mais en tout cas, il vaut mieux que le <main> reste à une largeur constante même quand la vidéo rétrécit).

Amicalement,
Franchement je préfère la toute première "anim" sans dézoom il faut juste quelle se lid=se qu'une fois j'ai la balise loop="0" mais ça ne marche pas.
Modérateur
Bonjour,

Rien compris à la phrase ! Smiley smile

Déclenchement une seule fois sans dezoom (les navigateurs ont tendance à envoyer des évènements "scroll" au chargement de la page de manière difficilement prévisible, et du coup, il faudra peut-être adapter la valeur de n dans la fonction magic()) :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
	font-size:2em;
}
video
{
	width:50vw;
	display:block;
	margin:0 auto;
}
</style>
<script>
var progression=0;
function magic()
{
	var n=2;
	if(progression<n)
	{
		progression++;
		if(progression>=n)
			document.getElementById('toto').play();
	}
}
</script>
</head>
<body onscroll="magic()">

<h1>Vidéo déclenchée au scroll</h1>
<video id="toto" src="apple.mp4" muted playsinline>
</video>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>

Amicalement,
Modifié par parsimonhi (02 Oct 2020 - 12:26)
Pages :
Sujet clos
Aller à