28111 sujets

CSS et mise en forme, CSS3

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

Pages :
Modérateur
Bonjour,

C'est une vidéo (ou plutôt un ensemble de vidéos). Ce n'est pas un script qui fait les effets. Après il y a peut-être des scripts qui déclenchent les vidéos, mais c'est anecdotique.

Amicalement,
Merci pour ta réponse.
A mon avis il y a aussi des images, comme par exemple lorsque on vois les optique de l’APN.

Mais moi je cherche le script, qui fait déclencher soit la vidéo, soit l’enchaînement de photo avec la lecture de la page vers le bas ou vers le haut d’ailleurs.
Modérateur
Bonjour,

Le "script" dépend complètement de ce que tu veux faire.

Petit exemple simple :
1) tu vas à https://www.apple.com/105/media/us/iphone-11/2019/dc09a167-9d96-4ea8-935e-14af260ac4b1/anim/hero/small_2x.mp4 et tu enregistres la vidéo sur ton ordinateur (on va supposer pour la suite que tu lui donnes le nom "apple.mp4").
2) tu fais une page html avec le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video
{
	max-height:25vh;
	max-width:25vw;
	margin:0 auto;
	transition:all 3s linear;
}
video:hover
{
	max-width:50vw;
	max-height:50vh;
	transition:all 3s linear;
}
</style>
</head>
<body>

<h1>Vidéo déclenchée au survol de la souris</h1>
<video src="apple.mp4" onmouseover="this.play()" muted>
</video>
</body>
</html>

Il ne te reste plus qu'à afficher cette page dans un navigateur et passer la souris sur la video.

Ce n'est qu'un exemple évidemment. Tout est possible.

Amicalement,

PS: l'attribut "muted" était dans le code html d'apple. Je l'ai laissé car si je le retire, la vidéo ne démarre pas avec chrome sur max OS (et je n'ai pas encore trouvé pourquoi).
Modifié par parsimonhi (01 Oct 2020 - 14:10)
Modérateur
Bonjour,

En ce qui concerne l'attribut "muted", et après une petite enquête, si on le supprime, il faut que l'utilisateur clique au moins une fois dans la fenêtre où se trouve la vidéo pour que le code "this.play()" s'exécute (et on le déclenche dans l'exemple que j'ai donné par un hover sur la video). Il y a peut-être d'autres actions de l'utilisateur qui pourraient avoir le même résultat. Mais ce qui compte, c'est que l'utilisateur doit faire quelque chose, et un simple hover sur une vidéo semble ne pas être une action suffisante.

Il s'agirait d'une mesure anti-pub de Chrome, et sans doute d'autres navigateurs ont ou vont avoir le même comportement. Donc bon, vaut mieux prévoir des vidéos silencieuses si on veut les déclencher par un hover.

Ça m'avait échappé jusqu'à présent.

Amicalement,
Merci pour ta réactivité mais ça n’est pas ça que je cherche.

Je me suis peux être mal exprimé. Je ne veux pas un déclenchement au survol de la souris. Je le veux à la descente ou la montée de la page.
Modérateur
Bonjour,

Par exemple ça ?
<!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
{
	max-height:100vh;
	display:block;
	margin:0 auto;
}
</style>
</head>
<body onscroll="document.getElementById('toto').play()">

<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 (01 Oct 2020 - 17:23)
Modérateur
Bonjour,

Voici une version qui fait à peu près comme la première vidéo d'apple (j'étais en train de travailler en prévision de ta question Smiley lol Smiley lol Smiley lol ).

A essayer avec la video de l'iphone que j'ai indiqué dans mes premières réponses.

On commence par une video large et immobile. Aux premiers scrolls, on annule leurs effets et on se contente de diminuer la largeur de la vidéo.

Une fois que la taille a assez diminuée (j'ai mis 50% de la largeur de l'écran pour l'instant), la vidéo se déclenche.

La vidéo dure 3 secondes (3000 millisecondes). Durant ces 3 secondes, on attend sans rien faire et on continue d'annuler les effets des scrolls.

Une fois les 3 secondes écoulées, on autorise le scroll, et la vidéo ne redémarre pas si on remonte en haut de page.
<!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:100vw;
	display:block;
	margin:0 auto;
}
</style>
<script>
var progression=0,mh=100,t1,t2=3000;
scroll(0,0);
function magic()
{
	if(!progression)
	{
		scroll(0,0);
		mh--;
		document.getElementById('toto').style.width=mh+"vw";
		if(mh<50)
		{
			progression=1;
			document.getElementById('toto').play();
			t1=new Date().getTime();
		}
	}
	if(progression==1)
	{
		scroll(0,0);
		if(new Date().getTime()>(t1+t2)) progression=2;
	}
}
</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,
Pas mal mais par contre ça bug un peu, genre sursaut et tu ne peux pas slider vers le bas tant que la vidéo n'est pas finie.

Le premier code était mieux
Modérateur
Bonjour,

Pour le début du scroll vers le bas, tu diminues la valeur de t2. J'ai mis 3000 (c'est à dire 3 secondes), mais tu peux mettre 0 si tu veux.

Et selon la taille de ta video, il est aussi possible qu'il faille changer la width de la video dans le css, la valeur de mh de départ (égal à la width de la video dans le css), et la valeur d'arrivée de mh (50 pour l'instant, mais ça peut être n'importe quoi d'autre). Peut-être aussi que tu auras besoin de remplacer l'unité de width : j'ai mis des "vw", mais ça peut être des px, des em, etc.

Pour le sursaut, je regarde si je peux améliorer, mais il est possible que ça disparaisse si ta page a beaucoup de contenu.

Amicalement,
Modifié par parsimonhi (01 Oct 2020 - 18:54)
En changeant le t2 à 0 c'est bien mieux pour le slide.
Pas d’amélioration pour le sursaut par contre.

En tout cas merci pour ton aide.
Depuis le temps que je cherche.....
Modérateur
Bonjour,

Une version que ne tressaille pas. J'ai changé quelques autres trucs secondaires (j'ai mis des vmin au lieu des vh pour la taille de la video). A adapter de toute façon.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
	min-height:200vh;
}
main
{
	position:fixed;
	font-size:3em;
}
video
{
	width:100vmin;
	display:block;
	margin:0 auto;
}
p
{
	width:50%;
	margin:1em auto;
}
</style>
<script>
var progression=0,mh1=100,mh2=50,t1,t2=0;
scroll(0,0);
function magic()
{
	if(!progression)
	{
		scroll(0,0);
		mh1--;
		document.getElementById('toto').style.width=mh1+"vmin";
		if(mh1<mh2)
		{
			progression=1;
			document.getElementById('toto').play();
			document.querySelector('main').style.position="relative";
			t1=new Date().getTime();
		}
	}
	if(progression==1)
	{
		scroll(0,0);
		if(new Date().getTime()>(t1+t2)) progression=2;
	}
}
</script>
</head>
<body onscroll="magic()">
<main>
<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>
</main>
</body>
</html>


Amicalement,
Bravo beau boulot, j'ai encore quelque bug moi pas mal de tremblement , mais je vais pouvoir avancer je pense. désolé de te solliciter autant.
Je reviendrai vers toi de toute manière.
Modérateur
Bonjour,

Pour le tressaillement (moi, je ne le vois plus), tu peux essayer d'augmenter le min-height du body.

Ensuite, ça dépend aussi de ton contenu. S'il est assez long, il ralentira tout et diminuera un éventuel tressaillement.

Enfin, normalement, le tressaillement ne peut plus se produire au début. Il ne peut se produire que quand on vient juste de finir de réduire la taille de la vidéo. Est-ce bien le cas ?

Amicalement,

PS : si tu mets toujours t2 à 0, tu peux simplifier le script et ne mettre que :

var progression=0,mh1=100,mh2=50;
scroll(0,0);
function magic()
{
	if(!progression)
	{
		scroll(0,0);
		mh1--;
		document.getElementById('toto').style.width=mh1+"vmin";
		if(mh1<mh2)
		{
			progression=1;
			document.getElementById('toto').play();
			document.querySelector('main').style.position="relative";
		}
	}
}

Modifié par parsimonhi (01 Oct 2020 - 19:36)
Modérateur
Bonjour,

C'est quoi ton matériel ?

Avec la version ci-dessous, je n'ai vraiment plus aucun tressaillement et c'est très fluide.

L'important est d'encapsuler le contenu dans une balise qui est en position fixed tant que le scroll est bloqué (j'ai pris la balise main, mais on peut prendre n'importe quoi d'autre).

Si tu as adapté la solution à ta page, fais bien attention au css qu'il y a ci-dessous : presque tout est important.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
	min-height:1000vh;
}
main
{
	position:fixed;
	font-size:3em;
}
video
{
	width:100vmin;
	display:block;
	margin:0 auto;
}
p
{
	width:50%;
	margin:1em auto;
}
</style>
<script>
var progression=0,mh1=100,mh2=50;
scroll(0,0);
function magic()
{
	if(!progression)
	{
		scroll(0,0);
		mh1--;
		document.getElementById('toto').style.width=mh1+"vmin";
		if(mh1<mh2)
		{
			progression=1;
			document.getElementById('toto').play();
			document.querySelector('main').style.position="relative";
		}
	}
}
</script>
</head>
<body onscroll="magic()">
<main>
<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>
</main>
</body>
</html>

Amicalement,
Mon matériel??? un PC.

Peut etre qui faut que le code soit en ligne pour qu'il soit fuide.

j'ai meme un cadre chelou qui apparait une milliseconde.
upload/1601576006-81216-img0029.jpg
Pages :
Sujet clos
Aller à