滚动时的非线性淡入淡出？

Question

我正在使用以下代码在您滚动浏览元素时调整元素的不透明度：

$(window).scroll(function () {
    this = myfadingdiv
    var height = $(this).height();
    var offset = $(this).offset().top;
    var opacity = (height - homeTop + offset) / height;
    $(this).css("opacity", opacity);
});

效果很好，但它是线性的。提出要求让它“更快”消失。

我希望它表现得更像这样（抱歉粗糙的MS Paint）。

我绝对不是代数人。我怎么能做到这一点？

Answer 1

var height = $(this).height();
var offset = $(this).offset().top;
var opacity = (height - homeTop + offset) / (height * .9);
$(this).css("opacity", opacity);

尝试“喜欢”的东西。您可能想要将高度“修饰符”放在变量中。我也不是数学大师。

Answer 2

从此网站的公式开始：http://gizma.com/easing/

您可以通过以下方式计算宽松度：

线性补间

linearTween = function (t, b, c, d) {
    return c*t/d + b;
};

  

t =当前时间

var t = $(window).scrollTop() - offset;
t = t < 0 ? 0 : t;

＆＃34;当前时间＆＃34;当您的div位于页面顶部时开始。之前是0（负值），在值为正（滚动像素）之后。

  

b =起始值

是1，你的开始不透明度

  

c =价值变动

更改-1的起始值（1-1 = 0不透明度）

  

d =持续时间

滚动所有div的时间结束，持续时间是div的高度

现在您拥有了用于创建自定义动画的所有缓动功能

＆＃13;

＆＃13;

$(window).scroll(function() {
  var height = $('#scroll').height();
  var offset = $('#scroll').offset().top;

  var opacity;
  //opacity = (height - $(window).scrollTop() + offset) / height;

  var t = $(window).scrollTop() - offset;
  t = t < 0 ? 0 : t;

  opacity = easeOutCirc(t, 1, -1, height);

  $('#scroll').css("opacity", opacity);

});

/* SOME EASING */

linearTween = function(t, b, c, d) {
  return c * t / d + b;
};

easeInQuad = function(t, b, c, d) {
  t /= d;
  return c * t * t + b;
};

easeInOutCirc = function(t, b, c, d) {
  t /= d / 2;
  if (t < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
  t -= 2;
  return c / 2 * (Math.sqrt(1 - t * t) + 1) + b;
};

easeOutCirc = function(t, b, c, d) {
  t /= d;
  t--;
  return c * Math.sqrt(1 - t * t) + b;
};

＆＃13;

#scroll {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Sed placerat consequat suscipit. In et diam in mi auctor viverra vel commodo tortor. Suspendisse at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta quis purus non, euismod varius sem. Aenean condimentum
ullamcorper turpis, ac auctor elit. In hac habitasse platea dictumst. Fusce vel semper tellus. Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et tellus. Vestibulum vel auctor leo, at scelerisque ante. Nullam
augue leo, cursus vitae mattis eget, euismod sit amet leo. Integer at commodo purus, a egestas eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean a euismod nibh, sit amet vulputate erat. Integer nec sapien felis.
Aliquam bibendum egestas aliquet. Nunc tincidunt sapien sed odio mattis pulvinar id mattis enim. Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis risus vel, rhoncus turpis. Suspendisse condimentum orci id diam
hendrerit, eu laoreet sem pharetra. Sed nec pharetra diam. Vivamus vel massa ante. Sed non leo urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum elit.


<div id="scroll">
  Phasellus mattis nulla eget neque dapibus, mattis mollis elit consequat. Nulla facilisi. Nullam ut nulla eu augue luctus viverra. Proin dictum rhoncus finibus. Nulla sed luctus libero, eget sollicitudin purus. Ut pharetra quis neque vel vehicula. Curabitur
  fermentum, nibh ac efficitur fringilla, libero augue tempus dolor, in vehicula odio sem in felis. In eu feugiat dui. Aenean est elit, pulvinar sit amet pretium ut, vestibulum non felis. In ullamcorper ullamcorper erat, a aliquam urna finibus et. Curabitur
  lobortis dapibus aliquam. Phasellus fringilla augue eget dui condimentum, ac ultricies ligula sodales. Aenean et nisi ut ante maximus porta. Cras sollicitudin blandit purus, eget varius dui. Donec in metus erat. Morbi eget ex dolor. Aenean tellus turpis,
  suscipit eu eros vel, ornare feugiat nibh. Suspendisse gravida nunc sem. Cras egestas vestibulum sem at convallis. Nunc eu cursus massa, sed aliquam libero. Sed placerat consequat suscipit. In et diam in mi auctor viverra vel commodo tortor. Suspendisse
  at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta quis purus non, euismod varius sem. Aenean condimentum ullamcorper turpis, ac auctor elit. In hac habitasse platea dictumst. Fusce vel semper tellus.
  Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et tellus. Vestibulum vel auctor leo, at scelerisque ante. Nullam augue leo, cursus vitae mattis eget, euismod sit amet leo. Integer at commodo purus, a
  egestas eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean a euismod nibh, sit amet vulputate erat. Integer nec sapien felis. Aliquam bibendum egestas aliquet. Nunc tincidunt sapien sed odio mattis pulvinar id
  mattis enim. Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis risus vel, rhoncus turpis. Suspendisse condimentum orci id diam hendrerit, eu laoreet sem pharetra. Sed nec pharetra diam. Vivamus vel massa ante.
  Sed non leo urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec ante aliquet, lacinia risus ac, tristique ipsum. Nam porttitor sed orci
  nec volutpat. Etiam finibus enim felis, at lacinia dui tempor at. Sed sem nulla, feugiat sed imperdiet quis, imperdiet nec felis. Nullam eget suscipit tortor. Suspendisse maximus nec sapien id placerat. Cras ullamcorper enim quis blandit sodales. Fusce
  ullamcorper turpis libero, quis facilisis arcu condimentum sit amet. Etiam vitae luctus turpis, sed maximus nisl. Maecenas cursus tellus mattis eros placerat pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
  mus. Aliquam sit amet enim dolor. Ut et nisi quis urna congue rutrum. Phasellus mattis nulla eget neque dapibus, mattis mollis elit consequat. Nulla facilisi. Nullam ut nulla eu augue luctus viverra. Proin dictum rhoncus finibus. Nulla sed luctus libero,
  eget sollicitudin purus. Ut pharetra quis neque vel vehicula. Curabitur fermentum, nibh ac efficitur fringilla, libero augue tempus dolor, in vehicula odio sem in felis. In eu feugiat dui. Aenean est elit, pulvinar sit amet pretium ut, vestibulum non
  felis. In ullamcorper ullamcorper erat, a aliquam urna finibus et. Curabitur lobortis dapibus aliquam. Phasellus fringilla augue eget dui condimentum, ac ultricies ligula sodales. Aenean et nisi ut ante maximus porta. Cras sollicitudin blandit purus,
  eget varius dui. Donec in metus erat. Morbi eget ex dolor. Aenean tellus turpis, suscipit eu eros vel, ornare feugiat nibh. Suspendisse gravida nunc sem. Cras egestas vestibulum sem at convallis. Nunc eu cursus massa, sed aliquam libero. Sed placerat
  consequat suscipit. In et diam in mi auctor viverra vel commodo tortor. Suspendisse at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta quis purus non, euismod varius sem. Aenean condimentum ullamcorper
  turpis, ac auctor elit. In hac habitasse platea dictumst. Fusce vel semper tellus. Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et tellus. Vestibulum vel auctor leo, at scelerisque ante. Nullam augue
  leo, cursus vitae mattis eget, euismod sit amet leo. Integer at commodo purus, a egestas eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean a euismod nibh, sit amet vulputate erat. Integer nec sapien felis. Aliquam
  bibendum egestas aliquet. Nunc tincidunt sapien sed odio mattis pulvinar id mattis enim. Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis risus vel, rhoncus turpis. Suspendisse condimentum orci id diam hendrerit,
  eu laoreet sem pharetra. Sed nec pharetra diam. Vivamus vel massa ante. Sed non leo urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
  nec ante aliquet, lacinia risus ac, tristique ipsum. Nam porttitor sed orci nec volutpat. Etiam finibus enim felis, at lacinia dui tempor at. Sed sem nulla, feugiat sed imperdiet quis, imperdiet nec felis. Nullam eget suscipit tortor. Suspendisse maximus
  nec sapien id placerat. Cras ullamcorper enim quis blandit sodales. Fusce ullamcorper turpis libero, quis facilisis arcu condimentum sit amet. Etiam vitae luctus turpis, sed maximus nisl. Maecenas cursus tellus mattis eros placerat pulvinar. Orci varius
  natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sit amet enim dolor. Ut et nisi quis urna congue rutrum. Phasellus mattis nulla eget neque dapibus, mattis mollis elit consequat. Nulla facilisi. Nullam ut nulla eu augue
  luctus viverra. Proin dictum rhoncus finibus. Nulla sed luctus libero, eget sollicitudin purus. Ut pharetra quis neque vel vehicula. Curabitur fermentum, nibh ac efficitur fringilla, libero augue tempus dolor, in vehicula odio sem in felis. In eu feugiat
  dui. Aenean est elit, pulvinar sit amet pretium ut, vestibulum non felis. In ullamcorper ullamcorper erat, a aliquam urna finibus et. Curabitur lobortis dapibus aliquam. Phasellus fringilla augue eget dui condimentum, ac ultricies ligula sodales. Aenean
  et nisi ut ante maximus porta. Cras sollicitudin blandit purus, eget varius dui. Donec in metus erat. Morbi eget ex dolor. Aenean tellus turpis, suscipit eu eros vel, ornare feugiat nibh. Suspendisse gravida nunc sem. Cras egestas vestibulum sem at
  convallis. Nunc eu cursus massa, sed aliquam libero. Sed placerat consequat suscipit. In et diam in mi auctor viverra vel commodo tortor. Suspendisse at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta
  quis purus non, euismod varius sem. Aenean condimentum ullamcorper turpis, ac auctor elit. In hac habitasse platea dictumst. Fusce vel semper tellus. Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et
  tellus. Vestibulum vel auctor leo, at scelerisque ante. Nullam augue leo, cursus vitae mattis eget, euismod sit amet leo. Integer at commodo purus, a egestas eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean
  a euismod nibh, sit amet vulputate erat. Integer nec sapien felis. Aliquam bibendum egestas aliquet. Nunc tincidunt sapien sed odio mattis pulvinar id mattis enim. Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis
  risus vel, rhoncus turpis. Suspendisse condimentum orci id diam hendrerit, eu laoreet sem pharetra. Sed nec pharetra diam. Vivamus vel massa ante. Sed non leo urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum
  elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec ante aliquet, lacinia risus ac, tristique ipsum. Nam porttitor sed orci nec volutpat. Etiam finibus enim felis, at lacinia dui tempor at. Sed sem nulla, feugiat sed imperdiet
  quis, imperdiet nec felis. Nullam eget suscipit tortor. Suspendisse maximus nec sapien id placerat. Cras ullamcorper enim quis blandit sodales. Fusce ullamcorper turpis libero, quis facilisis arcu condimentum sit amet. Etiam vitae luctus turpis, sed
  maximus nisl. Maecenas cursus tellus mattis eros placerat pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sit amet enim dolor. Ut et nisi quis urna congue rutrum.


</div>

Phasellus mattis nulla eget neque dapibus, mattis mollis elit consequat. Nulla facilisi. Nullam ut nulla eu augue luctus viverra. Proin dictum rhoncus finibus. Nulla sed luctus libero, eget sollicitudin purus. Ut pharetra quis neque vel vehicula. Curabitur
fermentum, nibh ac efficitur fringilla, libero augue tempus dolor, in vehicula odio sem in felis. In eu feugiat dui. Aenean est elit, pulvinar sit amet pretium ut, vestibulum non felis. In ullamcorper ullamcorper erat, a aliquam urna finibus et. Curabitur
lobortis dapibus aliquam. Phasellus fringilla augue eget dui condimentum, ac ultricies ligula sodales. Aenean et nisi ut ante maximus porta. Cras sollicitudin blandit purus, eget varius dui. Donec in metus erat. Morbi eget ex dolor. Aenean tellus turpis,
suscipit eu eros vel, ornare feugiat nibh. Suspendisse gravida nunc sem. Cras egestas vestibulum sem at convallis. Nunc eu cursus massa, sed aliquam libero. Sed placerat consequat suscipit. In et diam in mi auctor viverra vel commodo tortor. Suspendisse
at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta quis purus non, euismod varius sem. Aenean condimentum ullamcorper turpis, ac auctor elit. In hac habitasse platea dictumst. Fusce vel semper tellus.
Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et tellus. Vestibulum vel auctor leo, at scelerisque ante. Nullam augue leo, cursus vitae mattis eget, euismod sit amet leo. Integer at commodo purus, a egestas
eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean a euismod nibh, sit amet vulputate erat. Integer nec sapien felis. Aliquam bibendum egestas aliquet. Nunc tincidunt sapien sed odio mattis pulvinar id mattis enim.
Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis risus vel, rhoncus turpis. Suspendisse condimentum orci id diam hendrerit, eu laoreet sem pharetra. Sed nec pharetra diam. Vivamus vel massa ante. Sed non leo
urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec ante aliquet, lacinia risus ac, tristique ipsum. Nam porttitor sed orci nec volutpat.
Etiam finibus enim felis, at lacinia dui tempor at. Sed sem nulla, feugiat sed imperdiet quis, imperdiet nec felis. Nullam eget suscipit tortor. Suspendisse maximus nec sapien id placerat. Cras ullamcorper enim quis blandit sodales. Fusce ullamcorper
turpis libero, quis facilisis arcu condimentum sit amet. Etiam vitae luctus turpis, sed maximus nisl. Maecenas cursus tellus mattis eros placerat pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam
sit amet enim dolor. Ut et nisi quis urna congue rutrum. Phasellus mattis nulla eget neque dapibus, mattis mollis elit consequat. Nulla facilisi. Nullam ut nulla eu augue luctus viverra. Proin dictum rhoncus finibus. Nulla sed luctus libero, eget sollicitudin
purus. Ut pharetra quis neque vel vehicula. Curabitur fermentum, nibh ac efficitur fringilla, libero augue tempus dolor, in vehicula odio sem in felis. In eu feugiat dui. Aenean est elit, pulvinar sit amet pretium ut, vestibulum non felis. In ullamcorper
ullamcorper erat, a aliquam urna finibus et. Curabitur lobortis dapibus aliquam. Phasellus fringilla augue eget dui condimentum, ac ultricies ligula sodales. Aenean et nisi ut ante maximus porta. Cras sollicitudin blandit purus, eget varius dui. Donec
in metus erat. Morbi eget ex dolor. Aenean tellus turpis, suscipit eu eros vel, ornare feugiat nibh. Suspendisse gravida nunc sem. Cras egestas vestibulum sem at convallis. Nunc eu cursus massa, sed aliquam libero. Sed placerat consequat suscipit. In
et diam in mi auctor viverra vel commodo tortor. Suspendisse at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta quis purus non, euismod varius sem. Aenean condimentum ullamcorper turpis, ac auctor elit.
In hac habitasse platea dictumst. Fusce vel semper tellus. Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et tellus. Vestibulum vel auctor leo, at scelerisque ante. Nullam augue leo, cursus vitae mattis
eget, euismod sit amet leo. Integer at commodo purus, a egestas eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean a euismod nibh, sit amet vulputate erat. Integer nec sapien felis. Aliquam bibendum egestas aliquet.
Nunc tincidunt sapien sed odio mattis pulvinar id mattis enim. Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis risus vel, rhoncus turpis. Suspendisse condimentum orci id diam hendrerit, eu laoreet sem pharetra.
Sed nec pharetra diam. Vivamus vel massa ante. Sed non leo urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec ante aliquet, lacinia risus
ac, tristique ipsum. Nam porttitor sed orci nec volutpat. Etiam finibus enim felis, at lacinia dui tempor at. Sed sem nulla, feugiat sed imperdiet quis, imperdiet nec felis. Nullam eget suscipit tortor. Suspendisse maximus nec sapien id placerat. Cras
ullamcorper enim quis blandit sodales. Fusce ullamcorper turpis libero, quis facilisis arcu condimentum sit amet. Etiam vitae luctus turpis, sed maximus nisl. Maecenas cursus tellus mattis eros placerat pulvinar. Orci varius natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Aliquam sit amet enim dolor. Ut et nisi quis urna congue rutrum. Phasellus mattis nulla eget neque dapibus, mattis mollis elit consequat. Nulla facilisi. Nullam ut nulla eu augue luctus viverra. Proin dictum
rhoncus finibus. Nulla sed luctus libero, eget sollicitudin purus. Ut pharetra quis neque vel vehicula. Curabitur fermentum, nibh ac efficitur fringilla, libero augue tempus dolor, in vehicula odio sem in felis. In eu feugiat dui. Aenean est elit, pulvinar
sit amet pretium ut, vestibulum non felis. In ullamcorper ullamcorper erat, a aliquam urna finibus et. Curabitur lobortis dapibus aliquam. Phasellus fringilla augue eget dui condimentum, ac ultricies ligula sodales. Aenean et nisi ut ante maximus porta.
Cras sollicitudin blandit purus, eget varius dui. Donec in metus erat. Morbi eget ex dolor. Aenean tellus turpis, suscipit eu eros vel, ornare feugiat nibh. Suspendisse gravida nunc sem. Cras egestas vestibulum sem at convallis. Nunc eu cursus massa,
sed aliquam libero. Sed placerat consequat suscipit. In et diam in mi auctor viverra vel commodo tortor. Suspendisse at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta quis purus non, euismod varius
sem. Aenean condimentum ullamcorper turpis, ac auctor elit. In hac habitasse platea dictumst. Fusce vel semper tellus. Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et tellus. Vestibulum vel auctor leo,
at scelerisque ante. Nullam augue leo, cursus vitae mattis eget, euismod sit amet leo. Integer at commodo purus, a egestas eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean a euismod nibh, sit amet vulputate erat.
Integer nec sapien felis. Aliquam bibendum egestas aliquet. Nunc tincidunt sapien sed odio mattis pulvinar id mattis enim. Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis risus vel, rhoncus turpis. Suspendisse
condimentum orci id diam hendrerit, eu laoreet sem pharetra. Sed nec pharetra diam. Vivamus vel massa ante. Sed non leo urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum elit.

＆＃13;

＆＃13;

＆＃13;