Discussion :

[el_debutanti]

Bonjour,
Je reprends un site que j'ai commencé à concevoir il y a 6 ans, désolé donc pour mes questions car entre temps, j'ai oublié le code et je n'y connais rien en javascript.
J'ai un titre qui part de droite à gauche, et ce sur 3 images en mode cover (merci JReaux).
le html est le suivant :

Code html :

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
23
24
25
26
<div id="bgfadewrap">
 
  <div id="bgfade1">
    <div>
      <h1>LIFE<br>
IS<br>
GREAT</h1>
      <div><p>Aenean pharetraam <a href="section01">Section 01</a> tuntesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p></div>
    </div>
  </div>
  <div id="bgfade2">
    <div>
      <h1>LIFE<br>
IS<br>
GREAT</h1>
      <div><p>Aenean pharetraam <a href="section01">Section 01</a> tuntesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p></div>
    </div>
  </div>
  <div id="bgfade3">
    <div>
      <h1>ENJOY & SMILE</h1>
    <div>  <p>Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae sunt, non sunt tamen ab earum spe causae diligendi profectae.</p>
    </div>            </div>
</div>
 
</div>

Les CSS sont :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
#bgfadewrap {
	position: fixed;
	text-align: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0px;
 
}
#bgfadewrap > div {
	position: fixed;
	background-size: cover;
	display: none;
	background-position: center center;
	background-repeat: no-repeat;
}
#bgfadewrap, #bgfadewrap > div {
	z-index: -1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: fixed;
	margin: 0px;
}
 
#bgfade1 {
	background-image: url(img/IMG_0945.JPG);
	position: fixed;
}
 
#bgfade2 {
  background-image:url(imgs/B.jpg);
  	position: fixed;
 
}
#bgfade3 {
  background-image:url(imgs/IMG_6129b.jpg);
  	position: fixed;
 
}
 
 
/* bloc de texte qui SLIDE */
#bgfadewrap > div > div {
	position: fixed;
	padding: 0;
	/* [disabled]top: 270px; */
	width: 100%;
	bottom: 0px;
}
#bgfadewrap > div > div h1 {
	text-align: right;
	color: #FFFFFF;
	opacity: 0.3;
	text-decoration: none;
	text-shadow: 1px 1px #000000;
	font: 12vw/9vw Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	/* [disabled]margin-bottom: 5%; */
	/* [disabled]margin-left: 20%; */
	/* [disabled]margin-right: 20%; */
	/* [disabled]margin-top: 2%; */
	bottom: 0px;
	right: 0px;
	position: absolute;
}
#bgfadewrap > div > div p { 
  text-align:center; font-size:140%; color:rgba(0,0,0,0.8); 
  margin:0 20%;
}
#bgfadewrap > div > div a {
	text-align: center;
	font-size: 140%;
	color: rgba(204,102,153,0.8);
	margin: 0 20%;

Et le JS :

Code JavaScript :

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
23
24
		<script>
			new cbpScroller( document.getElementById( 'cbp-so-scroller' ) );
 
  var bgfade = '#bgfadewrap'; // variable globale
function background_init(){
  $(bgfade).css({'height':$(window).height()+'px','width':$(window).width()+'px'});
}
function background_anim(){
  var bg_H = $(bgfade).height();
    $(bgfade+' > div > div > div').css({'opacity':'0'}, 1600).animate({'opacity':'0'}, 1600);
    $(bgfade+' > div').first().appendTo(bgfade).fadeOut(1000);
    $(bgfade+' > div').first().fadeIn(1000);
	    $(bgfade+' > div > div > div').first().css({'opacity':'1'}, 1600).animate({'opacity':'1'}, 1600);
 
    setTimeout(background_anim, 6000); // 6 secondes
}
$(window).on('load', function(){
  $(bgfade+' > div').hide();
  background_init();
  background_anim();
});
$(window).on('resize', function(){
  background_init();
});

Voici ma question, je souhaiterais que le premier titre soit ferré à droite text-align: left;,
que le second titre soit ferré à gauche text-align: right; et le troisième titre encore en text-align: left.
Les titres sont donc volontairement immobiles. ça doit être tout bête d'avoir une opacité de 0 pour chaque titre lors de son apparition, mais je n'y arrive pas. Comme je suis tordu, comment changer aussi (si cela est possible) la couleur et la hauteur de chaque titres ?
Si quelqu'un peut m'expliquer toutes les valeurs...
Merci beaucoup et bonne journée,
El

[jessyPop]

Bonjour,

Voici ma question, je souhaiterais que le premier titre soit ferré à droite text-align: left;,
que le second titre soit ferré à gauche text-align: right; et le troisième titre encore en text-align: left.

déjà en lecture rapide, sauf erreur de ma part, pour ferrer du texte à gauche c'est text-align=left, à droite c'est text-align=right.

Ensuite, ton CSS cible la div parent générale du slide, pour changer l'alignement d'un titre à l'autre il faudrait ajouter des règles dans le CSS. c'est aussi dans ces règle là que tu peux définir une opacité de départ, une couleur spécifique, etc.

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
 
#bgfade1 div h1 {
	text-align: right;
        color: black;
        opacity:0.5;
}
#bgfade2 div h1 {
	text-align: left;
        color: red;
        opacity:0.3;
}
#bgfade3 div h1 {
	text-align: right;
        color: blue;
        opacity:1;
}

Il faut voir si ces changements suffisent pour avoir ce que tu souhaites ou s'il faut plus. Je n'ai pas du tout tester le code, soit je fais banco directement soit il faut modifier un peu. il sera peut être nécessaire de supprimer le text-align:right et opacity: 0.3; dans la règle css suivante :

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
#bgfadewrap > div > div h1 {
	text-align: right;
	color: #FFFFFF;
	opacity: 0.3;
	text-decoration: none;
	text-shadow: 1px 1px #000000;
	font: 12vw/9vw Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	/* [disabled]margin-bottom: 5%; */
	/* [disabled]margin-left: 20%; */
	/* [disabled]margin-right: 20%; */
	/* [disabled]margin-top: 2%; */
	bottom: 0px;
	right: 0px;
	position: absolute;
}

Pour la hauteur des titres, cela se passe dans cette ligne font: 12vw/9vw Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
12vw/9vw il s'agit de la font-size en viewport width.