css fixed 滚动条_【案例】滚动条位置控制元素透明度变化

像这种滚动条位置控制元素透明度变化如何实现？

代码如下

*{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;}

滚动条的应用案例

UI即User Interface(用户界面)的简称。

泛指用户的操作界面，UI设计主要指界面的样式，美观程度。

而使用上，对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。

好的UI不仅是让软件变得有个性有品味，

还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。

//把文本块放在画面中间

$(".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})

}

)

希望大家看过我的案例分享后能有所收获。如果大家喜欢哪类效果，还想看哪方面的哪类型的设计制作案例可以留言给我，有时间我一定会分享更多设计制作相关的内容给大家的。谢谢！

 时刻提醒自己 

不抱怨，多实践，终达成功彼岸！

我的座右铭：不能领跑也绝不放弃！