背景图像放大效果

Question

我想达到一个效果，网站加载的背景“放大”。在文档准备好之后，背景图像应该逐渐缩小。

我决定在我的背景中使用绝对定位元素：

HTML：

<div class="intro">
  <div class="intro_bg"></div>
</div>

CSS：

.intro {
   width: 100vh; height: 95vh;
}

.intro_bg {
    width: 140%;
    height: 140%;

    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    background: url(../images/hills.jpg) no-repeat center center fixed;
    background-size: cover;
}

jQuery：

    $('.intro_bg').animate({
        'width': '100%',
        'height': '100%'
    },20000, function() { alert(); });

基本上，这不管用。它成功地缩放了.intro_bg，但是图像并没有像预期的那样放大。图像本身不会缩放或移动(这可能是cover的全部要点)。

如果我的想法不起作用，实现“背景放大”效果的最佳解决方案是什么？

Answer 1

为什么不更改应用一个转换类，并对超时进行刻度转换(以防止立即应用程序)？

这有一个额外的优点，就是在功能(JS)和表示(CSS)之间保持关注点的清晰分离。

演示Fiddle

HTML

<div class="intro">
    <div class="intro_bg"></div>
</div>

CSS

.intro {
    width: 600px;
    height:600px;
    overflow:hidden;
}
.intro_bg {
    width: 100%;
    height: 100%;
    background: url(http://www.picturesnew.com/media/images/image-background.jpg);
    background-position:center center;
    background-size:cover;
    transform:scale(1);
    transition:all 4s ease-in;
}
.intro_bg.zout {
    transform:scale(6); /* <--- change the scale of zoom out as appropriate */
}

Jq

setTimeout(function(){
    $('.intro_bg').addClass('zout');
},1000);

Answer 2

您可以尝试将'%‘替换为'px’。

$('.intro_bg').animate({
    'width': '100%',
    'height': '100%'
},20000, function() { alert(); });

之后：

$('.intro_bg').animate({
    'width': '100px',
    'height': '100px'
},20000, function() { alert(); });

小提琴手

希望工作和帮助

Answer 3

演示

css

.intro_bg {
    width: 1000px;
    height: 1000px;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    position: absolute;
    z-index: -1;
    background: url(http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg) no-repeat center center;
    background-size: cover;
}