Animate in on scroll "versetzt" ?

[sfx12]

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.

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();
}
});

[Tim]

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

[sfx12]

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!

[Tim]

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).

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] );
}
});
}

[sfx12]

ahhh ok, läuft :-)

Vielen Lieben Dank!

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

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

[Tim]

ahhh ok, läuft :-)

Vielen Lieben Dank!

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

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.