Question

更新

我已经回答了下面的问题，然而，这是非常迟钝的，图像之间的交叉淡入淡出似乎是阶梯式的。有没有人可以建议如何优化这个？

也许我应该回复并使用静态＆＃39;图像，随机选择并使用它直到刷新页面。

问题

我想知道是否有可能或某人有一个工作示例来模糊背景图片（可能是背景幻灯片）。

目前我有以下内容循环显示12个图像，每个图像在淡入下一个图像之前显示10秒。如果可能的话，我希望能够模糊背景。在图像需要是静态的情况下，我希望它从预定义的列表中随机选择一个图像。

以下作品（我包括blur.js，但目前没有做任何事情）。

我也选择了css3标签，因为我知道某些css3属性会产生模糊效果。

<script src="/js/jquery.js"></script>
<script src="/js/backstretch.js" type="text/javascript"></script>
<script src="/js/blur.js"></script>
<script>
$.backstretch([
    "https://download.unsplash.com/photo-1428604467652-115d9d71a7f1",
    "https://download.unsplash.com/photo-1428591501234-1ffcb0d6871f",
    "https://download.unsplash.com/photo-1423882503395-8571951e45cc",
    "https://download.unsplash.com/photo-1422433555807-2559a27433bd",
    "https://download.unsplash.com/photo-1420819453217-57b6badd9e19",
    "https://download.unsplash.com/photo-1414912925664-0c502cc25dde",
    "https://download.unsplash.com/reserve/IPEivX6xSBaiYOukY88V_DSC06462_tonemapped.jpg",
    "https://download.unsplash.com/reserve/fPuLkQNXRUKI6HQ2cMPf_IMG_4761.jpg",
    "https://download.unsplash.com/photo-1425136738262-212551713a58",
    "https://download.unsplash.com/photo-1425036458755-dc303a604201",
    "https://download.unsplash.com/photo-1422640805998-18a4dd89bec2",
    "https://download.unsplash.com/reserve/Ept9mCvnTiahpYXPi9Ej_DSC_0010.jpg"
], {duration: 3000, fade: 1000});
</script>

http://jsfiddle.net/mstnorris/tg05oxk0/1/

Answer 1

所以，在创建一个jsfiddle用于展示我已经完成的工作的同时，当我偶然发现vague.js时，我正在寻找cdnjs上的blur.js。

您可以在下面找到完整脚本的链接，它非常简单，完全符合我的预期。

$.backstretch([
    "https://download.unsplash.com/photo-1428604467652-115d9d71a7f1",
    "https://download.unsplash.com/photo-1428591501234-1ffcb0d6871f",
    "https://download.unsplash.com/photo-1423882503395-8571951e45cc",
    "https://download.unsplash.com/photo-1422433555807-2559a27433bd",
    "https://download.unsplash.com/photo-1420819453217-57b6badd9e19",
    "https://download.unsplash.com/photo-1414912925664-0c502cc25dde",
    "https://download.unsplash.com/reserve/IPEivX6xSBaiYOukY88V_DSC06462_tonemapped.jpg",
    "https://download.unsplash.com/reserve/fPuLkQNXRUKI6HQ2cMPf_IMG_4761.jpg",
    "https://download.unsplash.com/photo-1425136738262-212551713a58",
    "https://download.unsplash.com/photo-1425036458755-dc303a604201",
    "https://download.unsplash.com/photo-1422640805998-18a4dd89bec2",
    "https://download.unsplash.com/reserve/Ept9mCvnTiahpYXPi9Ej_DSC_0010.jpg"
], {duration: 3000, fade: 1000});

var vague = $('body').Vague({
    intensity:      10,      // Blur Intensity
    forceSVGUrl:    false,   // Force absolute path to the SVG filter,
    // default animation options
    animationOptions: {
      duration: 1000,
      easing: 'linear' // here you can use also custom jQuery easing functions
    }
});

vague.blur();

http://jsfiddle.net/mstnorris/s0Lbpzuu/2/

使用backstretch.js和blur.js（或类似的）

更新

问题

1 个答案: