JS/CSS图像动画滚动效果

JS/CSS image animation scrolling effect

本文关键字：滚动 动画 图像 CSS JS      更新时间：2023-09-26

我正试图找到一个脚本或代码之一，完成这个视频中的动画:

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

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

就像，当用户滚动到视图中最显眼的图像部分，然后显示文本，并在此期间在视频中应用图像覆盖/移动动画。

希望有一个插件我可以使用，让我接近。如果可以这样命名就好了:

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

更新:在这里工作的JSFiddle: https://jsfiddle.net/bmarshall511/6onLajw8/

我不知道插件。但如果你想花一点时间去理解这些概念，并能够自己构建它，有一个很棒的系列可以帮助我构建类似的效果:DevTips Parallax

他通过不同的效果，然后把一个网站与他们在一起。您在视频中展示的效果将在本系列的第二个视频(标题)中介绍。不同之处在于，基于屏幕位置，元素以不同的速度滚动(越高滚动得越快)，但这只是一些数学运算，您可以将其添加到滚动脚本中。

经过一天的努力想出一个解决方案，我想我已经很接近了: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 );
相关文章：