Question

当我滚动它时，如何在网站上稍微移动图像。

Apple已经在他们网站的许多地方这样做了。

http://www.apple.com/ipad-pro/

IE中。转到iPad Pro网站并向下滚动到A9X芯片部分。您可以看到iPad的移动速度比滚动到滚动方向的速度要快一些。上或下。非常微妙的举动，但非常整洁。

因此，图像必须在视野中移动。我已经使用下面的代码在视图中添加in-view类，而在不在视图时将其删除。现在它需要根据滚动来移动...

  var $animation_elements = $('img');
  var $window = $(window);

  function check_if_in_view() {
    var window_height = $window.height();
    var window_top_position = $window.scrollTop();
    var window_bottom_position = (window_top_position + window_height);

    $.each($animation_elements, function() {
      var $element = $(this);
      var element_height = $element.outerHeight();
      var element_top_position = $element.offset().top;
      var element_bottom_position = (element_top_position + element_height);

      //check to see if this current container is within viewport
      if ((element_bottom_position >= window_top_position) &&
        (element_top_position <= window_bottom_position)) {
        $element.addClass('in-view');
      } else {
        $element.removeClass('in-view');
      }
    });
  }

  $window.on('scroll resize', check_if_in_view);
  $window.trigger('scroll');

Answer 1

似乎skrollr.js是完美的插件。这是我为演示创建的笔的链接。 http://codepen.io/anon/pen/VaVMeN

和脚本

skrollr.init({
  forceHeight: false,
  smoothScrollingDuration: 1000
});

你可以在这里获得skrollr： https://github.com/Prinzhorn/skrollr

滚动时图像在网站上移动

1 个答案: