前言：网页要想做的好，视觉交互很重要。
最近在留意一些比较好的交互，也就当是学习了。
觉得这个还不错，来看效果：Element
效果
201911190001
20191219170328
原理
其实原理简单，就是用了两个图片，图片完全重叠，并设置了上面图片显示的高度
image
image
代码
html 通过js监听滚动改变高度
<div class="jumbotron">
<img src="https://element.eleme.cn/2.11/static/theme-index-blue.c38b733.png" alt="">
<div class="jumbotron-red" style="height: 248px;">
<img src="https://element.eleme.cn/2.11/static/theme-index-red.c8e136e.png" alt="">
</div>
</div>
css 加了过渡效果
.jumbotron .jumbotron-red {
transition: height .1s;
background: #fff;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
网友评论