[英]How to scale a background image and fade text on scroll
我有这段代码使用class="BlogImage"
淡入div,但不是淡入淡出,我希望它缩放transform: scale(1)
to 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>
这似乎模拟了您所追求的效果:
$(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>
这是我可能会更新您的小提琴的方法:
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 description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. </p> <p>This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. </p> <p>This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. </p> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.