Effet d'apparition par transition horizontale

**morava** · 18/01/2014, 22h39

Bonjour à tous,

Je crée actuellement un site internet en PHP avec une feuille de style.css mais je tiens à vous préciser que je suis débutant dans la création de site web.
J'ai construit un modelé :
gsweet1981.wix.com/lesmordus
Ce modèle doit être reproduit sur mon site officiel :
www.morava-airlines.com/beta
Le site officiel a été introduit par une société (IPS : Intégral pirep system), le style doit être fait par moi-même.

Voilà ma question :

J'aimerai avoir un effet de transition horizontal sur le contenu central de la page lorsque l'on change de page.
Voir exemple sur le site : gsweet1981.wix.com/lesmordus
Le contenu central contient 3 éléments :

Code :

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

1
2
3
#titlewrapper {
#titletab {
#content {

Le reste doit être magnétisé sur tout les page sans transition.

Je vous souhaite un bon week-end en vous remercient d'avance !

Partie du contenu central feuille de style (style.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
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
/* Content */
#titlewrapper {
   float:left;
   border-left:1px #2b2b2b solid;
   border-top:1px #2b2b2b solid;
   background-color:#000;
   background-image:url(../images/titlebg.png);
   background-position:left bottom;
   background-repeat:no-repeat;
   padding: 0 10px;
   padding-right:1px;
   margin-left:50px;
   margin-top:70px;
   margin-bottom:-12px;
   height:33px;
}
 
#titletab {
   float:left;
   width:90px;
   height:33px;
   background-image:url(../images/titletab.png);
   background-position:left top;
   background-repeat:no-repeat;
   margin-top:70px;
   margin-bottom:-12px;
}
 
.fs #content {
   padding: 10px 10px;
   background:#000;
   border: 1px #2b2b2b solid;
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 7px;
margin-left:50px;
margin-right:60px;
   margin-top:105px;
   margin-bottom:10px;
   padding-top:15px;
}
 
#content .databox {
   width:190px;
   background:#000;
   border:1px solid #2b2b2b;
   -webkit-border-radius: 7px;
   -webkit-border-top-left-radius: 0;
   -moz-border-radius: 7px;
   -moz-border-radius-topleft: 0;
   border-radius: 7px;
   border-top-left-radius: 0;
   font-size:14px;
   padding:10px;
   margin-bottom:10px;
}
 
#content #leftdataboxcontainer {
   position:absolute;
   margin-left:-25px;
   left:-150px;
 
 
}
 
#content #rightdataboxcontainer {
   position:absolute;
margin-top:-17px;   
margin-left:-45px;
margin-right:15px;
margin-bottom:50px;
   left:100%;
}
 
#content .databox h1 {
   margin:0px 10px 10px 10px;
   text-align:center;
   border-bottom:3px solid #00f;
   font-size:14px;
}

Code source index.php :

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
<?php
require_once("init.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $websitename ?></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" /> 
 
<!-- Style Sheets -->
<link href="<?php echo $mainurl ?>css/styles.css" media="screen" rel="stylesheet" type="text/css" />
<!-- End Style Sheets -->
 
<!-- easy slider -->
   <script type="text/javascript" src="<?php echo $mainurl ?>js/jquery.js"></script>
   <!--<script type="text/javascript" src="js/easySlider1.5.js"></script>
   <script type="text/javascript">
      $(document).ready(function(){   
         $("#slider").easySlider({
            auto: true,
            continuous: true
         });
      });   
   </script>!-->
    <link href="<?php echo $mainurl ?>css/screen.css" rel="stylesheet" type="text/css" media="screen" />
 
<!-- end easy slider -->
 
<!-- Accordion/slider -->
<link rel="stylesheet" href="<?php echo $mainurl ?>css/accordion.css" />
 
   <script type="text/javascript" src="<?php echo $mainurl ?>js/chili-1.7.pack.js"></script>
   <script type="text/javascript" src="<?php echo $mainurl ?>js/jquery.easing.js"></script>
   <script type="text/javascript" src="<?php echo $mainurl ?>js/jquery.accordion.js"></script>
 
   <script type="text/javascript">
   jQuery().ready(function(){
      // simple Accordion
      jQuery('#list1').Accordion();
   });
   </script>
<!--end accordion-->
 
 
</head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<body class="fs">
<div id="sitebg"></div>
<div id="wrapper">
<!-- begin container-->
<div id="container">
 
<!-- Begin header -->
   <div id="header">
    <br />
    <br />
    </div>
<!-- End header -- >
 
<!-- Begin nav -->
       <div id="menu">
      <?php BuildMenu((CheckLogin())?2:1); ?>
   </div>
<!-- End nav -->
<!-- Begin EasySlider 1.5 -->
         <!--<div id="slider" class="block">
 
          <ul>
         <li><img src="images/slides/slide1.jpg" alt="" /></li>
            <li><img src="images/slides/slide2.jpg" alt"" /></li>
       </ul>
 
         </div> !-->
<!-- End Easy Slider -->
 
<!-- Content -->
         <div id="titlewrapper">
               <h3 id="title"><?php echo $title ?></h3>
            </div><div id="titletab"></div>
         <div id="content">
               <div id="leftdataboxcontainer">
                    <?php SideBarLeft(); ?>
                </div>
               <div id="rightdataboxcontainer">
                    <?php SideBarRight(); ?>
                </div>
            <p>
            <?php IncludePage(); ?>
            </p>
</div>
<!-- End Content -->
<!-- Footer -->
         <div id="footer" align="center">
            <table border="0" style="width:100%">
            <tr>
            <td style="padding-left:100px"><a href="https://www.facebook.com/groups/lesmordus/" target="_blank"><img src="images/fb.png" style="vertical-align:middle" /> Facebook</td>
            <td style="text-align:right;padding-right:100px;"><a href="http://www.youtube.com/user/lesmordusdelaviation" target="_blank"><img src="images/youtube.png" style="vertical-align:middle" /> Youtube</a></td>
            </tr>
            </table>
 
      Copyright &copy; 2013 | Powered by <a href="http://www.jbussemaker.com/">jBussemaker Web Development</a> and <a href="http://www.integratedpirepsystem.com/" title="Integrated Pirep System">IPS</a>
 
</div>
<!-- End Footer -->
 
</div>
<!-- End Container -->
</div>
 
 
</body>
</html>

**Bisûnûrs** · 20/01/2014, 09h09

Tu ne peux pas avoir cet effet si tes contenus sont sur des pages différentes. Il faudrait pour ça que tout ton contenu soit chargé dans une seule page et jouer sur les affichages/masquages des parties en fonction des liens cliqués dans le menu.

Effet d'apparition par transition horizontale

CSS

Vue hybride

Discussions similaires

Partager

Partager