Question

我想制作这种滚动效果（链接：http://nicolas-bussiere.com/），但我不知道该怎么做。

我是jQuery的新手，所以我很难理解网站正在使用的复杂代码。我尝试使用Mousewheel插件进行滚动，但我永远无法理解。

我有三个部分是＆＃34;介绍＆＃34;，＆＃34;关于＆＃34;和＆＃34;工作＆＃34;。在＆＃34;作品＆＃34;部分，我有8个不同的项目。

在右侧，我的每个插图都如下所示。

＆＃13;

pom.xml

＆＃13;

我想添加课程＃34;动画＆＃34; on＆＃34; ul＆＃34;当我滚动部分并添加如下所示的样式时。

＆＃13;

<inherits>

＆＃13;

在左侧，我有8＆＃34; line＆＃34;像下面这样的div。

＆＃13;

<!-- ** PROJECTS : RIGHT ** -->
<div class="content illustrations-container">
    <ul class="illustrations">
        <li class="illustration"></li>
        <li class="illustration"></li>
        <li class="illustration"></li>
        <li class="illustration"></li>
        <li class="illustration"></li>
        <li class="illustration"></li>
        <li class="illustration"></li>
        <li class="illustration"></li>
    </ul>
</div>

＆＃13;

我想添加课程＆＃34; .before＆＃34; ＆＃34;。经过＆＃34; ＆＃34; .going式＆＃34; ＆＃34; .going向下＆＃34; ＆＃34; .current＆＃34;在每条＆＃34;线＆＃34;格。

我知道我的解释很粗糙，但我不能写出我写的所有代码。

我参考网站上的代码进行基准测试，并将大部分类我需要的滚动效果放在我的样式表（style.css）上。

Answer 1

您需要做两件事，第一个鼠标滚轮事件：

$('#foo').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta /120 > 0) {
            console.log('scrolling up !');
        }
        else{
            console.log('scrolling down !');
        }
    });

然后您将需要跟踪视口中可见的div

function inViewport (el) {

    var r, html;
    if ( !el || 1 !== el.nodeType ) { return false; }
    html = document.documentElement;
    r = el.getBoundingClientRect();

    return ( !!r 
      && r.bottom >= 0 
      && r.right >= 0 
      && r.top <= html.clientHeight 
      && r.left <= html.clientWidth 
    );
}

然后，当您拥有视口中的元素时，可以向上或向下选择元素并滚动到该元素。

使用jQuery Mousewheel滚动特定部分

1 个答案: