Animate CSS3 avec le scroll de la souris

Rédigé par Djb 1 commentaire

jquery

 

Lors d'une intégration avec le framework SASS pour pluXml, j'ai souhaité mettre en place une animation lors du scroll de la souris.

La première étape, télécharger jquery et le placer dans le footer.


 <!-- scripts js -->
 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

 

puis placer ce petit script


<script>
  $(window).scroll(function() {

        $('.blog').each(function(){
        var imagePos = $(this).offset().top;

        var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+400) {
            $(this).addClass("effet");
        }
        });

    });    
</script>

 

On ajoute la class .effet à toutes les class .blog si la position est à 400px par rapport au haut de la page.

Exemple pour la class .effet


.effet{

    visibility: visible; 
    @include animate(flip-in-x, .6s, 0ms);

}

 

Pensez à cacher la class .blog pour la faire apparaitre avec la class .effet


.blog{

   visibility: hidden;

} 

 

L'intégration est disponible sur mon compte Github: Bounce

Voir aussi: Utiliser les mixins Animated sur le framework PluXml

 

Classé dans : PluXml, Réalisations, jQuery Mots clés : SASS, PluXml, Animated

A propos de l'auteur, Djb:

Fort de notre expérience dans la création et l'intégration de projets web, l'équipe Psd-HTML vous accompagnons dans la définition de votre charte graphique et la réalisation de votre projet Web - Intégrateur chez psd-html.fr

 

1 commentaire


Djb a dit : #1


Si vous avez une autre solution que l'utilisation de jQuery, je suis preneur...

Fil Rss des commentaires de cet article

Écrire un commentaire