非线性渐变卷轴？

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油漆表示歉意)。

​

​

我绝对不是个代数家。我怎样才能做到这一点？

Answer 1

从这个站点的公式开始：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;

当您的div位于页面顶部时，“当前时间”开始。前面是0(负值)，后面是正值(滚动像素)。

B=起始值

是1，你的开始不透明

C=价值变化

更改起始值-1 (1-1 =0不透明)

D=持续时间

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

现在，您已经具备了创建自定义动画的所有简化功能。

​

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

#scroll {
  color: red;
}

<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.

​

Answer 2

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

试试那种“类似”的东西。您可能希望将任何高度“修饰符”放在变量中。我也不是数学大师。