Question

不幸的是，我不是一个jQuery大师，我正在尝试重新创建媒体上的图像淡入淡出/模糊。这是一个例子 - https://medium.com/matter/76d9913c6011

如果向下滚动页面，您会注意到一些图像，在滚动时逐渐淡入/淡出。在检查代码时，我注意到有两个版本的图像用于创建效果，一个是常规版本，另一个版本已经模糊。

据我所知，事情是这样设置的：

<section class=
"section-bottom-center section-image-full section-using-canvas"
data-scroll="native">
    <div class="section-background" data-height="2130" data-image-id=
    "1*ladXngaMeWEqp1R18uSSQA.jpeg" data-scroll="post-section" data-width=
    "3200">
        <div class="section-background-image" style=
        "background-image: url(https://d262ilb51hltx0.cloudfront.net/max/700/gradv/29/81/40/1*ladXngaMeWEqp1R18uSSQA.jpeg);">
        </div><br>
    </div>

    <div class="section-inner layout-single-column">
        <p>SOME TEXT THAT FADES OVER THE IMAGE</p>
    </div>
</section>

我发现了一些jQuery，遗憾的是我并没有真正理解它，所以我无法重新创建它。

var qm = function(a, b) {
  var c = '\x3cdiv class\x3d"section-background' + (a.hasFocus ? " media-has-focus" : "") + '"' + ("section-image-full" == a.imageLayout ? ' data-scroll\x3d"post-section"' : "") + 'data-image-id\x3d"' + (0,z.N)(a.backgroundImage.id) + '"', d;
  d = a.backgroundImage;
  d = (d.originalWidth ? ' data-width\x3d"' + (0,z.N)(d.originalWidth) + '"' : "") + (d.originalHeight ? ' data-height\x3d"' + (0,z.N)(d.originalHeight) + '"' : "") + (d.filter ? ' data-filter\x3d"' + (0,z.N)(d.filter) + '"' : "") + (d.backgroundSize ? ' data-image-style\x3d"' + (0,z.N)(d.backgroundSize) + '"' : "");
  c = c + d + "\x3e";
  c = "section-image-full" == a.imageLayout ? c + ('\x3cdiv class\x3d"section-background-image" style\x3d"background-image: url(' + (0,z.N)((0,z.P)(b.miroUrl)) + "/max/" + (0,z.N)("700".replace(ji, ki)) + "/gradv/29/81/40/" + (0,z.N)(String(a.backgroundImage.id).replace(ji, ki)) + ');"\x3e\x3c/div\x3e\x3cbr\x3e') : "section-image-left" == a.imageLayout || "section-image-right" == a.imageLayout ? c + ('\x3cimg src\x3d"' + (0,z.N)((0,z.P)(b.miroUrl)) + "/max/" + (0,z.N)(b.postColumnWidth) + "/multiply/grey/" + 
  (0,z.N)(a.backgroundImage.id) + '"\x3e') : c + "\x3cbr\x3e";
  return c + "\x3c/div\x3e";
};

我注意到的一件事是，而不是两个图像简单地淡入/淡出 - 淡入淡出水平以某种方式绑定到滚动，因此当您停止滚动图像时停止淡入淡出。这是一个非常好的效果。

P.S我希望尽可能简单地做到这一点，最好不要使用jQuery插件。

由于

Answer 1

查看Andreas Storm在Codepen上的中等模糊滚动效果。

HTML：

<div class='blurImg'>
  <div style="background-image: url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/60/darken/25/1*4ncz3hLxmL8E_bUh-0z62w.jpeg')"></div>
  <div class='blur' style="background-image: url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/40/darken/50/blur/50/1*4ncz3hLxmL8E_bUh-0z62w.jpeg')"></div>
</div>
<header>
  <div>
    <h1>
      Medium
    </h1>
    <p>
      Everyone’s stories and ideas
    </p>
    <a href='https://medium.com/' title='Medium'>Learn more</a>
  </div>
  <nav role='navigation'>
    <ul>
      <li>
        <a class='active' href='#'>Reading List</a>
      </li>
      <li>
        <a href='#'>Bookmarks</a>
      </li>
      <li>
        <a href='#'>Top 100</a>
      </li>
    </ul>
  </nav>
</header>
<div class='container'>
  <div></div>
</div>

CSS：

body
  font-size 14px
  font-family Sans-Serif

*
  box-sizing border-box

a
  text-decoration none

.blurImg
  position relative
  width 100%
  height 440px
  z-index -1
  top 0
  left 0
  & > div
    position fixed
    width 100%
    height 440px
    background-repeat no-repeat
    background-size cover
    background-position center center

.blur
  opacity 0

header
  z-index 1
  position absolute
  top 0
  width 100%
  padding 0px 20px
  & > div
    max-width 600px
    margin 0 auto
    padding-top 150px
    height 380px
    text-align center
    color White
    a
      font-size 0.8em
      letter-spacing 0.08em
      color rgba(255,255,255,0.85)
      line-height 30px
      padding 7px 14px
      border 1px solid rgba(255,255,255,0.3)
      border-radius 2em
      transition all 0.3s ease
      &:hover
        background white
        color Gray
  p
    font-size 1.5em
    margin-bottom 0.7em
    font-family Times New Roman

h1
  font-weight 800
  font-size 3.4em
  margin-bottom 0.2em

nav
  max-width 600px
  margin 0 auto
  height 60px
  border-top 1px rgba(255,255,255,0.35) solid
  ul
    li
      display inline-block
      margin-right 20px
      a
        font-weight 800
        font-size 11px
        text-transform uppercase
        letter-spacing .2em
        color rgba(255,255,255,0.5)
        transition color 0.3s linear
        line-height 60px
        display block
        &.active
          box-shadow 0px -1px 0px white

nav ul li a.active, nav ul li a:hover
  color white

.container
  height 1300px
  background white
  z-index 1
  padding 0px 20px
  div
    max-width 600px
    margin 0 auto
    padding-top 40px

CoffeeScript：

$(window).scroll ->
  oVal = ($(window).scrollTop() / 240)
  $(".blur").css "opacity", oVal

Answer 2

我也想弄清楚他们是如何在Medium处理这个问题的。你指出的缩小的javascript片段似乎并不是我对模糊效果负责。在我看来，他们也通过画布进行处理。看看这个SO答案：

Coderwall blurred background effect with canvas

希望有所帮助。（不幸的是，它使用了一些jquery但你可以跳过那部分;））

重新创建媒体图像淡入滚动效果

2 个答案: