将不同的动画与Skrollr.js合并为一个元素

Question

我的页面结构如下：

<div id="skrollr-body">
<div class="sections-container" id="sections-portrait">
    <div class="section" id="section_1">
        Section 1
        <div class="baloon"
             data-anchor-target="#section_1 .baloon"
             data-center-top="bottom: -20%"
             data-top="bottom: 50%"
        ></div>
    </div>
    <div class="section" id="section_2">
        Section 2
    </div>
    <div class="section" id="section_3">
        Section 3
    </div>
    <div class="section" id="section_4">
        Section 4
    </div>
</div>
<div class="sections-container" id="sections-landscape"></div>

注意带有baloon类的div。我希望它从底部到顶部（它目前正在进行），过了一会儿再往前走一点。是否有可能使用Skrollr.js，如果是 - 如何？

Answer 1

此处的演示CodePen DEMO
好吧，我没有使用Skrollr.js插件，但尝试没有它jQuery和Css 截面显示几秒后Baloon从底部到顶部和中间移动

对滚动和webtransitionend src的辩论  大卫沃尔什的作用：                transitionEnd Callback                Debounce on wheel

＆＃13;

＆＃13;

debounce = function(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

// Function from David Walsh: http://davidwalsh.name/css-animation-callback
function whichTransitionEvent() {
  var t,
    el = document.createElement("fakeelement");

  var transitions = {
    "transition": "transitionend",
    "OTransition": "oTransitionEnd",
    "MozTransition": "transitionend",
    "WebkitTransition": "webkitTransitionEnd"
  }

  for (t in transitions) {
    if (el.style[t] !== undefined) {
      return transitions[t];
    }
  }
}

var transitionEvent = whichTransitionEvent();

var winH = $(window).height();
$(document).ready(function() {

  $('.section').height(winH);
  var updateLay = debounce(function(e) {
    callback(e);
  }, 500);
  $(window).on('wheel DOMMouseScroll', function(e) {
    updateLay(e);

  });
  obj.textTransiton();
  animLoop();

})
var globalSetting = {
  y: 0,
  delta: 0,
  maxScroll: 0,
  moved: false
}

function callback(event) {
  var delta = Math.sign(event.originalEvent.wheelDelta) || -Math.sign(event.originalEvent.detail);

  globalSetting.y += delta * winH;

  globalSetting.delta = delta;

  obj.move(obj.textTransiton);

}

function checkScrollExtents() {

  if (globalSetting.y > 0) {
    globalSetting.y = 0;
  } else if (Math.abs(globalSetting.y) > globalSetting.maxScroll) {
    globalSetting.y = -globalSetting.maxScroll;

  }

}

function animLoop() {

  globalSetting.maxScroll = obj.selector.height() - obj.selector.find('.section:last').height();
  checkScrollExtents();
  obj.scrolls();

  window.requestAnimationFrame(animLoop);
}

var obj = {
  'selector': $('#skrollr-body'),
  'current': $('.current'),
  scrolls: function() {
    obj.vertical();
  },
  vertical: function() {
    obj.selector.css('transform', 'translateY(' + globalSetting.y + 'px)');

  },
  textTransiton: function() {
    var baloon = obj.current.find('.baloon');
    baloon.css('transform', 'translateY(-' + winH + 'px)');
    baloon.one(transitionEvent, function(event) {
      baloon.css('transform', 'translateY(-' + (winH / 2) + 'px)');
    });
  },
  move: function(callback) {

    if (globalSetting.delta > 0) {
      obj.Prev(callback);
    } else {
      obj.Next(callback);
    }

  },
  Prev: function(c) {
    if (obj.current.prev().length) {
      var currt = obj.current.prev();
      obj.updateCurrentModule(currt);
      setTimeout(function() {
        c();
      }, 1000);
    }
  },
  Next: function(c) {
    if (obj.current.next().length) {
      var currt = obj.current.next();
      obj.updateCurrentModule(currt);
      setTimeout(function() {
        c();
      }, 1000);
    }
  },
  updateCurrentModule: function(currt) {
    obj.current.removeClass('current');
    obj.current.find('.baloon').css({
      "-webkit-transform": "translateY(0px)"
    });
    currt.addClass('current');
    obj.current = currt;
  },

};

＆＃13;

html,
body {
  margin: 0;
  overflow: hidden;
}

div {
  transition: all 600ms ease-in !important;
}

.section {
  position: relative;
  color: white;
  background-size: contain;
  min-height: 100%;
  white-space: nowrap;
  position: relative;
  min-width: 100%;
}

.baloon {
  font-size: 10em;
  color: #020000;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  bottom: 0px;
  position: absolute;
  margin: 0;
  transition: all 1000ms cubic-bezier(0.32, 0.51, 0.78, 0.34) !important;
  border: 1px solid;
  background-color: white;
  mix-blend-mode: exclusion;
  width: 100%;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="skrollr-body">
  <div class="sections-container" id="sections-portrait">
    <div class="section current" id="section_1" style="background-image: url(http://img13.deviantart.net/83ee/i/2014/145/5/e/naruto_negative_space_poster_by_jde_studios-d7jrnhc.jpg);">

      <div class="baloon">
        Naruto
      </div>
    </div>
    <div class="section" id="section_2" style="background-image: url(http://www.jeffreydavidson.com.au/images/blogs/naruto-negative-space-posters/sasuke-negative-space.jpg);">
      <div class="baloon">
        Sasuke
      </div>
    </div>
    <div class="section" id="section_3" style="background-image: url(https://s-media-cache-ak0.pinimg.com/736x/2f/2f/ef/2f2fefdccc4688ab3d640b65cca02d47.jpg);">
      <div class="baloon">
        Kakashi
      </div>
    </div>
    <div class="section" id="section_4" style="background-image: url(http://www.jeffreydavidson.com.au/images/blogs/naruto-negative-space-posters/sakura-negative-space.jpg);">
      <div class="baloon">
        Sakura
      </div>
    </div>
  </div>
  <div class="sections-container" id="sections-landscape"></div>
</div>

＆＃13;

＆＃13;

＆＃13;