缩小效果问题答案

【问题标题】：Zoom-out Effect Issues缩小效果问题
【发布时间】：2015-07-27 18:54:52
【问题描述】：

我试图获得一个完整的页面（顶部有导航，但我不介意背景在它下面）缩小效果。但是，我希望它在所有资产加载后执行，因为它是加载页面时看到的第一件事。所以我不希望它被提前执行，否则它甚至可能不会被看到，或者只是它的结尾会被抓住。

我看过几个例子，但我遇到了问题：

动画（使用 jQuery） background-size 属性 - 这使得动画“断断续续”，我在某处读到它可能是因为它是在 CPU 而不是 GPU 上运行的。

HTML

<body>
    <div id="front"></div>
</body>

CSS

html {
    width: 100%;
    height: 100%;
}

body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

#front {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
    background-size: 110%;
}

JavaScript

$('#front').animate({ backgroundSize: '100%' }, 1000);

使用setTimeout，如上一个问题的答案所示：Slight background zoom on DOM load? - 这很顺利，但是当我将宽度和高度值更改为 100% 时，我无法让它工作。图像在缩小之前开始超大，但会显示超大视图。我想要固定的 100%x100% 视图，并且没有可见的额外缩放。我试过overflow: hidden 但这并没有隐藏溢出。当滚动条出现并破坏效果时，您可以看到这种情况正在发生。

演示： http://jsfiddle.net/eHAuh/15/

HTML

<body>
    <div id="front" class="scaled"></div>
</body>

CSS

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
}

#front {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
    background-position: 50% 50%;
    overflow: hidden;
}

.animatable {
    -webkit-transition:all 750ms ease-out;
    transition:all 750ms ease-out;
}

.scaled {
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
}

JavaScript

$(document).ready(function () {
    $('#front').attr('class', 'animatable');
    setTimeout(function () {
        $('#front').removeClass('animatable');
    }, 1000)
});

任何帮助都会很棒，我希望这个问题的布局没问题。我无法弄清楚如何缩进段落而不将它们变成代码缩进。感谢阅读，祝您有愉快的一天。

编辑1：加载时执行的方式是因为jQuery/JavaScript在$(window).load中。

编辑 2： 有一个答案建议使用关键帧，但是这些不支持 IE9，这会更好。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

如果你想使用 scale，你可以使用 css @keyframes 来做到这一点

我使用伪类添加background

/** after page has loaded*/
$(window).bind('load', function() {
  $('#front').addClass('active')
})

html {
  width: 100%;
  height: 100%;
}
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}
#front {
  position: relative;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  overflow: hidden;
}
#front:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
  background-size: cover;
  transform: scale(2);
}
#front.active:after {
  animation: animation 5s;
  /* change the value 5s to what you want */
  animation-fill-mode: forwards;
  /* added so that it doesn't return to its original state which is scale(2)*/
}
@keyframes animation {
  0% {
    transform: scale(2);
  }
  100% {
    transform: scale(1)
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="front"></div>

根据您的要求，您似乎需要这个

/** after page has loaded*/
$(window).bind('load', function() {
  $('#front').animate({
    width: '100%',
    height: '100%'
  }, 5000);
})

html {
  width: 100%;
  height: 100%;
}
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}
#front {
  position: relative;
  top: 0;
  width: 200%;
  height: 200%;
  opacity: 1;
  background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
  background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="front"></div>

【讨论】：

如何做到这一点，以便仅在加载所有页面元素后才开始缩放（根据 OP）？也许通过 jQuery $.load() 附加关键帧 css ？
我在window load @gibberish 之后添加了class
但是IE9及以下不支持关键帧，肯定有方法至少可以包含IE9吗？
感谢您的回复。第二个版本更好，但它是从一个角落而不是从中心缩小。最后，我在 div 周围添加了一个包装器，将溢出设置为隐藏，这样它就隐藏了溢出 (jsfiddle.net/eHAuh/18)。

【解决方案2】：

在css中改变

#front  
   position: fixed;

或用于正文添加

overflow: hidden;

【讨论】：

这个！谢谢，将位置更改为固定确实有效，但我不喜欢使用固定定位。但是您将溢出隐藏添加到正文的建议有效，因此我为 div 制作了一个包装器并将其设置为溢出。这隐藏了内部 div 的溢出 (jsfiddle.net/eHAuh/18)。