Faire apparaître des éléments de la page au scroll

Ne fonctionne qu'avec les Versions Pro d'e-monsite.

Il peut y avoir une multitudes d'apparitions possibles sur une page web : de la droite, de la gauche, du haut, du bas... Pour l'instant nous allons uniquement voir les apparitions dites "gauche/droite" qui dynamise l'affichage de vos éléments. (Un Live Tricks sera mis en place à la fin de ce tricks pour vous permettre de voir en direct l'effet au scroll)

Du JavaScript et du CSS

Pour réaliser cette apparition, il va nous falloir utiliser ces deux langages : le JavaScript pour déterminer où on se trouve dans la page, et le CSS pour réaliser l'animation !

Voici le code JavaScript à coller dans les Configuration > Réglages > Zones Editables :

$(document).ready(function(){
    $(window).on('scroll', function () {
    
    var elmt   = $('.from-left, .from-right');
    var topImg = $('.from-left, .from-right').offset().top;
    var scroll = $(window).scrollTop();
    
        $(elmt).each(function() {
            
            var topImg = $(this).offset().top - 300;
            
                if ( topImg < scroll ) {
                
                $(this).css("transform", "translate(0,0)");
                $(this).css("opacity", "1");
                
                };
        });
    });
});

Alors que fais ce code ? Il va chercher les class CSS .from-left et .from-right et pour chaque elements réinitialise des propriétés CSS.

Et les propriétés CSS les voici : (à coller dans les Zones Editables)

.from-right,
.from-left {
    opacity: 0;
    transition: transform 1s ease-in-out, opacity 0.5s ease-in-out;
}
.from-right {
    transform: translate(50px,-30px);
}
.from-left {
    transform: translate(-50px,-30px);
}

Mais comment cela peut-il animer mes éléments ?

Pour pouvoir animer vos éléments, il va falloir les cibler avec les class présentes dans le JavaScript ! Et pour cela rien de plus simple, ajoutez simplement la class from-left pour voir l'apparition arriver de gauche, ou ajoutez la class from-right pour voir l'apparition arriver de droite !

Nous vous conseillons de directement mettre cette class dans le style CSS des colonnes comme ici :

Et voilà ! Rien de plus simple afin d'animer vos pages web. Nous mettrons à jour ce trick avec d'autres animations ! En attendant voici le Live Tricks afin de voir les animations en direct.

Voir le LiveTricks

N'hésitez pas à nous envoyer vos pages web animées ici ou à nous proposer vos tricks directement :)