Apparition en fondu d'un portlet

Last modified by Aurelie Bertrand on 2024/09/20 10:45

Il ets possible de faire apparaitre un portlet en fondu pour ajouter un peu d'animation à la page.

Pour cela, effectuez les modifications suivantes.

Modification du CSS

Ajoutez le CSS suivant dans la feuille de style du portefeuille concerné :

.reveal
{
    /*position: relative;
    transform: translateX(150px);
    opacity: 0;
    transition: 1s all ease;*/
}

.reveal-left
{
    position: relative;
    transform: translateX(-150px);
    opacity: 0;
    transition: 1s all ease;
}

.reveal-right
{
    position: relative;
    transform: translateX(-150px);
    opacity: 0;
    transition: 1s all ease;
}

.active
{
    transform: translateX(0);
    opacity: 1!important;
}

Modification du javascript

Ajoutez les fonctions suivantes dans le javascript de la page de tableau de bord :

function reveal() {
    var reveals = document.querySelectorAll(".reveal");
    for (var i = 0; i < reveals.length; i++)
    {
        var windowHeight = window.innerHeight;
        var elementTop = reveals[i].getBoundingClientRect().top;
        var elementVisible = 150;
        if (elementTop < windowHeight - elementVisible) {
            reveals[i].classList.add("active");
        }else
        {
            reveals[i].classList.remove("active");
        }
    }
}

document.addEventListener("wheel", reveal);

ddCtrl.addCurrentPageLoadListener(function(currentPage) {
   reveal();
});

Modification de l'affichage du portlet

Dans l'Éditeur de tableaux de bord, renseignez la Classe CSS reveal reveal-left dans l'onglet Affichage du panneau d'édition de la portlet.
Style CSS