28172 sujets

CSS et mise en forme, CSS3

Annimation CSS

Bonjour à tous,

je suis sur page web qui affiche à la suite différent éléments. (tout les xx secondes je change de catégorie donc je change l'affichage)


<?php session_start();
echo'<!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>
        <title>Slide Show Amplitude Groupe</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>';
include ("php/fonction.bdd.php");
connexion_mysql();
$selection = sprintf("
SELECT *
FROM ss_config ssc
INNER JOIN ss_pc sspc ON sspc.ss_config_id = ssc.ss_config_id
WHERE ss_pc_ip ='".$_SERVER['REMOTE_ADDR']."'
LIMIT 1"); 
//echo "select * FROM users WHERE users_disabled='0' AND login ='%s'";
$query = mysql_query($selection) or die(mysql_error());
$total_reponse = mysql_num_rows($query);
$field = mysql_num_fields($query );
$totalReponse = mysql_fetch_array($query);

if ($total_reponse == 1 ) 
		{
		for ( $i = 0; $i < $field; $i++ ) 
		{   
       $_SESSION[mysql_field_name($query, $i)] = $totalReponse[$i];
        }
		//print_r($_SESSION);
        //header("Location: index.php"); 
				}
		else
		{
		echo 'SlideShow non  parametré ID '.$_SERVER['REMOTE_ADDR'].'';
		exit();
		}
		



?>
<script src="javascript/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
var data = new Array();
<?php 
$index=0;
if(ISSET($_SESSION['rdv_ate']) && $_SESSION['rdv_ate']==1)
	{
		
		echo '
		data['.$index.']="agenda.php|rdv|'.$_SESSION['time_ate'].'|'.$_SESSION['ss_config_id'].'";';
	$index=$index+1;
	} 
	if(ISSET($_SESSION['news']) && $_SESSION['news']==1)
	{
			echo '
		data['.$index.']="news.php|news|'.$_SESSION['time_news'].'|'.$_SESSION['ss_sscn'].'";';
	$index=$index+1;
	}
	if(ISSET($_SESSION['planetvo']) && $_SESSION['planetvo']==1)
	{
				echo '
				
		data['.$index.']="planetvo.php|planetvo|'.$_SESSION['time_planetvo'].'|'.$_SESSION['id_sscp'].'";';
	$index=$index+1;
	} 
	if(ISSET($_SESSION['video']) && $_SESSION['video']==1)
	{ 
				echo '
				
		data['.$index.']="video.php|video|'.$_SESSION['time_video'].'|'.$_SESSION['id_sscv'].'";';
	$index=$index+1;
	} 
	?>
	
function display(index) { 

document.getElementById("top").style.animation="cf3FadeInOut 5s ease-in-out 0s 1 alternate";
//document.getElementById("top").style.display="";


				var regSeparator = new RegExp('[|]+','g');
				var eachElement = data[index].split(regSeparator);
				var url=eachElement[0];
				var time=eachElement[2]*1000;
				///////var time= 20*1000;
				var categorie=eachElement[1];
var ss_config_id=eachElement[3];
////////////////l'affichage c'est toi qui voit
var element = document.getElementById("top");
element.addEventListener("transitionend", $.ajax({
											type: "POST",
											url: "ajax/"+url,
											data: "ss_config_id="+ss_config_id,
											success: function(html)
											{
											$("#affichage").html(html);
											//document.getElementById("top").style.display="none";
											}
											}), false);




next = index+1;
///////////////////on prévois qu'il faut revenir au début si on est à la fin du tableau
if(index +1 > data.length-1){
    next = 0;
}
setTimeout( function(){
       display(next)
    }, time);
 }
	


var test= Math.floor(Math.random() * (4 - 1 +1)) + 1;
 ///  alert(test);
      ////// rdv
  
 
  
   ///////1
</script> 
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/news.css" />
<link rel="stylesheet" href="css/planetvo.css" />

<body onload="display(0)">
 <div id="cf">
 <img id="top" src="img/amplitude.jpg" />
 <div id="affichage"><div>
 </div>



</body>


Cela fonctionne, par contre je voudrais rajouter une animation entre chaque catégorie affiche le logo de l'entreprise.
J'avais rajouter ceci: 
document.getElementById("top").style.animation="cf3FadeInOut 5s ease-in-out 0s 1 alternate";



 @keyframes cf3FadeInOut {
0% 
{
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#cf {

	max-width: 100%;
	height: auto;
  margin:0 auto;
}
#cf #top {
	max-width: 100%;
	height: auto;
	position:absolute;
	left:0;

}


Mais le problème, soit l'image s'affiche en premier ou en arrière plan et en meme temps que mes catégorie

Quelle erreur est-ce commis dans mon code? Comment faire pour que cette animation apparaisse uniquement entre les catégorie et pas pendant.

merci d'avance pour vos explications

guigui69
Modifié par guigui69 (11 Aug 2016 - 17:19)
Sujet clos
Aller à