页面滚动时文字淡出

Question

我已经将这个基本示例工作起来了: http://www.mharrisweb.co.uk/tester.htm 有没有办法让渐变文本略微滚动，以创建更流畅的过渡？

像这个网站一样： http://themetrust.com/demos/hero/ 非常感谢。

- Bomber

---

我在 jsfiddle 上发布了答案，请查看。 - user1968030

基本示例链接已损坏，你能否在 jsfiddle 上分享代码？ - Mike Lyons

Answer 1

使用这个链接

。

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

- user1968030

---

那很好，有没有办法在滚动回页面顶部时再次淡入？ - Bomber

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
        }); 
    });
});

- Gustavo Hoirisch

Answer 3

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

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

- Ruben Infante

Answer 4

使用这个：

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

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

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

还需要这个：

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

它允许您渐变到特定的透明度，而不是完全透明。如果您想要它看起来像您提供的"themetrust.com"示例，那么您将需要它，如果您注意到只滚动一点，它只会淡出一点。

- leftclickben

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//，您将获得页面宽度的某些值。

- Nil_Syami