如何缩放背景图像并在滚动条上淡化文本

Question

I have this code that fades a div with a class="BlogImage" but instead of fade, I want it to zoom transform: scale(1) to transform: scale(1.2) and not sure how to go about it.

Any code example to achieve the scaling? Would be even better if it can fade as well as zoom (scale) while scrolling.

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

FYI, This is the html and I want to zoom the background image and fade the text:

<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

This seems to simulate the effect you are after:

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

This is how I might update your 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>