Jouer avec un titre(déplacement dans le div.) avec CSS et JS
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:
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:
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:
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
