web-dev-qa-db-fra.com

Activer l'animation CSS3 lorsque le contenu défile dans l'affichage

J'ai un graphique à barres qui s'anime avec CSS3 et l'animation s'active actuellement lors du chargement de la page.

Le problème que j’ai, c’est que le diagramme à barres donné est placé hors écran en raison de la quantité de contenu qui le précède, de sorte que, au moment où un utilisateur le fait défiler, l’animation est déjà terminée.

Je cherchais des moyens via CSS3 ou jQuery de n'activer l'animation CSS3 sur le graphique à barres que lorsque le visualiseur voit le graphique.

<div>lots of content here, it fills the height of the screen and then some</div>
<div>animating bar chat here</div>

Si vous faites défiler l'écran très rapidement juste après le chargement de la page, vous pouvez le voir s'animer.

Voici un jsfiddle de mon code. De plus, je ne sais pas si cela compte, mais j'ai plusieurs exemples de ce graphique à barres sur la page.

Je suis tombé sur un plug-in jQuery appelé waypoint, mais je n'ai eu aucune chance de le faire fonctionner. 

Si quelqu'un pouvait m'orienter dans la bonne direction, ce serait vraiment utile.

Merci!

jqueryhtml5css3scrollcss-animations
39
Kevin Jung

Capturer les événements de défilement

Cela nécessite d'utiliser JavaScript ou jQuery pour capturer les événements de défilement, en vérifiant chaque fois qu'un événement de défilement est déclenché pour voir si l'élément est visible.

Une fois l'élément visible, démarrez l'animation. Dans le code ci-dessous, cela se fait en ajoutant une classe "start" à l'élément, qui déclenche l'animation.

Mise à jour de la démo

HTML

<div class="bar">
    <div class="level eighty">80%</div>
</div>

CSS

.eighty.start {
    width: 0px;
    background: #aae0aa;
    -webkit-animation: eighty 2s ease-out forwards;
       -moz-animation: eighty 2s ease-out forwards;
        -ms-animation: eighty 2s ease-out forwards;
         -o-animation: eighty 2s ease-out forwards;
            animation: eighty 2s ease-out forwards;
}

jQuery

function isElementInViewport(elem) {
    var $elem = $(elem);

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.bar .level');

    // If the animation has already been started
    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    }
}

// Capture scroll events
$(window).scroll(function(){
    checkAnimation();
});
62
Matt Coughlin

Parfois, vous avez besoin que l'animation se produise toujours lorsque l'élément est dans la fenêtre . Si c'est votre cas, j'ai légèrement modifié Matt jsfiddle code pour refléter cela.

jQuery

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.bar .level');

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    } else {
        $elem.removeClass('start');
    }
}
15
Bogdan Gersak

Pour activer une animation CSS, une classe doit être ajoutée à l'élément lorsque celui-ci devient visible. Comme d'autres réponses l'ont indiqué, JS est requis pour cela et Waypoints est un script JS utilisable.

Les points de cheminement constituent le moyen le plus simple de déclencher une fonction lorsque vous faites défiler jusqu'à un élément.

Jusqu’à la version 2 de Waypoints, c’était un plugin jQuery relativement simple. Dans les versions 3 et supérieures (ce guide version 3.1.1), plusieurs fonctionnalités ont été introduites. Afin d'accomplir ce qui précède avec ceci, le 'raccourci d'inview' du script peut être utilisé:

  1. Téléchargez et ajoutez les fichiers de script depuis ce lien ou depuis Github (la version 3 est pas encore disponible via CDNJS , bien que RawGit soit toujours une option aussi).

  2. Ajoutez le script à votre code HTML comme d'habitude.

    <script src="/path/to/lib/jquery.waypoints.min.js"></script>
<script src="/path/to/shortcuts/inview.min.js"></script>

  3. Ajoutez le code JS suivant, en remplaçant #myelement par le sélecteur d'élément jQuery de l'élément HTML approprié:

    $(window).load(function () {
    var in_view = new Waypoint.Inview({
        element: $('#myelement')[0],
        enter: function() {
            $('#myelement').addClass('start');
        },
        exit: function() {  // optionally
            $('#myelement').removeClass('start');
        }
    });
});

Nous utilisons $(window).load() pour les raisons expliquées ici .

Mise à jour du violon de Matt ici .

9
Wtower
CSS FOR TRIGGER : 
.trigger{
  width: 100px;
  height: 2px;
  position: fixed;
  top: 20%;
  left: 0;
  background: red;
  opacity: 0;
  z-index: -1;
}
<script>
$('body').append('<div class="trigger js-trigger"></div>');

        $(document).scroll(function () {


           $('YOUR SECTIONS NAME').each(function () {

               let $this = $(this);

               if($this.offset().top <= $('.js-trigger').offset().top) {

                   if (!$this.hasClass('CLASS NAME FOR CHECK ACTIVE SECTION')) {
                       $this
                           .addClass('currSec')
                           .siblings()
                           .removeClass('currSec');

                   }
               }

           });

        });
</script>
0
Sanya Kravchuk

En plus de ces réponses, veuillez considérer ces points:

1- La vérification de l'élément en vue a de nombreuses considérations:
Comment savoir si un élément DOM est visible dans la fenêtre actuelle?

2- Si quelqu'un veut avoir plus de contrôle sur l'animation (par exemple, définissez "le type d'animation" et "délai de démarrage"), voici un bon article à ce sujet:
http://blog.webbb.be/trigger-css-animation-scroll/

3- Et il semble également qu'appeler addClass sans délai (en utilisant setTimeout) n'est pas efficace.

0
Spongebob Comrade