Автоматично превъртане на вграден прозорец само веднъж при влизане в прозореца за изглед. Не може да превърти обратно нагоре

Имам изображение, вградено в контейнер с фоново изображение, което създава ефекта на превъртане в страницата. Първоначално накарах ефекта на превъртане да се появи при зареждане на страницата с този прост фрагмент от скрипт, който работеше перфектно.

 $(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 Ако превъртите надолу, ще видите автоматично превъртане на елемента на изображението, когато влезе в прозореца за изглед, но ако се опитате след това да превъртите това изображение нагоре в неговия контейнер, това няма да работи.

Благодаря!


person jphogan    schedule 22.10.2015    source източник


Отговори (1)


Промених малко скрипта ви:

// 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() {

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 ) {
            $(this).animate({ scrollTop: $(this)[0].scrollHeight}, 2500, "easeInOutCubic"); //animate embedded scroller
            scrollHandling.allow = false;
        } 

    });

} // end scroll limit

}); // end window scroll function

Изхвърлих вашия флаг и просто използвах вече декларирания scrollHandling.allow.

Пробвай ако ти върши работа :)

наздраве!

person CodeGems    schedule 22.10.2015
comment
Страхотно! Работи перфектно. Каква проста корекция .. която вероятно никога нямаше да намеря :) - person jphogan; 22.10.2015