1
不幸的是，我不是一個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插件。
謝謝