Имам изображение, вградено в контейнер с фоново изображение, което създава ефекта на превъртане в страницата. Първоначално накарах ефекта на превъртане да се появи при зареждане на страницата с този прост фрагмент от скрипт, който работеше перфектно.
$(window).on("load", function () {
$(".embedded_scroller_image").animate({ scrollTop: $('.embedded_scroller_image')[0].scrollHeight}, 2500, "easeInOutCubic");
}); // end on load
Сега обаче елементът е твърде далеч надолу в страницата и искам тази анимация да се задейства, когато елементът влезе в 80% от прозореца за изглед. Тази част също работи добре с този код тук (използвам ограничител на превъртане, за да подобря производителността на браузъра)
// limit scroll call for performance
var scrollHandling = {
allow: true,
reallow: function() {
scrollHandling.allow = true;
},
delay: 500 //(milliseconds) adjust to the highest acceptable value
};
$(window).on('scroll', function() {
var flag = true;
if(scrollHandling.allow) { // call scroll limit
var inViewport = $(window).height()*0.8; // get 80% of viewport
$('.embedded_scroller_image').each(function() { // check each embedded scroller
var distance = $(this).offset().top - inViewport; // check when it reaches offset
if ($(window).scrollTop() >= distance && flag === true ) {
$(this).animate({ scrollTop: $(this)[0].scrollHeight}, 2500, "easeInOutCubic"); //animate embedded scroller
flag = false;
}
});
} // end scroll limit
}); // end window scroll function
Проблемът е следният: искам автоматичното превъртане да се случи веднъж и след това да спре. В момента работи при влизане в прозореца за изглед, но ако след това се опитам ръчно да превъртя изображението, то продължава да се натиска надолу или заеква. Не можете да накарате елемента да превърта нормално. Опитах се да използвам флага в кода, за да спра анимацията, но не успях да го накарам да работи успешно.
Как мога да накарам тази анимация да се задейства, когато елементът е 80% в прозореца за изглед, но след това да спре напълно след един път?
Ето един кодов код, който също измислих http://codepen.io/jphogan/pen/PPQwZL?editors=001 Ако превъртите надолу, ще видите автоматично превъртане на елемента на изображението, когато влезе в прозореца за изглед, но ако се опитате след това да превъртите това изображение нагоре в неговия контейнер, това няма да работи.
Благодаря!