Bonsoir,
Pour un projet scolaire je cherche à faire un fondu sur mes images de fond comme sur le site : https://www.wwoof.fr/
Mais j'ai testé pleins de solutions et je n'ai pas réussi. Je vous laisse mon code et reste disponible pour de plus amples informations.
HTML:
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 <!DOCTYPE html> <html> <head> <title> Citie's U </title> <link type="text/css" rel="stylesheet" href="style.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body id="image"> <div class="exclure"> <h1 id="titreprincipal">CITIE'S U</h1> <a id="bouton1" href="#">Découvrir les meilleures villes étudiantes</a> <img id="logotwitter" src="twitter.png" alt="logo-twitter"/> </div> </body> <script type="text/javascript" src="code.js"> </script> </html>
CSS:
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
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 body { background-image: url(lyon.jpg); background-size: cover; } #imagee{ width: : 120px; top: 0; left: 0; top: 0; position: relative; z-index: 1; } body{ margin: 0 0 0 0; padding: 0 0 0 0; overflow: hidden; } #titreprincipal{ color: white; z-index: 100; position: absolute; font-size: 70px; top: 35%; left: 35%; font-family: "Arial",sans-serif; } #bouton1{ position: absolute; z-index: 100; color: white; top: 54%; left: 32%; border: 2px solid white; padding: 5px; text-decoration: none; font-size: 25px; } #bouton1:hover { background-color: #caabab; } #logotwitter{ z-index: 100; position: absolute; left: 37%; top: 70%; height: 50px; width: 50px; }
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
25
26
27
28
29 $(document).ready(function () { initEvents(); var tab=new Array(10) var i=1; var j=0; for (i=0; i<=tab.length-1; i++){ tab[i]="ville"+(i+1)+".jpg"; } console.log(tab); function initEvents () { $("#bouton1").click(function(){ console.log("ok") if(j<=10){ j=j+1; $('#image').fadeTo('slow', 0.3, function() { console.log(j); $("#image").css('background','url(/Users/Gilles/Desktop/1/ville'+ [j] + '.jpg)'); }).delay(1000).fadeTo('slow', 1); } }) } });
Merci de votre aide ! Bonne soirée
Partager