Création d'une animation HTML

Version imprimable

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:

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:

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 :)

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:

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>

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:

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:

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:

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:

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

Le code complet pour test

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
<!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>

11/04/2013, 11h13
aztix

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 :)
11/04/2013, 12h00
aztix

RESOLU!

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 ! :)
18/04/2013, 01h29
aztix

et en Java? :p

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 :)
18/04/2013, 09h39
rodolphebrd

Du coup vous semblez vous dirigez vers quelque chose qui ressemble à un slideshow.
Il y en a en javascript et en css.

mon test

Re !

Je viens de faire un test, qui avidement ne fonctionne pas... lol
Et là pour le coup je ne comprends pas pourquoi !!!
Quelqu'un sait pourquoi ça ne fonctionne pas ?

Voila mon HTML :

Code:

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

Voila ma css :

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

Et voila ma petite fonction JavaScript :

Code:

1
2
3
4
5
6
7
function mouse_over()
{
    document.getElementById(1).style.opacity = "1"
    document.getElementById(2).style.opacity = "1"
    document.getElementById(3).style.opacity = "1"
    document.getElementById(4).style.opacity = "1"
}

oupss!

Oups je me suis trompé dans le copier/coller de mon code HTML,
J'appel bien la fonction mouse_over() et non anim.. ca donne ca :

Code:

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

18/04/2013, 19h05
NoSmoking

Si tu penches pour une solution javascript, il serait préférable que tu postes sur le forum javascript.

En CSS3, en utilisant l'approche indiquée un peu plus haut tu devrais y arriver en faisant ta transition sur l'opacity.