118 lines
6.6 KiB
PHP
Executable File
118 lines
6.6 KiB
PHP
Executable File
<?php
|
|
$nomFicAppelant = basename(__FILE__);
|
|
// -----------------------------------------------------
|
|
// SECTION animation
|
|
// -----------------------------------------------------
|
|
echo '<div id="animModale" style="display:none; max-width:98%; margin:auto; position:relative; z-index:11;" >';
|
|
echo '<div id="modaleGene" class="modaleGene" >';
|
|
echo '<div class="popupGene popupAnimModale flexToColumn" >';
|
|
|
|
|
|
echo '<div class="boiteCss flexToColumn" style="flex:1" >';
|
|
// -----------------------------------------------------
|
|
// bouton fermer
|
|
// -----------------------------------------------------
|
|
echo '<a href="" >';
|
|
echo '<span class="fad fa-times-circle btn_close" onClick="document.getElementById(\'animModale\').style.display=\'none\';document.getElementById(\'anim\').value=0; document.getElementById(\'btn10\')className=\'boutonsMenusWbm\';" </span>';
|
|
echo '</a>';
|
|
|
|
echo '<div class="boiteCssTitre">Animation';
|
|
echo '<span style="text-decoration:none;">  </span>';
|
|
echo '<a href="https://www.theappguruz.com/tag-tools/web/CSSAnimations/" target="_blank">Exemple en ligne</a>';
|
|
echo '<span style="text-decoration:none;">  </span>';
|
|
echo '<a href="https://fr.makingcss.com/transition/" target="_blank">Configurateur en ligne</a>';
|
|
echo '</div>';
|
|
|
|
echo '<div style="text-align:left; display:flex; flex:1;flex-direction:column; border:1px solid lightblue; grid-row-gap: 2px; padding:10px; margin:10px; border-radius:7px;" >';
|
|
|
|
// -----------------------------------------------------
|
|
// Transforrm
|
|
// -----------------------------------------------------
|
|
$title="Choisir un effet parmi Translation, Rotation, Pivotement, Redimensionnement, Perspective - Ou une Keyframe";
|
|
echo '<div title="' .$title. '" >';
|
|
echo 'Options de transformation : ';
|
|
echo '<a href="https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transform" target="_blanl"><i class="fad fa-question-circle"></i></a>';
|
|
echo '</div>';
|
|
|
|
$title="Choisir un effet";
|
|
echo '<div >';
|
|
// echo '<select class="selectWbm" id="transfo" name="transfo" onChange="animation();" title="' .$title. '" >';
|
|
echo '<select class="selectWbm" id="transfo" name="transfo" onChange="animateJs();" title="' .$title. '" >';
|
|
echo '<option value="none">Aucune</option>';
|
|
echo '<option value="translate">Translation (X,Y,Z)</option>';
|
|
echo '<option value="rotate">Rotation</option>';
|
|
echo '<option value="skew">Pivoter</option>';
|
|
echo '<option value="scale">Dimensionner</option>';
|
|
echo '<option value="perspective">Perspective</option>';
|
|
echo '</select>';
|
|
// echo '</div>';
|
|
|
|
$title='Zone de saisie libre';
|
|
echo '<span title="' .$title. '" >';
|
|
// echo '<textarea style="overflow:auto;" class="inputWebmaster" rows="1" cols="50" onChange="editMonForm(\'transformCss\',0);" name="transformCss" id="transformCss" />' .$cssTransform[$theNumCss]. '</textarea>';
|
|
echo '<textarea class="textAreaWbm" placeHolder="exemple : maKeyFrameName 5s infinite ..." style="overflow:auto;" class="inputWebmaster" rows="1" cols="40" name="transformCss" id="transformCss" >' .$cssTransform[$theNumCss]. '</textarea>';
|
|
echo '</span>';
|
|
echo '</div>';
|
|
|
|
// -----------------------------------------------------
|
|
// Transition
|
|
// -----------------------------------------------------
|
|
$title='La propriété transition est une propriété raccourcie pour les propriétés transition-property, transition-duration, transition-timing-function et transition-delay.
|
|
Elle permet de définir la transition entre deux états d\'un élément. Les différents états peuvent être définis à l\'aide de pseudo-classes telles que :hover ou :active ou être définis dynamiquement avec JavaScript.
|
|
';
|
|
echo '<div title="' .$title. '" > ';
|
|
echo '  Options de transition :  ';
|
|
echo '<a href="https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition" target="_blanl"><i class="fad fa-question-circle"></i></a>';
|
|
echo '</div>';
|
|
|
|
echo '<div>';
|
|
echo '<textarea class="textAreaWbm" placeHolder="width 2s" class="inputWebmaster" rows="2" name="transitionCss" id="transitionCss" >' .$cssTransition[$theNumCss]. '</textarea>';
|
|
echo '</div>';
|
|
|
|
// -----------------------------------------------------
|
|
// Animation
|
|
// -----------------------------------------------------
|
|
$title='exemple \'5s Animation1\' pour lancer l\'animation1 5 secondes, et l\'animation1 est definie dans la keyframe';
|
|
echo '<div style="grid-column:1;"title="' .$title. '" >';
|
|
echo '  Options d\'animation  (avec une keyFrame) :  ';
|
|
echo '<a href="https://www.w3schools.com/css/css3_animations.asp" target="_blank"><i class="fad fa-question-circle"></i></a>';
|
|
echo '</div>';
|
|
|
|
echo '<div>';
|
|
echo '<textarea class="textAreaWbm" placeHolder="exemple : maKeyFrameName 5s infinite... " style="overflow:auto;" class="inputWebmaster" rows="3" onChange="editMonForm(\'animationCss\',0);" name="animationCss" id="animationCss" />' .$cssAnimation[$theNumCss]. '</textarea>';
|
|
echo '</div>';
|
|
|
|
// -----------------------------------------------------
|
|
// key frame
|
|
// -----------------------------------------------------
|
|
$theTitle='La keyframe permet une animation par étapes';
|
|
echo '<div title="' .$title. '" >';
|
|
echo '  Key  frame  ( jeu d\'animation ) :  ';
|
|
echo '</div>';
|
|
|
|
echo '<div>';
|
|
$theTitle='';
|
|
echo '<textarea class="textAreaWbm" placeHolder="exemple : from {background-color: red;} to {background-color: yellow;}... " class="inputWebmaster" rows="4" onChange="editMonForm(\'KframeCss\',0);" name="KframeCss" id="KframeCss" >' .$cssKFrame[$theNumCss]. '</textarea>';
|
|
echo '</div>';
|
|
|
|
// -----------------------------------------------------
|
|
// Valider
|
|
// -----------------------------------------------------
|
|
echo '<div style="margin:auto;"> ';
|
|
echo '<button class="boutonsWebmaster" onClick="editMonForm(\'submit\',0);" >Valider l\'animation</button>';
|
|
echo '</div>';
|
|
|
|
// -----------------------------------------------------
|
|
// Preview
|
|
// -----------------------------------------------------
|
|
echo '<div style="grid-column: 1 / span 2;" >';
|
|
echo '<br>';
|
|
if( $_SESSION['isAgencement']===false) include ("./styles/preview2.php");
|
|
echo '</div>';
|
|
|
|
echo '</div>';
|
|
echo '</div>'; //boite
|
|
echo '</div>'; //popup
|
|
echo '</div>'; //modale
|
|
echo '</div>'; //modale
|
|
?>
|