28106 sujets

CSS et mise en forme, CSS3

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
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)
Meilleure solution
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.