Effet de Transition du contenu de la page

La Communauté Webmaster

  Forum-webmaster
  Webdesign / graphisme
  Webdesign (Modérateurs: Shain, Lilian, lauryv, ToToMaStEr)
  Effet de Transition du contenu de la page

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Effet de Transition du contenu de la page (Lu 5481 fois)

Effet de Transition du contenu de la page
« sur: le 18-01-2014 a 17:44:18 »

morava
Membre récent

Hors-Ligne

Messages: 33

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 elements :
#titlewrapper {
#titletab {
#content {
Le reste doit etre magnetisé 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:
/* Content */

#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;
}

#titlewrapper {
   float:left;
   height:33px;
   background-color:#000;
   background-image:url(../images/titlebg.png);
   background-position:left bottom;
   background-repeat:no-repeat;
   border-left:1px #2b2b2b solid;
   border-top:1px #2b2b2b solid;
   padding: 0 10px;
   padding-right:1px;
   margin-left:50px;
   margin-top:70px;
   margin-bottom:-12px;

}

.fs #content {

   background:#000;
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border: 1px #2b2b2b solid;
   border-radius: 7px;
   padding-top:15px;
   padding: 10px 10px;
   margin : 102px 60px 10px 50px;


}

/* Colonnes */

#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:-20px;
   left:-150px;

}

#content #rightdataboxcontainer {
   position:absolute;
   margin-left:-40px;
   left:100%;
}

#content .databox h1 {
   margin:0 10px 10px 10px;
   text-align:center;
   border-bottom:3px solid #00f;
   font-size:14px;
}

Code source index.php :
Code:
<?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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title><?php echo $websitename ?></title>


<link href="<?php echo $mainurl ?>css/styles.css" media="screen" rel="stylesheet" type="text/css" />



   <script type="text/javascript" src="<?php echo $mainurl ?>js/jquery.js"></script>
   
<link href="<?php echo $mainurl ?>css/screen.css" rel="stylesheet" type="text/css" media="screen" />




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


</head>
<body class="fs">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=171517512914897";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="sitebg"></div>
<div id="wrapper">

<div id="container">


   <div id="header">
<div style="float:left;margin-top:100px">
   <div class="fb-like" data-href="<?php echo $mainurl ?>" data-layout="box_count" data-action="like" data-show-faces="true" data-share="false"></div>
</div>
<div style="float:right;margin-top:80px;text-align:right">
   <?php SwitchLanguage(); ?><br /><br />
<a href="<?php echo BuildURL("profile"); ?>">Login</a> / <a href="<?php echo BuildURL("register"); ?>">Sign up</a>
</div>
</div>

       <div id="menu">
      <?php BuildMenu((CheckLogin())?2:1); ?>
   </div>


         



         <div id="cleartitle"> </div>
         <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>


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


</div>

</div>

</body>
</html>

« Dernière Édition: le 23-01-2014 a 09:27:04 par morava »

Rapporter au modérateur

Re:Effet de Transition du contenu de la page
« Répondre #1 sur: le 22-01-2014 a 19:07:02 »

deadmix
Membre récent

Hors-Ligne

Sexe: Male

Messages: 23

Be or not to Be!

quand tu dis : effet de transition horizontal => tu veux dire tu veux que la page descend en bas a l'infinie ! un effet parallax !?

Rapporter au modérateur

3000+ Free Website Templates - Référencement Naturel

Re:Effet de Transition du contenu de la page
« Répondre #2 sur: le 23-01-2014 a 09:16:06 »

morava
Membre récent

Hors-Ligne

Messages: 33

Oui, un effet parallax de droite à gauche mais uniquement sur le contenue central, le reste de la page et des autres contenue ne doivent pas changer.

Voila en image ce que je souhaite.
Le contenue central doit arriver par la droite (en dessous de la colonne de droite) pour se loger à sa place initiale. Et l'ancienne page doit disparaitre de la méme maniere par la gauche.

« Dernière Édition: le 23-01-2014 a 09:43:08 par morava »

Rapporter au modérateur

Re:Effet de Transition du contenu de la page
« Répondre #3 sur: le 23-01-2014 a 17:20:32 »

deadmix
Membre récent

Hors-Ligne

Sexe: Male

Messages: 23

Be or not to Be!

alors pour cela il faut utiliser Jquery avec Parallax effect, Voici un des meilleurs plugins :

http://alvarotrigo.com/blog/fullpage-jquery-plugin-for-fullscreen-scrolling-websites/

Bonne Chance

Rapporter au modérateur

3000+ Free Website Templates - Référencement Naturel

Re:Effet de Transition du contenu de la page
« Répondre #4 sur: le 23-01-2014 a 19:47:09 »

morava
Membre récent

Hors-Ligne

Messages: 33

Est ce que tu pourrais m'aider pour le faire stp?
je suis débutant et comme ca, j'apprendrai au moins quelque chose,

« Dernière Édition: le 23-01-2014 a 19:48:08 par morava »

Rapporter au modérateur

Re:Effet de Transition du contenu de la page
« Répondre #5 sur: le 26-01-2014 a 13:33:09 »

morava
Membre récent

Hors-Ligne

Messages: 33

Citation de: deadmix le le 23-01-2014 a 17:20:32
alors pour cela il faut utiliser Jquery avec Parallax effect, Voici un des meilleurs plugins :

http://alvarotrigo.com/blog/fullpage-jquery-plugin-for-fullscreen-scrolling-websites/

Bonne Chance

morava
Membre récent

En-Ligne

Messages: 6

Est ce que tu pourrais m'aider pour l'insertion du l'effet svp?
je suis débutant et je sais pas comment le faire.
comme ca, j'apprendrai au moins quelque chose d'utile.
Merci pour votre réponse.