幻灯片更改时动画div背景位置

Question

DEMO

目标：模糊div在幻灯片更改时保持不变，但背景图像应该有效。

模糊是每个特定幻灯片的一部分，这就是幻灯片旋转时移动的原因。我需要在文字和文字的同时保持模糊。背景图片幻灯片。

这是我的结构：

<div class="slider" id="slides">
    <ul class="slides-container" >
        <li>
            <img src="img/bg.jpg" alt="">
            <div class="bg blur" style="background-image:url(img/bg.jpg);"></div>
            <div class="copy">
                <h1>Hello</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, fuga laborum autem sit facere corrupti quis voluptatibus suscipit facilis aliquid quae vel illum delectus hic, laudantium debitis at error impedit.</p>
            </div>
        </li>

        <li>
            <img src="img/transformer.jpg" alt="">
            <div class="bg blur" style="background-image:url(img/transformer.jpg);"></div>
            <div class="copy">
                <h1>Something Else</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, fuga laborum autem sit facere corrupti quis voluptatibus suscipit facilis aliquid quae vel illum delectus hic, laudantium debitis at error impedit.</p>
            </div>
        </li>
    </ul>

    <div class="controls slides-navigation">
        <a href="#" class="prev"><</a>
        <a href="#" class="next">></a>
    </div>

</div><!-- end slider -->

这会创建复制的图像模糊

.blur {
    filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    filter: url('../img/blur.svg#blur'); /* for Firefox */
    clip: rect(0px, 440px, 1000px, 0px);
    z-index: 2; 
}

我正在使用JS滑块插件也实现了滑块。

$('#slides').superslides({
    slide_speed: 800,
    pagination: false,
    hashchange: true,
    scrollable: true,
    play: 5000
});

我猜我需要

1. 将模糊设置为滑块外的单独div。
2. 为BLUR background-position-x属性设置动画。

我只是不确定如何完成这个......任何帮助都会很棒。

感谢。

Answer 1

你走在正确的轨道上。首先将blur div移出滑块元素，否则它肯定会与其他所有内容一起滑动。

在您的演示中，似乎可以肯定地说，模糊div总是位于窗口视口的左上角，这是正确的吗？如果是这种情况，那就像使用position：absolute一样容易将模糊定位在那里。

注意：您需要一个包含div的位置：relative;为了绝对定位你的模糊div相对于那个。

类似于：

.container {
  position: relative;
}

.blur {
  position: absolute;
  /* All your other blur styling here. */
}

默认情况下，.blur元素应该绝对位于top：0 left：0这是你想要的位置。您可以随时使用顶部，左侧，底部，右侧调整位置。