Titre: Effet de Transition du contenu de la page
Posté par: morava le le 18-01-2014 a 17:44:18
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 (http://gsweet1981.wix.com/lesmordus)
Ce modèle doit être reproduit sur mon site officiel :
www.morava-airlines.com/beta (http://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 (http://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>
<!-- 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>
<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">
<!-- begin container-->
<div id="container">
<!-- Begin header -->
<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>
<!-- 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="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>
<!-- 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 © 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> |
|
|
Titre: Re:Effet de Transition du contenu de la page
Posté par: deadmix le le 22-01-2014 a 19:07:02
| quand tu dis : effet de transition horizontal => tu veux dire tu veux que la page descend en bas a l'infinie ! un effet parallax !? |
Titre: Re:Effet de Transition du contenu de la page
Posté par: morava le le 23-01-2014 a 09:16:06
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.
|
Titre: Re:Effet de Transition du contenu de la page
Posté par: 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 |
Titre: Re:Effet de Transition du contenu de la page
Posté par: morava le le 23-01-2014 a 19:47:09
Est ce que tu pourrais m'aider pour le faire stp? :(
je suis débutant et comme ca, j'apprendrai au moins quelque chose, |
Titre: Re:Effet de Transition du contenu de la page
Posté par: morava le le 26-01-2014 a 13:33:09
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.
|
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|