danielhagnoul

Comment faire du fading sur une background-image ?

Noter ce billet

par

, 10/03/2018 à 21h46 (1199 Affichages)

Suite à cette question, je me suis colleté avec le problème et cela me paraissait impossible au premier (CSS2) et au deuxième (CSS3) abord. Mais j'ai découvert que j'avais tord, car il suffit d'utiliser une transition-timing-function, pour le fading : transition: background-image 1s ease-in 0.5s; et transition: background-image 1s ease-out 0.5s;.

Exemple :

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
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
	<title>Test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* CSS du test */
                
                #indeximg {
                        background-image: url("../images/boule1.png");
                        background-repeat: no-repeat;
                        background-position: center;
                        height: 20rem;
                        width: 20rem;
                        border: 1pt dotted grey;
                        transition: background-image 1s ease-in 0.5s; 
                }
                #indeximg.fadeOut {
                        transition: background-image 1s ease-out 0.5s; 
                }
                #btnStopBackgroundImage {
                        margin: 2rem;
                }
                
                /* Fin CSS du test */
 
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/locale/fr.js"></script>
	<script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.5.1.js"></script>
	<script>
    'use strict';
                
                document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
                        // code du test
                        
                        
                        // fin code du test
                        
                }, false );
    
    window.addEventListener( "load", ev => { 
                        // le DOM est construit et la page web est visible
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
                        
                        let
                                index = 0;
                                
                        const
                                elemIndexImg = document.querySelector( "#indeximg" ),
                                elemBtnStopBackgroundImage = document.querySelector( "#btnStopBackgroundImage" ),
                                arBoules = [
                                        "http://danielhagnoul.developpez.com/images/boule2.png",
                                        "http://danielhagnoul.developpez.com/images/boule3.png",
                                        "http://danielhagnoul.developpez.com/images/boule4.png",
                                        "http://danielhagnoul.developpez.com/images/boule5.png",
                                        "http://danielhagnoul.developpez.com/images/boule6.png",
                                        "http://danielhagnoul.developpez.com/images/boule7.png",
                                        "http://danielhagnoul.developpez.com/images/boule1.png",
                                ],
                                indexLength = arBoules.length - 1,
                                setIntervalID = setInterval( () => {
                                        
                                        elemIndexImg.classList.add( "fadeOut" );
                                        
                                        setTimeout(function() {
                                                elemIndexImg.style.backgroundImage = "url('" + arBoules[ index++ ] + "')";
                                                elemIndexImg.classList.remove( "fadeOut" );
                                        }, 1000 ); // 1s pour le fadeout
                                        
                                        if ( index > indexLength ){
                                                                        index = 0;
                                        };
                                }, 4000 ); // 1s fadeout + 1s fadein + 2s visible
                        
                        elemBtnStopBackgroundImage.addEventListener( "click", ev => {
                                window.clearInterval( setIntervalID );
                        }, false );
                                                                
                        // fin code du test
                        
      kIDUnique();
    }, false );                 
  </script>
</head>
<body>
	<main>
 
		<div id="indeximg">
			<p>Haec subinde Constantius audiens et quaedam referente Thalassio doctus, quem eum odisse iam conpererat
			lege communi, scribens ad Caesarem blandius adiumenta paulatim illi subtraxit, sollicitari se simulans ne,
			uti est militare otium fere tumultuosum, contentum palatinis et protectorum cum Scutariis et Gentilibus,
			et mandabat Domitiano, ex comite largitionum, praefecto ut cum in Syriam venerit.</p>
			<p>Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter
			egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma </p>
		</div>
		<button id="btnStopBackgroundImage">Arrêt du défilement des images</button>
 
	</main>
</body>
</html>