[Résolu] Background qui défile

MickFR

1 Oct 2018 à 17:23

Bonjour,

Je me permets de vous contacter car je rencontre une difficulté.

J'essaie de faire défiler le background (image) de mon site en continu.

Le rendu actuel : l'image défile. Elle s'accélère puis ralentit. A la fin du défilement, l'image reprend sa place d'origine en produisant un effet désagréable.

CodePen.

Auriez-vous une piste à me donner afin que l'image défile de façon fluide, en continu ?

Merci de votre aide Smiley smile

bazooka07

1 Oct 2018 à 20:07

Commence par faire un reset sur <body> pour margin et padding.
Remplacer 1920px par la largeur du viewport, soit 100vw
Définir le type d'interpolation comme linear, sinon par défaut cela doit être ease. voir lien ci-dessous :
https://developer.mozilla.org/fr/docs/Web/CSS/animation-timing-function
Avec le code suivant, j'obtiens un effet sympa :

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<style>
		@keyframes defile {
			  0% { background-position-x:   0; }
			100% { background-position-x: 100vw; }
		}
		body, .bkg { margin: 0; padding: 0;  }
		.bkg {
			height: 100vh;
			background: url('http://urlz.fr/7Sga');
			-webkit-background-size: cover;
			background-size: cover;
			background-color: #fbff25;
			animation: defile 20s linear infinite;
	}	
	</style>
</head><body>
<div class="bkg">
</div>
</body></html>

il faudra certainement rajouter un container div pour .bkg
Modifié par bazooka07 (01 Oct 2018 - 20:07)

MickFR

2 Oct 2018 à 10:47

Merci de ta réponse Smiley smile

Le résultat est celui que je souhaitais obtenir.

Je vais me pencher sur la propriété animation-timing-function.

CSS et mise en forme, CSS3

[Résolu] Background qui défile