Question

我试图在此视频中找到完成动画的脚本或代码：

https://www.dropbox.com/s/pqm73qmee0jt25z/Colour%20Change%20Hover.mov?dl=0

我需要帮助的是从一个图像到另一个图像的过渡。注意彩色标题部分中的第一个图像是如何单独的，然后下面的所有其他图像重叠一点。此外，当用户滚动时，请注意图像以不同于滚动的速度移动的效果。

类似于，在用户滚动时捕捉到视图中最多的图像部分，然后显示文本并在该快照期间应用视频中的图像叠加/移动动画。

希望有一个我可以使用的插件让我接近。如果可以像这样调用它会很棒：

$( window ).scroll( function() {
  scrollSnap();
});

更新：在这里处理JSFiddle：https://jsfiddle.net/bmarshall511/6onLajw8/

Answer 1

我不知道插件。但是如果你想投入一点时间来理解概念并能够自己构建它，那么有一个很棒的系列可以帮助我建立类似的效果：DevTips Parallax

他通过不同的效果，然后将一个网站与他们放在一起。您在视频中显示的效果将在系列的第2个视频（标题）中介绍。区别在于，基于屏幕位置，元素以不同的速度滚动（更高的滚动速度更快），但这只是一些数学，您可以将它添加到滚动脚本中。

Answer 2

在尝试提出解决方案一天之后，我想我已经非常接近：http://jsfiddle.net/bmarshall511/6onLajw8/

使用插件组合使其正常工作。

var homepageSlides        = $( '.homepage-slide' ),
    headerHeight          = 120,
    rowHeight             = 227;

/**
 * Showing/Hiding Content & Snapping 
 */

function toggleContent() {
    currentScrollPosition = $( window ).scrollTop();
  windowHeight          = $( window ).height();
  firstElement          = false;

  var cnt = 0;
    homepageSlides.each( function() {
        var element = $( this ), 
        offset = element.offset();

    if ( 
      currentScrollPosition <= offset.top &&
      ( element.height() + offset.top ) - rowHeight < ( currentScrollPosition + windowHeight ) && 
      firstElement == false 
    ) {
      element.addClass( 'homepage-slide--active' );
      firstElement = true;
    } else {      
      firstElement = false;
      element.removeClass( 'homepage-slide--active' );
    }
    cnt++;

    if ( cnt == homepageSlides.length && $( '.homepage-slide--active' ).length ) {
        var activeSlide = $( '.homepage-slide--active' );

        $( '#homepage-title' ).text( activeSlide.data( 'section' ) )
                            .css( 'color', activeSlide.data( 'color' ) );

      $( window ).off( 'scroll' );
      $( 'html, body' ).stop().animate( { 
        scrollTop: $( '.homepage-slide--active' ).offset().top - headerHeight
      }, 300, "swing", function() {

        activeSlide.addClass( 'homepage-slide--show' );

        $( window ).scroll( startedScrolling );
      });
    }
    });
}

/**
 * Initialize Scrolling Callback
 */

toggleContent();

// When user scrolls, start the magic...
function startedScrolling() {
    homepageSlides.removeClass( 'homepage-slide--show' );
  //$( 'html, body' ).stop();

  clearTimeout( $.data( this, 'scrollTimer' ) );
  $.data( this, 'scrollTimer', setTimeout( function() {
    // When scrolling done...
    doneScrolling()
  }, 100 ) );
}

function doneScrolling() {
    toggleContent();
}

$( window ).scroll( startedScrolling );

JS / CSS图像动画滚动效果

2 个答案: