Discussion :

[Invité]

Bonsoir à tous,

Grâce à l'aide de certains d'entre vous, j'étais parvenu il y a quelques mois à modifier le plugin jQuery Raptorize Kit exactement comme je le souhaitais. Il s'agissait alors de faire venir à l'ouverture de la page une image pour qu'elle s'arrête et reste en place à un endroit défini. Voici le code (CSS et JavaScript) :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#foreground {
	position: fixed;
	right: -250px;
	top: -25px;
	display: block;
	z-index: 2;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<img id="foreground" src="photos/foreground.png">
	<audio id="son" preload="auto">
		<source src="son.mp3">
		<source src="son.ogg">	
	</audio>
 
	<script>
    $(window).load(function(){
        var foreground = $("#foreground");
        if (!$.cookie('executed')) {
            var musique = $("#son").get(0);
 
            musique.load(); // pour Chrome !
            musique.play();
 
            foreground.animate({"right" : "-250px"}, 500);
            $.cookie('executed', true);
        } else {
            foreground.css({"right" : "-250px"});
        }
    });
</script>

Aujourd'hui, j'essaye en vain d'appliquer ce même code à un autre élément de ma page dont le CSS est le suivant :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
.wrapper{
	padding-top: 50px;
	margin:auto;
	background-size: cover;
 
}
.content {
	padding-top: 200px;
	color: red;
	background-image: url(photos/parchemin.png);
	background-repeat: no-repeat;
	background-position: center;
	height: 962px;
}

La class content est définie ainsi dans le .html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<section class="wrapper">
<div class="content">
	<center><h1>ACCUEIL</h1></center></br>
	<h2><u>TITRE 2</u></h2>
	<p></p><br/>
 
	<h3><i>TITRE 3</i></h3>
</div>
</section>

Ci-joint un screenshot du début de site. La partie content correspond au parchemin avec les titres dedans.




Mon problème est que je ne sais pas adapter le Javascript à ce CSS. En effet, cette fois-ci il n'y a ni "right" ni "left", seulement des "auto" et des "padding". Ma question est donc la suivante : comment faire pour que la class "content" arrive de gauche à droite à l'ouverture de la page, et s'arrête au centre de la page avec des margin auto (autrement dit en responsive design, comme elle l'est actuellement) ?
Merci (beaucoup) par avance.