Faire slider tout le contenu d'un site..

**van___fanel** · 20/11/2009, 19h18

Bonjour,

J'ai une envie pour l'un de mes projets : faire slider tout le contenu du site, quand on clique sur un bouton "Next" par exemple. Histoire de mieux comprendre le fonctionnement, j'ai fait 3 screens, qui symbolisent les 3 étapes maitresse de l'évenement :

T = 0. Un a un div principal, en gris, et 2 sous-div : div_01 pour le contenu, à gauche, et div_02 pour un menu, à droite.

http://wir3d.net/bordel/slider_01.jpg

T = 1. On clique sur un bouton "Next", n'importe où sur le site, et les div_01 et div_02 commencent à slidé, pour arriver à T = 2.

http://wir3d.net/bordel/slider_02.jpg

T = 2. div_01 et div_02 ont slidé, et on a maintenant à l'écran div_02 à gauche, et un nouveau div, div_03, à droite.

http://wir3d.net/bordel/slider_03.jpg

Tout ceci doit se faire de manière animée évidemment. jQuery est-il capable de faire ça, ou quelque chose de semblable ? Si vous pensez savoir comment s'y prendre, merci de me donner des pistes : )

**danielhagnoul** · 21/11/2009, 19h51

Bonsoir.

Voici un exemple qui est très proche de votre demande. Il faut cliquer dans la div la plus étroite pour l'agrandir au détriment de la plus importante, c'est réversible.

En commentaire dans le code, une animation légèrement différente.

Comme vous le verrez, le code pour cette animation est très simple. Si la troisième division doit absolument être cachée au départ, cela compliquera certainement le code et je manque de temps pour chercher.

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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#FFFFFF;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:820px;
            height:600px;
            background-color:#BEBEBE;
        }
        div#divID1 {
            float:left;
            width:594px;
            height:585px;
            background-color:#FFA07A;
            margin:6px;
        }
        div#divID2 {
            float:left;
            width:174px;
            height:585px;
            background-color:#FF0000;
            margin:6px;
        }
        div#divID3 {
            float:left;
            width:12px;
            height:585px;
            background-color:#76EEC6;
            margin:6px;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#divID3").click(function(){
                if (parseInt($(this).css("width")) < 20){
                /*
                    $("#divID1").animate({width:"-=582px"}, 3000);
                    $("#divID2").animate({width:"+=420px"}, 3000);
                    $("#divID3").animate({width:"+=164px"}, 3000);
                */
                    $("#divID1").animate({width:"-=582px"}, 3000);
                    $("#divID3").animate({width:"+=579px"}, 3000);
                }
            });
            $("#divID1").click(function(){
                if (parseInt($(this).css("width")) < 20){
                /*
                    $("#divID1").animate({width:"+=582px"}, 3000);
                    $("#divID2").animate({width:"-=420px"}, 3000);
                    $("#divID3").animate({width:"-=164px"}, 3000);
                */
                    $("#divID1").animate({width:"+=582px"}, 3000);
                    $("#divID3").animate({width:"-=579px"}, 3000);
                }
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <div id="divID1"></div>
        <div id="divID2"></div>
        <div id="divID3"></div>
    </div>
</body>
</html>

**van___fanel** · 27/11/2009, 20h21

Pas mal du tout. Merci bien pour cette petite animation, qui rend vraiment bien je trouve. Je met ça de côté, ça risque de me servir plus tard : )

Faire slider tout le contenu d'un site..

jQuery

Vue hybride

Discussions similaires

Partager

Partager