javascript - 如何缩放背景图像并淡入滚动文本

Question

我有这段代码，可以使用 class="BlogImage" 淡入淡出 div，但我希望它不是淡入淡出，而是将 transform:scale(1) 缩放为 transform:scale(1.2) 并且不知道如何去做。

有实现缩放的代码示例吗？如果它可以在滚动时淡入淡出以及缩放(缩放)，那就更好了。

jQuery(window).scroll(function(){
    jQuery(".BlogImage").css("opacity", 1 - jQuery(window).scrollTop() / 450);
});

仅供引用，这是 html，我想缩放背景图像并淡入淡出文本:

<div class="BlogImage" style="background: url('images/ocean.jpg');">
    <div class="page-header">
        <h2>This is a blog title</h2>
    </div>
</div>

https://jsfiddle.net/z4fk9upf/

Answer 1

这似乎模拟了您想要的效果:

$(window).scroll(function(){

    $(".BlogImage")
      .css("opacity", 1 - $(window).scrollTop() / 450)
      .css("background-size", (100 + 100 * $(window).scrollTop() / 450) + "%");

});

.BlogImage {
  height: 200px;
  width: 400px;
  background-image: url(http://lorempixel.com/400/200/);
  background-repeat: no-repeat;
  background-position: center center;
}

<div style="margin-top : 10em;"></div>
<div class="BlogImage"></div>
<div style="margin-top : 25em;"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这就是我更新你的 fiddle 的方式:

jQuery(window).scroll(function(){

    jQuery(".BlogImage")
      .css("opacity", 1 - $(window).scrollTop() / 450)
      .css("background-size", (100 + 100 * jQuery(window).scrollTop() / 250) + "%");

});

.BlogImage {
    background-image: url(http://doc.jsfiddle.net/_downloads/jsfiddle-desktop-1440x900-a.png);
    background-repeat: no-repeat;
    background-size: 100%;
    /*background-size: cover;*/
    /*background-attachment: fixed;*/
    position: relative;
    min-height: 250px;
    background-position: center center;
}

.page-header {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    color:#fff;
    padding:50px 0;
}

<div class="Blog">
  <div class="BlogImage">
    <div class="page-header">
		  <h2>This is a blog title</h2>
    </div>
  </div>
  <div class="container">
		<p>This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;</p>
<p>This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;</p>
<p>This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy&nbsp;This is the&nbsp;description of the blog for dummy.&nbsp;</p>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>