Création d'une animation HTML

**aztix** · 10/04/2013, 14h14

Bonjour tout le monde!

Je suis en train d'intégré une page d'attente pour un client et je me retrouve bloqué!
Voici mon problème :
La page d'attente ne doit contenir que le logo..
Seulement le logo est grand en hauteur, et mon client voudrais découper le logo en plusieur parti, ne garder que la parti basse visible en permanence, puis lorsque l'on passe la souris sur cette parti basse, tout le reste du logo apparaisse progressivement, comme un batiment qui se construit!

Ce que j'ai alors essayer, pour éviter le flash, c'est d'utilisé la propriété CSS3 Opacity ainsi que les propriété transition-duration et transition-delay!

Pour etre plus claire voici mon code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="contenu">
<img class="logo4" src="logo_4.jpg" />
<img class="logo3" src="logo_3.jpg" />
<img class="logo2" src="logo_2.jpg" />
<img class="logo1" src="logo_1.jpg" />
<img class="logo" src="logo.jpg"/>
</div>

et voici ma 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
.contenu {
width:1000px;
margin:0 auto 0 auto;	
}
 
.logo1 {
display:block;
width:207px;
margin:0 auto;	
opacity:0.1;
transition-property: opacity;
transition-duration: 2s;
transition-delay: 1s;
}
 
.logo2 {
display:block;
width:207px;
margin:0 auto;	
opacity:0.1;
transition-property: opacity;
transition-duration: 2s;
transition-delay: 2s;
}
.logo3 {
display:block;
width:207px;
margin:0 auto;	
opacity:0.1;
transition-property: opacity;
transition-duration: 2s;
transition-delay: 3s;
}
.logo4 {
display:block;
width:207px;
margin:0 auto;	
opacity:0.1;
transition-property: opacity;
transition-duration: 2s;
transition-delay: 4s;
}
 
.logo:hover .logo1 .logo2 .logo3 .logo4 {
opacity:1;
}

Cela ne fonctionne pas, j'ai essayer beaucoup de choses, mais en vain!
Quelqu'un aurait-il une solution? même en java!

D'avance merci

**rodolphebrd** · 10/04/2013, 15h15

Bonjour,

Vous ne pouvez en Css tenter d'agir sur un élément pour obtenir un effet sur d'autres.
De plus ".logo:hover .logo1 .logo2 .logo3 .logo4" ne correspond pas à ce que vous faire car cela signifie que vous voulez un survol de logo4 enfant de logo3 enfant de logo2 enfant de logo1. Cela ne correspond pas à votre Html.

Je verrais votre solution de la manière suivante:

Code :

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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
        background: #ccc;       
}
.contenu {
        position:relative;
}
.logo1 {
        display:block;
        width:207px;
        margin:0 auto;  
        opacity:0.1;
}
.logo:hover .logo1 .logo2 .logo3 .logo4 {
        opacity:1;
}
img {
        position:absolute;
}
.mask:hover {
        top:-200px;
}
.mask{
        width: 600px;
        height: 200px;
        position: absolute;
        top: -20px;
        z-index: 2;
        background: #ccc;
        -webkit-transition: top 2s ease;
        -moz-transition: top 2s ease;
        -ms-transition: top 2s ease;
        -o-transition: top 2s ease;
        transition: top 2s ease;
}
</style>
</head>
<body></body>
<div class="contenu">
<div class="mask"></div>
<img src="http://www.developpez.net/template/images/logo.png" width="484" height="200" />
</div>
</body>
</html>

**NoSmoking** · 10/04/2013, 18h14

Bonjour,
j'aurais une approche à peine différente de celle de rodolphebrd.

Je partirais sur une structure de ce type, en incluant l'IMG dans la DIV que l'on manipulera.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<body class="larg">
 <div class="mask larg">
   <img class="larg" src="http://www.developpez.net/template/images/logo.png" alt="developpez.net">
 </div>
</body>

c'est cette DIV que l'on va redimensionner et en même temps déplacer vers le haut. Au départ elle présente le style suivant

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
.mask {
  position:absolute;
  overflow:hidden;
 
  /* les propriétés qui vont bouger */
  border:1px solid #FFF;
  top:200px;
  height:90px;
  padding-top:-110px;
 
  -webkit-transition:all 2s ease;
     -moz-transition:all 2s ease;
      -ms-transition:all 2s ease;
       -o-transition:all 2s ease;
          transition:all 2s ease;
}

pour finir avec celui ci au survol

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.mask:hover {
  border: 1px solid #666;
  top:90px;
  height:200px;
  padding-top:0;
}

en même temps que l'on augmente la height on décrémente son top et son padding, de sorte que l'image donne toujours l'impression d'être au même endroit.

Pour l'IMG, il suffit pour cela de la placer en bas de la DIV.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
img {
  position:absolute;
  bottom:0;
  height:200px;
}

Le code complet pour test

Code :

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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>[CSS3]</title>
<style type="text/css">
body {
  margin:0 auto;
  padding:0;
  position:relative;
  background:#ccc;
  width:100%;
}
img {
  position:absolute;
  bottom:0;
  height:200px;
}
.larg {
  width:484px;
  -moz-box-sizing:border-box;
       box-sizing:border-box;
}
.mask {
  position:absolute;
  overflow:hidden;
  border:1px solid #FFF;
 
  top:200px;
  height:90px;
  padding-top:-110px;
 
  -webkit-transition:all 2s ease;
     -moz-transition:all 2s ease;
      -ms-transition:all 2s ease;
       -o-transition:all 2s ease;
          transition:all 2s ease;
}
.mask:hover {
  top:90px;
  height:200px;
  padding-top:0;
  border: 1px solid #666;
}
</style>
</head>
<body class="larg">
 <div class="mask larg">
   <img class="larg" src="http://www.developpez.net/template/images/logo.png" alt="developpez.net">
 </div>
</body>
</html>

**aztix** · 11/04/2013, 11h13

Au top, j'essaye tout ça de suite et je vous tiens au courant!
en tout cas merci beaucoup pour votre aide, c'est vraiment sympa

**aztix** · 11/04/2013, 12h00

Ca marche nikel! Meeerrccciiii !!!

Après avoir testé vos deux propositions, j'ai opté pour la solution de NoSmoking car plus détaillé, ca m'a permis de mieux comprendre ce que je faisais, mais cela n'enlève rien à la qualité de la réponse de rodolphebrd, qui obtient exactement le même résultat!
Ouff je respire grâce à vous, cela fait 3 jours que je bloquais sur cette intégration!!
Donc encore une fois un GRAND MERCI !

**aztix** · 18/04/2013, 01h29

Re tout le monde

Problème... client relou... :p
Il souhaiterait que chaque images apparaissent les unes après les autre mais en fondu et non de bas en haut.. du coup pensez vous qu'il y a t-il une solution en HTML et CSS ou dois-je forcément passer par du javascript?
Merci tout le monde en tout cas

Création d'une animation HTML

HTML

Vue hybride

Discussions similaires

Partager

Partager