Par Warflof à 15h00 :
Salut ! Tu m'as tiré une sacrée épine du pied ! Cependant, aurais-tu des exemples à montrer ? J'ai encore un petit soucis de disparition de ma div, mais je planches dessus ^^
Encore merci ! Bonne journée
Par Patrice à 15h40 :
Bonjour Warflof,
Un soucis de disparition, c'est à dire ? Avant / après l'animation ?
Par Warflof à 15h45 :
C'était après, mais grosse erreur d'inattention de ma part avec les placements.
Ca marche nickel ! Je ne peux que recommander cette astuce !
Par Patrice à 16h04 :
Ok, impec alors ;-)
Par Alain à 23h49 :
Bonjour,
j'ai 2 div de 50% de largeur et 100% de hauteur div droite et div gauche
et une autre div avec un bouton central.
Je cherche comment ouvrir les div en sortant la div gauche vers la gauche et la droite vers la droite,
un peu comme des portes d'ascenseur.
Merci de votre aide
Par Patrice à 10h10 :
Bonjour Alain,
Il suffit d'animer la propriété translateX :
Par exemple une classe pour les portes fermées :
.porte{
transform: translateX(0);
animation: transform 1s;
}
Pour la porte de gauche ouverte :
#porteGauche.ouvert{
transform: translateX(-100%);
}
Pour la porte de droite ouverte :
#porteDroite.ouvert{
transform: translateX(100%);
}
Ensuite il faudra ajouter un peu de javascript pour ajouter la class ouvert au clic sur le bouton central
Par Alain à 00h45 :
Merci Patrice,
J'ai réussi avec le css et tout fonctionne bien, il me manque juste une chose j'ai trouvé ce code de jquering je crois
$("#monElement").addClass("maClasse");
qui doit changer la classe de ma div cependant je sais pas où ajouter ce code pour le bouton central ;)
Si jamais tu pouvais encore m'aider ça serait bien apprécié
Par Patrice à 19h58 :
Il faut placer ça dans des balises script après les balises du bouton central (sinon en fin de page ça va très bien).
Mais tel quel ça ne fonctionnera pas.
Il faut préciser à quel moment tu souhaite que la class soit changé.
Pour ça il faut ajouter un écouteur click :
$( "#monElement" ).click(function(){
this.addClass("maClasse");
});
Il faut vérifier si le mot clé this correspond bien à monElement dans la fonction, mais normallement oui.
Par Alain à 00h11 :
Bonjour Patrice,
J'ai finalement opté pour du javascript et tout fonctionne bien
voici mon code:
<script language="javascript">
function change_class() {
var btn = document.getElementById("porteGauche");
btn.className= "ouvert";
var btn = document.getElementById("porteDroite");
btn.className= "ouvert";
}
</script>
Merci énormément pour ton aide !
Par Lionel à 08h02 :
Bonjour,
Sais-tu comment faire l'animation en automatique quand une personne arrive sur ma page web ?
Je veux que du texte arrive de la gauche et s'arrête et donc reste fixe sur la page.
Merci d'avance de ton aide.
Par Patrice à 21h46 :
Bonjour Lionel,
Tu peux peux lancer une animation automatique avec les CSS :
#leBlocDiv{
position: absolute;
/*
ici les styles du bloc
*/
animation-name: leBlocDivAnim;
animation-fill-mode: both;// pour que l'animation commence à la première frame et se fige à la dernière (sinon elle repart à la première)
animation-delay: 2s; // délais avant le lancement de l'animation
animation-duration: 2s; // durée de l'animation
animation-timing-function: ease-in-out; // la façon dont l'animation est jouée
}
@keyframes flyingCrepeAnim{
0% {
left: -50%;
transform: rotate(-10deg) translate(-50%, -50%);
}
100% {
left: 0%;
}
}