Discussion :

[dutom007]

Bonjour à tous,

je suis en train de réaliser une bannière sur un site Joomla:

http://www.arbreentete.fr/index.php

Je voudrais que l'arbre ainsi que les buildings "poussent".

Pour cela voici le CSS :

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
div.art-Header-png-fond
{
    position: absolute;
    z-index:-4;
    top: 0;
    left: 0;
    width: 932px;
    height: 200px;
    background-image: url('../images/printemps_fond.png');
    background-repeat: no-repeat;
    background-position: left top;
}
div.art-Header-png-building
{
    position: absolute;
    z-index:-3;
    top: 0;
    left: 0;
    width: 932px;
    height: 200px;
    background-image: url('../images/printemps_building.png');
    background-repeat: no-repeat;
    background-position: 570px 20px;
}
div.art-Header-png-tree
{
    position: absolute;
    z-index:-2;
    top: 0;
    left: 0;
    width: 932px;
    height: 200px;
    background-image: url('../images/printemps_tree.png');
    background-repeat: no-repeat;
    background-position: 600px 30px;
}
 
a.art-Header-jpeg
{
    position: absolute;
    display:block;
    z-index:-1;
    top: 0;
    left: 0;
    width: 932px;
    height: 200px;
    background-image: url('../images/logo.png');
    background-repeat: no-repeat;
    background-position: 40px 30px;
}

Le HTML :

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
<div class="art-Header">
                <div class="art-Header-png-fond">
                </div>
                <div class="art-Header-png-building">
                </div>
                <div class="art-Header-png-tree">
                </div>
                <a href="<?php echo $baseUrl; ?>/" class="art-Header-jpeg">
                </a>
                <div class="art-Logo" style="text-indent:-9000px">
                    <h1 id="name-text" class="art-Logo-name"><a href="<?php echo $baseUrl; ?>/">Arbre en Tête</a></h1>
                    <div id="slogan-text" class="art-Logo-text" style="text-indent:-9000px">
                        La coupe au service de la découpe
                    </div>
                </div>
            </div>

Et enfin le JS:

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
jQuery(document).ready(function(){
        jQuery.noConflict(); 
 
        //jquery stuff
        jQuery('.art-Logo').css({'left' : '-9000px'});
        jQuery('.art-Header-jpeg').fadeOut(1).fadeIn(3000);
 
        // Building et Tree
        jQuery('.art-Header-png-building').css({backgroundPosition : '570px 200px'}).animate({backgroundPosition : '570px 20px'},2000);
        jQuery('.art-Header-png-tree').css({backgroundPosition : '600px 200px'}).animate({backgroundPosition : '600px 30px'},2000);
 
        jQuery('.art-Header-jpeg').mouseover(function(){
                        // On abaisse
                        jQuery('.art-Header-jpeg').stop(true,true);
                        jQuery(this).animate({backgroundPosition : '10px 30px'},100)
                                    .animate({backgroundPosition : '70px 30px'},100)
                                    .animate({backgroundPosition : '20px 30px'},100)
                                    .animate({backgroundPosition : '60px 30px'},100)
                                    .animate({backgroundPosition : '30px 30px'},100)
                                    .animate({backgroundPosition : '50px 30px'},100)
                                    .animate({backgroundPosition : '35px 30px'},100)
                                    .animate({backgroundPosition : '45px 30px'},100)
                                    .animate({backgroundPosition : '38px 30px'},100)
                                    .animate({backgroundPosition : '43px 30px'},100)
                                    .animate({backgroundPosition : '40px 30px'},100);
                        //jQuery(this).fadeTo(1000,0.5)
                    }).mouseout(function(){
                        // On remonte
                        jQuery('.art-Header-jpeg').stop(true,true);
                        jQuery(this).css({backgroundPosition : '40px 30px'});
                        //jQuery(this).fadeTo(1000,1.0)
                    });
 
    } );

L'animation du logo fonction sans problème au survol, par contre l'animation se fait de façon instantané...

Un peu d'aide serait pas de refus.
Merci

[dutom007]

Bon ben comme à l'habitude je vais moi même répondre...

Par défaut l'animation verticale ne fonctionne pas, il faut faire appel à un plug'in de jquery !