webentwicklung-frage-antwort-db.com.de

Aktivieren Sie die CSS3-Animation, wenn der Inhalt angezeigt wird

Ich habe ein Balkendiagramm, das mit CSS3 animiert wird. Die Animation wird derzeit beim Laden der Seite aktiviert.

Das Problem, das ich habe, ist, dass das angegebene Balkendiagramm aufgrund einer Vielzahl von Inhalten vor dem Bildschirm außerhalb des Bildschirms platziert wird. Wenn also ein Benutzer zu ihm blättert, ist die Animation bereits beendet.

Ich habe nach Wegen gesucht, entweder über CSS3 oder jQuery, um die CSS3-Animation nur im Balkendiagramm zu aktivieren, wenn der Betrachter das Diagramm sieht.

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

Wenn Sie direkt nach dem Laden der Seite schnell nach unten scrollen, können Sie die Animation animieren.

Hier ist ein jsfiddle meines Codes. Ich weiß auch nicht, ob dies wichtig ist, aber ich habe mehrere Beispiele für dieses Balkendiagramm auf der Seite.

Ich bin auf ein jQuery-Plugin namens waypoint gestoßen, aber ich hatte absolut kein Glück, dass es funktioniert. 

Wenn mich jemand in die richtige Richtung weisen könnte, wäre das wirklich hilfreich.

Vielen Dank!

39
Kevin Jung

Bildlaufereignisse erfassen

Dies erfordert die Verwendung von JavaScript oder jQuery zum Erfassen von Bildlaufereignissen, wobei jedes Mal, wenn ein Bildlaufereignis ausgelöst wird, überprüft wird, ob das Element angezeigt wird.

Sobald das Element angezeigt wird, starten Sie die Animation. Im folgenden Code wird dies durch Hinzufügen einer "Start" -Klasse zu dem Element ausgeführt, das die Animation auslöst.

Aktualisierte Demo

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

Manchmal müssen Sie die Animation immer ausführen, wenn sich das Element im Ansichtsfenster befindet. Wenn dies der Fall ist, habe ich den Matt jsfiddle - Code etwas modifiziert, um dies zu berücksichtigen.

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

Um eine CSS-Animation zu aktivieren, muss dem Element eine Klasse hinzugefügt werden, wenn diese sichtbar wird. Wie andere Antworten gezeigt haben, ist hierfür JS erforderlich und Waypoints ist ein JS-Skript, das verwendet werden kann.

Wegpunkte sind die einfachste Möglichkeit, eine Funktion auszulösen, wenn Sie zu .__ blättern. ein Element.

Bis zur Version 2 von Waypoints war dies ein relativ einfaches Jquery-Plugin. In Version 3 und höher (dieses Handbuch Version 3.1.1) wurden einige Funktionen eingeführt. Um dies zu erreichen, kann die 'inview-Verknüpfung' des Skripts verwendet werden:

  1. Laden Sie die Skriptdateien von this link oder von Github herunter und fügen Sie sie hinzu (Version 3 ist noch nicht verfügbar über CDNJS , obwohl RawGit immer eine Option ist auch).

  2. Fügen Sie das Skript wie gewohnt Ihrem HTML-Code hinzu.

    <script src="/path/to/lib/jquery.waypoints.min.js"></script>
    <script src="/path/to/shortcuts/inview.min.js"></script>
    
  3. Fügen Sie den folgenden JS-Code hinzu, und ersetzen Sie #myelement durch das entsprechende jQuery-Selector des HTML-Elements:

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

Wir verwenden $(window).load() aus Gründen, die hier erklärt werden.

Die Geige von Matt hier wurde aktualisiert.

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

Bitte beachten Sie zusätzlich zu diesen Antworten folgende Punkte:

1- Das Überprüfen des Elements in der Ansicht hat viele Überlegungen:
Wie kann ich feststellen, ob ein DOM-Element im aktuellen Ansichtsfenster sichtbar ist?

2- Wenn jemand mehr Kontrolle über die Animation haben möchte (z. B. "den Animationstyp" und "Startverzögerung"), ist hier ein guter Artikel dazu:
http://blog.webbb.be/trigger-css-animation-scroll/

3- Und es scheint auch, dass ein Aufruf von addClass ohne Verzögerung (mit setTimeout) nicht effektiv ist.

0