Question

我有这个基本的例子：

http://www.mharrisweb.co.uk/tester.htm

无论如何，我可以让褪色的文字略微滚动，以创造一个更流畅的tranisiton？

喜欢这个网站：

非常感谢

Answer 1

使用this

var divs = $('.social, .title');
$(window).scroll(function(){
   if($(window).scrollTop()<10){
         divs.stop(true,true).fadeIn("fast");
   } else {
         divs.stop(true,true).fadeOut("fast");
   }
});

Answer 2

只需像操作不透明度那样操纵文本的边距。

示例：

jQuery(function($) {
    var divs = $('.fade');
    $(window).on('scroll', function() {
        var st = $(this).scrollTop();
        divs.css({ 
            'margin-top' : -(st/3)+"px", 
            'opacity' : 1 - st/35
        }); 
    });
});

Answer 3

使用此：

http://api.jquery.com/animate/

它允许您平滑地将元素移动到给定的坐标，您可以使用以下方法确定：

http://api.jquery.com/scrollTop/

你也需要这个：

http://api.jquery.com/fadeTo/

它允许您淡入特定的透明度，而不是一直到完全透明。如果您希望它看起来像您给出的“themetrust.com”示例，如果您注意到只滚动了一点，那么它将需要这个，它只会消失一点

Answer 4

这里结合了一些已经讨论过的想法。

$(window).scroll(function(){
    var top = ($(window).scrollTop() > 0) ? $(window).scrollTop() : 1;
    $('.fade').stop(true, true).fadeTo(0, 1 / top);
    $('.fade').css('top', top * 1.3);             
});

jsfiddle

Answer 5

window.onscroll = function() {
    scrollFunction()
};

function scrollFunction() {
  if (window.scrollY >= 259 && window.scrollY <= 838) {
    document.querySelector(".elegance").style.left = "50%";
  } else {
    document.querySelector(".elegance").style.left = "-500%";
  }
}

top:50%;
        left:-50%;
        transform: translate(-50%,-50%);
        width: 60% !important;
        transition:  left 1.3s linear;

<块引用>

只需使用开发人员工具和使用 //window.scrollY// 检查您希望它从哪里淡入，您将获得页面宽度的特定值

页面滚动时淡出文本

5 个答案: