1 pièce(s) jointe(s)
Supprimer l'image de preloader
Bonjour,
je suis en train de faire un site et m'inspire sur un site déjà existant qui a été fait avec WordPress.
Sur ma page d'acceuil, j'ai une animation de preloading dont le code est le suivant
Code:
1
2
3
4
5
6
7
8
| <body class="home page page-id-269 page-template-default header-layout-boxed content-layout-fullwidth footer-layout-boxed blog-default position-fullwidth sidebar-1-4 tm_pb_builder">
<div class="page-preloader-cover">
<div class="page-preloader">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div> |
avec les classes css suivantes
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
| .page-preloader-cover {
position:fixed;
z-index:999;
top:0;
left:0;
display:block;
width:100%;
height:100%;
background:url(/wp-content//images/logo-inger-190x180.png) no-repeat;
background-position:50% 20%
}
.page-preloader-cover {
background-color:#fff
}
.page-preloader {
position:relative;
top:60%;
left:50%;
margin-top:-9px;
margin-left:-45px;
width:100px;
text-align:center
}
.page-preloader>div {
width:18px;
height:18px;
display:inline-block;
-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;
animation:sk-bouncedelay 1.4s infinite ease-in-out both
}
.page-preloader .bounce1 {
-webkit-animation-delay:-0.32s;
animation-delay:-0.32s
}
.page-preloader .bounce2 {
-webkit-animation-delay:-0.16s;
animation-delay:-0.16s
}
.page-preloader div {
background-color:#c642a4
}
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform:scale(0)
}
40% {
-webkit-transform:scale(1)
}
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform:scale(0);
transform:scale(0)
}
40% {
-webkit-transform:scale(1);
transform:scale(1)
}
} |
Voici un print screen de l'animation
Pièce jointe 251878
Cette animation consiste en 3 carre de couleur rose juxtaposés qui chacun à leur tour passe d'une taille nulle à une autre taille. Le but est que cette animation apparaisse avant que toute la page se charge, puis l'animation disparait
J'ai copié le code source du site dans Dreamweaver et à partir de ce code source j'essaye d'afficher la page sur mon Browser, seulement l'animation tourne en boucle.
Je suppose que c'est du code javascript qui cache cette animation au chargement de la page, un code du style suivant (en jquery)
Code:
1
2
3
4
| $('.page-id-269').on('load', function(){
// hide/remove the loading image
$('.page-preloader-cover').hide();
}); |
est-ce à votre avis le cas et si c'est le cas, je ne trouve nul part des inclusion de code javascript. Je ne vois pas où est le javascript et/ou les inclusions de bibliothèques de frameworks javascript. Peut être une mécanique interne de WordPress... Merci d'avance pour vos réponses
