Question

当用户在此网站http://couleecreative.com/上滚动鼠标时，有没有人知道如何让div中的某些单词消失。在这种情况下，我希望生效像“你好，我们是coulee创意”。无论是使用css3还是jquery，如果你能告诉我，我真的很感激。对不起，我是网页设计的业余爱好者

Answer 1

由于您所呈现的示例逐渐更改了不透明度，我建议使用基于窗口滚动位置和要隐藏的元素位置进行计算的解决方案。例如，

http://jsfiddle.net/dva2H/

$(document).ready(function () {
    var elemSelector = "#header-content";
    $(window).scroll(function (e) {
        var elemTop = $(elemSelector).offset().top;
        var elemBottom = elemTop + $(elemSelector).height();
        var windowPos = $(window).scrollTop();
        if(windowPos>=elemTop){
            $(elemSelector).css("opacity",(elemBottom-windowPos<0?0:elemBottom-windowPos)/elemBottom);
        }else{
            $(elemSelector).css("opacity",1);
        }

    });

});

Answer 2

您可以使用：

$(window).scroll(fn)

获取窗口的滚动事件。

您可以检查以下值：

$(window).scrollTop()

查看滚动位置是否位于顶部。

然后，您可以使用.hide()或.show()或其他一些调整大小选项，根据滚动位置隐藏或显示页面中的内容。

以下是一个简化示例：http://jsfiddle.net/jfriend00/QZy55/

Answer 3

我相信这种技术被称为Parallax Scrolling，有几个资源可以提供这方面的例子（如果你只是谷歌“Parallax Scrolling”）和这样的教程：http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/

当用户滚动鼠标时，如何使Div内部的单词消失？

3 个答案: