【案例】滚动条位置控制元素透明度变化
像这种滚动条位置控制元素透明度变化如何实现？
代码如下
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<style>
*{font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微软雅黑"}
body{line-height:26px;margin:0;height:3000px;background-color:black;}
.bg{position:fixed;top:0;}
.bg img{width:100%;opacity:0.4;}
.text{position:absolute;max-width:1000px;color:gray;text-align:center;}
</style>
<meta charset="UTF-8">
<title>滚动条的应用案例</title>
</head>
<body>
<div class="text">UI即User Interface（用户界面）的简称。<br>
泛指用户的操作界面，UI设计主要指界面的样式，美观程度。<br>
而使用上，对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。<br>
好的UI不仅是让软件变得有个性有品味，<br>
还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。</div>
<div class="bg"><img src="bg.jpg"></div>
<script>
//把文本块放在画面中间
$(".text").css({left:"50%",top:"50%"})
$(".text").css({marginLeft:-$(".text").width()/2})
//根据滚动条位置设置元素的透明度变化
var n=0
$(window).scroll(
function(){
n=$(window).scrollTop()
document.title=n
$(".text").css({opacity:1-n/300})
$(".bg img").css({opacity:n/300})
}
)
</script>
</body>
</html>希望大家看过我的案例分享后能有所收获。如果大家喜欢哪类效果，还想看哪方面的哪类型的设计制作案例可以留言给我，有时间我一定会分享更多设计制作相关的内容给大家的。谢谢！
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2019-01-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
