Déplacer simplement une image [Résolu/Fermé]

Signaler
Messages postés
260
Date d'inscription
jeudi 22 novembre 2007
Statut
Membre
Dernière intervention
20 août 2016
-
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
-
Bonjour,

Je cherche à faire défilé une image lentement et horizontalement et de facon infini.
Je sais que avec Jquery c'est fesable, mais comme je suis hyper nul en JS, j'ai cherché partout des scripts que j'aurai pu adapter, mais impossible.

Je trouve des scripts super pour des diapos infini ....
Mais le détail important que je recherche, me semble inexisté.
Je ne veux pas que mon image s'arrête genre 2sec puis repars, je voudrai que elle défile sans jamais s'arrêter.

Pour ceux qui connaisse, en sort je cherche la même chose que la balise "marquee" en html, mais en JS car "marquee" saccade le défilement.

Je remercie d'avance les personnes qui prendront le temps pour m'aider.

3 réponses

Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
430
Hello,

Voici un bout de code qui devrait t'aider.

<html>
	<head>
		<title></title>
		<style type="text/css">
			body{
				text-align: center;
			}
			.container{
				width: 1000px;
				height: 300px;
				margin:0 auto;
				background: #a90329; /* Old browsers */
				background: -moz-linear-gradient(top,  #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
				background: -ms-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
				background: linear-gradient(to bottom,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */

				overflow: hidden;
				position: relative;
			}
			img{
				position: absolute;
				right: -200px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<img id="picture" src="http://lorempixel.com/200/300" />
		</div>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			var marqeeJs = {
				animate: function(){
					var me = this;
					$('#picture').animate({
						right: 1000
					}, 5000, function(){
						$('#picture').css('right', '-200px');
						me.animate();
					});
				},
				_initialize: function(){
					this.animate();
				}
			}
			marqeeJs._initialize();
		</script>
	</body>
</html>
Messages postés
260
Date d'inscription
jeudi 22 novembre 2007
Statut
Membre
Dernière intervention
20 août 2016
11
Merci beaucoup !
Mais le problème est le même que ceux que je rencontré avec les scripts que j'avais déjà trouvé.
Sur ce script, l'image s'arrête aussi.

Je vais explique ce que je souhaite faire, ca sera peut être plus explicite.

En faire je voudrais faire défiler doucement des nuages (avec un image transparente png) en "z-index: 3; position: absolute;" dans mon header.
Pour ça, mon image doit se répété horizontalement et défilé lentement.
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
430
Re !

Voici un script qui devrait résoudre ton problème:

Il suffit juste te modifier le src du div #picture avec l'url de ton image, et le reste se fait tout seul.

<html>
	<head>
		<title></title>
		<style type="text/css">
			body{
				text-align: center;
			}
			.pictures{
				position: absolute;
				left:0;
				width: 9999px;
			}
			.container{
				width: 1000px;
				height: 300px;
				margin:0 auto;
				overflow: hidden;
				position: relative;
			}
			img{
				position: relative;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="pictures">
				<img id="picture" src="http://1-background.com/images/clouds/white-clouds-blue-sky-seamless-background-tile.jpg" />
			</div>
		</div>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			var marqeeJs = {
				cWidth:0,
				iWidth: 0,
				nbPicture:0,
				imgElements: new Array(),
				animate: function(){
					var me = this;
					$('.pictures img:first').animate({
						'margin-left': -me.iWidth
					}, 7000,'linear', function(){
						//$('#picture').css('right', '-200px');
						$(this).remove();
						$('.pictures').append($(me.img).clone());
						me.animate();
					});
				},
				postInit: function(){
					this.cWidth = $('.container').width();
					this.iWidth = this.img.width;
					this.nbPictures = Math.ceil(this.cWidth / this.iWidth + 1);
					var $img = $(this.img);
					for(var i = 0; i < this.nbPictures; i++){
						//$img.css('left', i*this.iWidth);
						$('.pictures').append($img.clone());
					}
					this.animate();
				},
				_initialize: function(){
					var me = this;
					//this.animate();
					this.img = new Image();
					this.img.onload = function() {
						me.img = this;
						$('#picture').remove();
						me.postInit();
					}
					this.img.src = $('#picture').attr('src');
				}
			}
			marqeeJs._initialize();
		});
		</script>
	</body>
</html>
Messages postés
260
Date d'inscription
jeudi 22 novembre 2007
Statut
Membre
Dernière intervention
20 août 2016
11
C'est super, MERCI !
c'est exactement ce que je voulais.

Depuis le temps que je galère dessus 1000 merci.
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
430
De rien ! :)