Question

我正在尝试获得整页（顶部有导航，但我不介意它下面的背景）缩小效果。但是，我希望它在加载所有资源后执行，因为这是加载页面时首先看到的。所以我不希望它被提前执行，否则它甚至可能都没有被看到，或者它的结尾只会被捕获。

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

动画（使用jQuery）后台大小的属性 - 这使动画变得“波涛汹涌”，我在某处读到它可能是因为它是在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，这是更好的选择。

Answer 1

如果您想使用scale

，可以使用css @keyframes执行此操作

我使用伪类添加background

＆＃13;

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

＆＃13;

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)
  }
}

＆＃13;

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

＆＃13;

根据您的要求，您似乎需要此

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

在css中更改

#front  
   position: fixed;

或添加身体

overflow: hidden;

缩小效果问题

2 个答案: