Cet article fait partie d’une série de notes que je prends afin de conserver des snippets de code utiles.

Parfois, trop d’animation c’est pas l’idéal, surtout si le titre et le contenu des slides ne change pas, par exemple quand on veut que seul l’image de fond change.
J’ai donc fini par trouver ce petit bout de code CSS adapté à mon besoin, basé sur une demande qui avait été fait pour désactiver toutes les animations sur mobile:

.hero_slider .et-pb-active-slide .et_pb_slide_description {
    opacity: 1 !important;
    -webkit-animation: none!important;
    -moz-animation: none!important;
    -o-animation: none!important;
    animation: none !important;
    transform: none!important;
    -o-transform: none!important;
    -moz-transform: none!important;
    -ms-transform: none!important;
    -webkit-transform: none!important;
    -o-transition-property: none!important;
    -moz-transition-property: none!important;
    -webkit-transition-property: none!important;
    transition-property: none!important;
}

En assignant à mon Slider Module la class CSS « hero_slider », ça désactive l’animation d’arriver et de changement des textes et boutons que j’y place, sans toucher à l’animation de changement d’image de fond.

Pin It on Pinterest

Share This