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

时间:2014-07-31 05:05:11

标签: javascript jquery html css

DEMO

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

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

这是我的结构:

<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属性设置动画。
  3. 我只是不确定如何完成这个......任何帮助都会很棒。

    感谢。

1 个答案:

答案 0 :(得分:0)

你走在正确的轨道上。首先将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这是你想要的位置。您可以随时使用顶部,左侧,底部,右侧调整位置。