Ankündigung

Einklappen
Keine Ankündigung bisher.

Animate in on scroll "versetzt" ?

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Animate in on scroll "versetzt" ?

    Hallo,

    ich würde gerne das die animate ins beim scrollen etwas versetzter kommen...beim "alten" code gab es ein offset...beim neuen weiss ich leider nicht, wie ich das modifizieren könnte.. wäre cool wenn mir jemand behilflich sein könnte.

    Code:
    jQuery(document).ready(function ()
    {
    var root = jQuery("body");
    var animationClasses = ["fadeIn", "zoomIn", "fadeInDown","fadeInDownBig","fadeInLeft","fadeInL eftBig","fadeInRight","fadeInRightBig","fadeInUp", "fadeInUpBig","rotateIn","zoomIn","slideInDown","s lideInLeft","slideInRight","slideInUp","bounceIn", "bounceInDown","bounceInLeft","bounceInRight","bou nceInUp"];
    jQuery.each(animationClasses, function(key, value)
    {
    root.find("." + value).each(function()
    {
    jQuery(this).removeClass(value).attr("data-animate", value);
    });
    });
    
    function initObserver()
    {
    // @var IntersectionObserver
    var objObserver = new IntersectionObserver( function(entries, observer)
    {
    entries.forEach(function(entry)
    {
    if (entry.isIntersecting)
    {
    var element = jQuery(entry.target);
    var animation = element.data("animate");
    element.removeClass('animate').addClass('animated ' + animation).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function ()
    {
    element.removeClass(animation+' animated');
    });
    // stop observing
    objObserver.unobserve( entry.target );
    }
    });
    });
    
    jQuery('.animate').not('.nowaypoint').each(functio n(i,elem)
    {
    var element = jQuery(elem);
    // remove animations for ios or android
    if(jQuery('body').hasClass('ios') || jQuery('body').hasClass('android'))
    {
    element.removeClass('animate');
    return true;
    }
    else
    {
    objObserver.observe( element[0],{root: null,rootMargin: '0px',threshold: "25%"} );
    }
    });
    }
    
    // check if a revolutionslider exists in page
    if (jQuery(document).revolution != undefined)
    {
    jQuery(document).on('RevolutionSlider.loaded', function (e, params)
    {
    initObserver();
    });
    }
    else
    {
    initObserver();
    }
    });

  • #2
    Hallo,
    mit den rootMargin und threshold optionen ist der Schwellenwert justierbar, ab wann der Browser den Listener feuert

    https://developer.mozilla.org/en-US/...n_Observer_API
    https://code.pieces.app/blog/the-jav...ction-observer
    http://www.premium-contao-themes.com

    Kommentar


    • #3
      Ok Danke, das hab ich soweit verstanden, jedoch egal was ich da eintrage.. es ändert sich nichts :-(

      wenn ich z.B. treshold 50% oder 0.5 eingebe.. soll der "schiessen" wenn 50% zu sehen ist... aber wie gesagt, egal was ich eintrage.. die animation kommt immer, sobald schon der 1. Pixel zu sehen ist!
      Zuletzt geändert von sfx12; 03.04.2024, 10:18.

      Kommentar


      • #4
        Die Optionen müssen auf das observer objekt angewendet werden.

        Ich hab mal -100px als rootMargin gesetzt. Damit feuert die Funktion erst nach einem Offset von -100px (bereits sichtbar im Viewport).

        Code:
        function initObserver()
        {
        // @var IntersectionObserver
        var options = {rootMargin: "-100px",threshold: "0.5"};
        var objObserver = new IntersectionObserver( function(entries, observer)
        {
        entries.forEach(function(entry)
        {
        console.log(entry.intersectionRatio);
        if (entry.isIntersecting)
        {
        var element = jQuery(entry.target);
        var animation = element.data("animate");
        element.removeClass('animate').addClass('animated ' + animation).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function ()
        {
        element.removeClass(animation+' animated');
        });
        // stop observing
        objObserver.unobserve( entry.target );
        }
        });
        }, options );
        
        jQuery('.animate').not('.nowaypoint').each(function(i,elem)
        {
        var element = jQuery(elem);
        // remove animations for ios or android
        if(jQuery('body').hasClass('ios') || jQuery('body').hasClass('android'))
        {
        element.removeClass('animate');
        return true;
        }
        else
        {
        objObserver.observe( element[0] );
        }
        });
        }
        Zuletzt geändert von Tim; 04.04.2024, 07:02.
        http://www.premium-contao-themes.com

        Kommentar


        • #5
          ahhh ok, läuft :-)

          Vielen Lieben Dank!

          PS: hier vielleicht das Leerzeichen entfernen, sonst kommts zum Fehler, falls jemand anders das mal braucht :-)

          Code:
          jQuery('.animate').not('.nowaypoint').each(functio n(i,elem)

          Kommentar


          • #6
            Zitat von sfx12 Beitrag anzeigen
            ahhh ok, läuft :-)

            Vielen Lieben Dank!

            PS: hier vielleicht das Leerzeichen entfernen, sonst kommts zum Fehler, falls jemand anders das mal braucht :-)

            Code:
            jQuery('.animate').not('.nowaypoint').each(functio n(i,elem)
            Ah ja, das ist der blöde Editor hier. Frag mich nicht warum der das nach copy and paste so macht.
            http://www.premium-contao-themes.com

            Kommentar

            Lädt...
            X