Faire apparaître l'animation texte dans une image.

**leriptide** · 05/05/2019, 19h22

Bonjour je suis débutant dans le javascript, et je n'arrive pas à régler un souci; je n'arrive pas à faire apparaître l'animation texte dans une image qui s'affiche en dessous du texte. Pourriez vous me donner un coup de main svp?
Merci à vous.

Voici mon code:

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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
 
<center><html><head>
 
    <h1 class="ml5">
    <div class="text-wrapper" id="contener" style= "center">
    <div id ="image"src="C:\Users\jlrat\Pictures\Saved Pictures\decoration-ardoise.jpg"></div><br><p> 
    <div id ="texte"class="letters letters-left"style="color:limegreen">Les trésors</div><br><p>
    <div id ="texte"class="letters letters-center"style="color:white">de la cuisine</div><br><p>
    <div id ="texte"class="letters letters-right"style="color:#FF0000">Italienne</div><br><p><br>   
    <div class="boite"><a href="file:///C:/Users/jlrat/Documents/TOWeb%20Sites/defaultV7/Preview/choisissez-votre-rayon.html" target="_self" class="monBoutton" style="border-radius:15px">Découvrez nos Recettes ▶</a></div>
    </div>
    </h1>
    </head>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
 
</html></center>
<style>
 
.ml5 {
  position: relative;
  font-weight: 300;
  font-size: 4.5em;
  color: #402d2d;
}
 
.ml5 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.15em;
  line-height: 1em;
}
 
.ml5 .image1 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: center;
  height: 600px;
  width: 500px;
  transform-origin: 0.5 0;
  top: 61%; left: 50%; /* à 50%/50% du parent référent */
  transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
  
}
 
  transform-origin: 0.5 0;
}
 
.ml5 .ampersand {
  font-family: gloria hallelujah;
  font-style: gloria hallelujah;
  font-weight: 400;
  width: 1em;
  margin-right: -0.1em;
  margin-left: -0.1em;
}
 
.ml5 .letters {
  display: inline-block;
  opacity: 0;
}
.monBoutton {
    background-color: #00A524;
    Color:#FFFFFF;
    font-weight: bold;
    padding: 10px 40px;
    border-radius: 0px;
    cursor: pointer; 
    text-decoration: none;
    transition: background-color 0s;
    outline: none; 
    
  }
 
  .monBoutton:hover {
    background-color: #FF0000;
   color:#FFFFFF;
   outline: none; 
   
  }
  }  
  .h1 {  
  color:white;  
  }
  
 
</style>
<script>
 
anime.timeline({loop: true})
  
   .add({
    targets: '.ml5 .image1',
    opacity: [0.5,1],
    scaleX: [0, 1],
    easing: "easeInOutExpo",
    duration: 2000
  }).add({
    targets: '.ml5 .line',
    duration:950,
    easing: "easeOutExpo",
    translateY: function(e, i, l) {
      var offset = -0.625 + 0.625*2*i;
      return offset + "em";
    }
  }).add({
    targets: '.ml5 .ampersand',
    opacity: [0,1],
    scaleY: [0.5, 1],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=300'
  }).add({
    targets: '.ml5 .letters-left',
    opacity: [0,1],
    translateX: ["0.5em", 0],
    easing: "easeOutExpo",
    duration: 1200,
    offset: '-=300'
  }).add({
    targets: '.ml5 .letters-center',
    opacity: [0,1],
    translateX: ["0.5em", 0],
    easing: "easeOutExpo",
    duration: 1200,
    offset: '-=300'
}).add({
    targets: '.ml5 .letters-right',
    opacity: [0,1],
    translateX: ["-0.5em", 0],
    easing: "easeOutExpo",
    duration: 1200,
    offset: '-=400'
  }).add({
    targets: '.ml5 .boite',
    opacity: [0,1],
    translateX: ["-0.5em", 0],
    easing: "easeOutExpo",
    duration: 300,
    offset: '-=500'
  }).add({
    targets: '.ml5',
    opacity: 0,
    duration: 12000,
    easing: "easeOutExpo",
    delay: 12000000000
  });
 
 </script>

**Showie** · 06/05/2019, 14h39

Salut,

Ton code html est moche.

La balise center est obsolète.
Ta balise head contient des block H1 et DIV
Ta balise H1 contient des div
Tes DIV ont des ID identiques
Il manque des espace entre les attributs.
en css margin: center n 'existe pas
transform-origin: attend des valeurs avec des unités
l attribut SRC n existe pas sur une div
tu as des accolades fermantes dans ton bloc de style
ETC...

en gros voici une version plus correcte de ton code

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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
 <head>
 <title>page</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
	<style>
                .ml5 {
                  position: relative;
                  font-weight: 300;
                  font-size: 4.5em;
                  color: #402d2d;
                }
 
                .ml5 .text-wrapper {
                  position: relative;
                  display: inline-block;
                  padding-top: 0.1em;
                  padding-right: 0.05em;
                  padding-bottom: 0.15em;
                  line-height: 1em;
                }
 
                .ml5 .image1 {
                  position: absolute;
                  left: 0;
                  top: 0;
                  bottom: 0;
                  margin: auto;
                  height: 600px;
                  width: 500px;
                  transform-origin: 0.5px 0px;
                  top: 61%; 
                  left: 50%; /* à 50%/50% du parent référent */
                  transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
                }
 
                .ml5 .ampersand {
                  font-family: "Gloria Hallelujah script=all rev=2";
                  font-style: normal;
                  font-weight: 400;
                  width: 1em;
                  margin-right: -0.1em;
                  margin-left: -0.1em;
                }
 
                .ml5 .letters {
                  display: inline-block;
                  opacity: 0;
                }
                
                .monBoutton {
                        background-color: #00A524;
                        Color:#FFFFFF;
                        font-weight: bold;
                        padding: 10px 40px;
                        border-radius: 0px;
                        cursor: pointer; 
                        text-decoration: none;
                        transition: background-color 0s;
                        outline: none; 
                }
                 
                .monBoutton:hover {
                        background-color: #FF0000;
                        color:#FFFFFF;
                        outline: none; 
                }
    
                .h1 {  
                        color:white;  
                }
  
        </style>
	<script>
 
                anime.timeline({loop: true}) 
                        .add({
                                targets: '.ml5 .image1',
                                opacity: [0.5,1],
                                scaleX: [0, 1],
                                easing: "easeInOutExpo",
                                duration: 2000
                        }).add({
                                targets: '.ml5 .line',
                                duration:950,
                                easing: "easeOutExpo",
                                translateY: function(e, i, l) {
                                  var offset = -0.625 + 0.625*2*i;
                                  return offset + "em";
                                }
                        }).add({
                                targets: '.ml5 .ampersand',
                                opacity: [0,1],
                                scaleY: [0.5, 1],
                                easing: "easeOutExpo",
                                duration: 600,
                                offset: '-=300'
                        }).add({
                                targets: '.ml5 .letters-left',
                                opacity: [0,1],
                                translateX: ["0.5em", 0],
                                easing: "easeOutExpo",
                                duration: 1200,
                                offset: '-=300'
                        }).add({
                                targets: '.ml5 .letters-center',
                                opacity: [0,1],
                                translateX: ["0.5em", 0],
                                easing: "easeOutExpo",
                                duration: 1200,
                                offset: '-=300'
                        }).add({
                                targets: '.ml5 .letters-right',
                                opacity: [0,1],
                                translateX: ["-0.5em", 0],
                                easing: "easeOutExpo",
                                duration: 1200,
                                offset: '-=400'
                        }).add({
                                targets: '.ml5 .boite',
                                opacity: [0,1],
                                translateX: ["-0.5em", 0],
                                easing: "easeOutExpo",
                                duration: 300,
                                offset: '-=500'
                        }).add({
                                targets: '.ml5',
                                opacity: 0,
                                duration: 12000,
                                easing: "easeOutExpo",
                                delay: 12000000000
                        });
 
                </script>
	</head>
	<body>
		<div class="ml5">
			<div class="text-wrapper" id="contener" style="text-align:center;">
			<div id="image" style="background-image:url('C:\Users\jlrat\Pictures\Saved Pictures\decoration-ardoise.jpg');"></div><br><p> 
			<div id="texte1" class="letters letters-left" style="color:limegreen">Les trésors</div><br><p>
			<div id="texte2" class="letters letters-center" style="color:white">de la cuisine</div><br><p>
			<div id="texte3" class="letters letters-right" style="color:#FF0000">Italienne</div><br><p><br>   
			<div class="boite"><a href="file:///C:/Users/jlrat/Documents/TOWeb%20Sites/defaultV7/Preview/choisissez-votre-rayon.html" target="_self" class="monBoutton" style="border-radius:15px">Découvrez nos Recettes ▶</a></div>
			</div>
		</div>
 </body>
</html>

avant de pouvoir t aider il faut que tu corrige ces points car ils peuvent
etre bloquant pour ton animation

Faire apparaître l'animation texte dans une image.

JavaScript

Vue hybride

Discussions similaires

Partager

Partager