Commentaires sur l'article Déplacer un élément de gauche à droite (left to right) avec CSS animation

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

Bonjour Warflof,

Un soucis de disparition, c'est à dire ? Avant / après l'animation ?

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 !

Ok, impec alors ;-)

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

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

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é

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.

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 !

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.

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

}
}