3

我有这个基本的例子工作：

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

无论如何我可以让褪色的文本稍微滚动，以创造一个更流畅的过渡？

喜欢这个网站：

http://themetrust.com/demos/hero/

非常感谢

4

5 回答 5

3

用这个

var divs = $('.social, .title');
$(window).scroll(function(){
   if($(window).scrollTop()<10){
         divs.stop(true,true).fadeIn("fast");
   } else {
         divs.stop(true,true).fadeOut("fast");
   }
});
于 2013-02-03T11:34:01.210 回答
3

只需像处理不透明度一样操纵文本的边距。

例子：

jQuery(function($) {
    var divs = $('.fade');
    $(window).on('scroll', function() {
        var st = $(this).scrollTop();
        divs.css({ 
            'margin-top' : -(st/3)+"px", 
            'opacity' : 1 - st/35
        }); 
    });
});
于 2013-02-03T11:54:07.113 回答
0

用这个：

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

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

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

你也需要这个：

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

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

于 2013-02-03T11:34:16.483 回答
0

这是结合了一些已经讨论过的想法的东西。

$(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

于 2013-02-03T12:03:38.350 回答
0 

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// 从您希望它淡入的位置检查您将获得页面宽度的某个值

于 2021-04-18T13:44:23.623 回答