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

这似乎模拟了你的效果：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

这就是我如何更新你的小提琴：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何缩放背景图像并在滚动时淡出文本

1 个答案: