借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海
一、iPhone X的刘海发型和衍生的交互
iPhone X造型上有个显著的特质,就是有个明显的刘海。
然后,也出现了一些酷酷的交互。
例如下面这个交互:
交互视频效果戳这里体验:http://t.cn/Rp01GKc
就是页面滚动的时候,列表会自动绕着iPhone X的刘海排列。
看上面微博截图的反应,好像觉得这个效果实现很难,实际上,CSS3里面针对这种特定形状环绕的效果已经支持很久了,CSS3 Shapes和CSS3 Regions都是可以实现的,本文就将展示如何使用CSS3 Shapes实现元素内容在滚动的时候自动环绕iPhone X的齐刘海的效果。
二、CSS3 Shapes实现元素滚动自动环绕iPhone X头部刘海效果
眼见为实先看效果,您可以狠狠的点击这里:CSS3 Shapes实现列表环绕iPhone X刘海头demo
滚动列表,可以看到类似下面gif的效果:
环绕齐刘海滚动实现原理
CSS Shapes中有个CSS属性名为shape-outside,可以让内联元素以不规则的形状进行外部排列,其语法如下(参考自MDN):
/* 关键字值 */ shape-outside: none; shape-outside: margin-box; shape-outside: content-box; shape-outside: border-box; shape-outside: padding-box;/* 函数值 */ shape-outside: circle(); shape-outside: ellipse(); shape-outside: inset(10px 10px 10px 10px); shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);/* <url>值 */ shape-outside: url(image.png);/* 渐变值 */ shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
shape-outside属性要想生效,本身需要是浮动float元素。
本文demo效果实现使用的是shape-outside:polygon(),通过点坐标勾勒出和齐刘海形状相似的多边形形状,CSS代码为:
.shape {float: left;shape-outside: polygon(0 0, 0 150px, 16px 154px, 30px 166px, 30px 314px, 16px 326px, 0 330px, 0 0); }
如下图紫色区域示意:
此时,后面没有设置BFC(块状格式化上下文)的列表元素就会自动环绕这个形状排列,也就是自动避开了齐刘海区域。
然后,只要搞个假的iPhone X的齐刘海图片覆盖在区域上就可以了。
至此,一个静态的列表环绕齐刘海的效果就完成了。
下面关键的问题是如何让滚动的时候,列表元素动态的跟着环绕呢?
由于shape-outside所在的元素是浮动元素,因此,必定会跟着容器一起滚动,我们需要的效果是我们所绘制的这个刘海区域需要是固定的,怎么办?此时,我是借助JavaScript处理的。
原理很简单,监听容器的滚动事件,让我们的shape-outside绘制的区域实时偏移滚动的大小。此时肉眼看上去的效果就是shape-outside区域永远固定在了滚动容器clientHeight的中间。
整个效果就这么实现了,相关JS如下:
box.addEventListener('scroll', function () {var scrollTop = box.scrollTop;// 滚动偏移应用在shape-outside上shape.style.shapeOutside = 'polygon(0 0, 0 '+ (150 + scrollTop) +'px, 16px '+ (154 + scrollTop) +'px, 30px '+ (166 + scrollTop) +'px, 30px '+ (314 + scrollTop) +'px, 16px '+ (326 + scrollTop) +'px, 0 '+ (330 + scrollTop) +'px, 0 0)'; });
更详尽的代码尽在demo页面。
三、CSS Shapes环绕iPhone X刘海的其它更简易方法
如果我们的技术选型是更看重简单易懂,而不是资源消耗与占用,还可以使用shape-outside:url(image.png)语法实现类似的效果,其中'image.png'就是用来被环绕的图片,环绕与否是基于计算alpha通道决定,用句简单的话描述,就是沿着图片非透明区域环绕。
由于使用url()的形状计算是基于图片元素,和inset(), circle(), ellipse()或者polygon()这些基础形状方法的计算性质不一样,因此,可以直接使用垂直方向的margin进行偏移。这要比polygon()这样实时计算坐标位置要好理解的多。
我们不妨看下CSS和JS代码,如下:
.shape {float: left;shape-outside: url(liu-outside.png);margin-top: 150px; }
box.addEventListener('scroll', function () {var scrollTop = box.scrollTop;// 滚动偏移应用在margin-top上shape.style.marginTop = (150 + scrollTop) + 'px'; });
可以看到,当我们滚动容器的时候,改变的就一个marginTop值就好了;而上面的 shape-outside:polygon()实现需要同时改变多个坐标值。
眼见为实,您可以狠狠的点击这里:shape-outside url实现列表环绕iPhone X刘海demo
如果是iPhone手机,还可以扫下面码体验:
效果类似:
有个细节说明
这里有个细节需要说明下,那就是作为环绕区域的图片和前面显示的那个刘海图片不是一张图片,因为我们的刘海区域需要和后面的文字有一段的间隙,因此,url(liu-outside.png)中的这张'liu-outside.png'图片是有特别的实色填充处理的(扩展右侧环绕区域尺寸):
四、CSS Shapes的兼容性以及结束语
CSS Shapes的兼容性为Chrome浏览器和Safari浏览器(包括iOS)都是支持的,也就意味着我们是可以在iPhone上使用的,完美。只是需要注意的是在iOS10.2及其之前的版本,CSS Shapes的使用还是需要加webkit私有前缀的,但据说iPhone X至少默认iOS 11,而刘海头交互效果就是针对iPhone X处理的,因此webkit私有前缀不加也没关系。
本文这个例子可以看出知识广度的重要性,如果我们深究最终效果实现使用的CSS和JS代码,其实就几行代码而已,键盘敲一下,几分钟就结束了。
那为什么广大前端一看到这个效果觉得牛,甚至认为“UI和前端已经哭晕在厕所”呢?其实就是不知道CSS3 Shapes和CSS3 Regions这些与环绕布局相关的CSS属性。
所以,下班回家,经常关注一些前沿技术还是很有必要的,注意是前沿技术,不是流行技术。很多前沿技术因为使用场景小众,并不流行,甚至你可以几年项目都用不到。如果你想在技术上有所造诣,一定要摒弃功利之心,花时间了解之。
以上~
行文匆忙,如果有表述不准确的地方,欢迎指正。
转载于:https://www.cnblogs.com/gbin1/p/7554058.html
借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海相关推荐
- 借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海 #精选JAVASCRIPTCSSCHROMECSS3APPLE
一.iPhone X的刘海发型和衍生的交互 iPhone X造型上有个显著的特质,就是有个明显的刘海. 然后,也出现了一些酷酷的交互. 例如下面这个交互: 交互视频效果戳这里体验:http://t.c ...
- Css实现刘海,CSS3 Shapes实现列表自动环绕iPhone X刘海头 » 张鑫旭-鑫空间-鑫生活...
展示 为了防止看花眼 我就手动敲下面的文字 原本我偷懒 直接就是列表1,列表2 后来测试发现不行 内容太接近 滚动时候 无法准确感受到靠近效果 这样是不行的 做东西就要精益求精 demo页面也应如此 ...
- Css实现刘海,使用CSS Shapes实现滚动环绕iPhone X刘海效果
一.iPhone X的刘海发型和衍生的交互 iPhone X造型上有个显著的特质,就是有个明显的刘海. 然后,也出现了一些酷酷的交互. 就是页面滚动的时候,列表会自动绕着iPhone X的刘海排列. ...
- iphone桌面滑动效果html5,使用CSS Shapes实现滚动环绕iPhone X刘海效果
一.iPhone X的刘海发型和衍生的交互 iPhone X造型上有个显著的特质,就是有个明显的刘海. 然后,也出现了一些酷酷的交互. 例如下面这个交互视频效果:http://t.cn/Rp01GKc ...
- CSS内容超出元素高度滚动,并且滚动条隐藏
CSS内容超出元素高度滚动,并且滚动条隐藏 给父元素设置宽度,溢出隐藏,子元素设置 // html <div class="box"><div class=&qu ...
- 奇妙的 CSS shapes(CSS图形)
CSS 发展到今天已经越来越强大了.其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到.今天就向大家介绍几个比较新的强大的 CSS 功能: clip-path shape-outsid ...
- css3 shapes是什么意思,如何在Web中使用CSS Shapes
布局一般都是遵循按行和列等线性原则,Web网站的布局到今天为止很大程度上受到这些原则的影响.虽然CSS Grid的出现让布局变得更好,更灵活,但相对于印刷媒体而言,Web布局总体上还是受到很好的限制, ...
- css3 shapes是什么意思,CSS Shapes有哪些让人兴奋之处
我最近听了JEN Simmons在 Boagworld播客的关于CSS Shapes的采访,虽然我之前已经听说过CSS Shapes好久了,但是我还没有亲自尝试过.因为某些原因,这个采访强迫我坐下来好 ...
- html中选择字体的元素,深入探讨CSS中字体元素
深入探讨CSS中字体元素 更新时间:2006年09月25日 00:00:00 作者: 字体的处理在网页设计中无论怎么强调也不为过,毕竟网页使用来传递信息的,而最经典最直接的信息传递方式就是文字,所 ...
最新文章
- pandas使用fillna函数将dataframe中的缺失值按照列均值进行填充(fill missing values with the mean of the column)
- Android之四大组件(Service的开启与关闭)
- html5斐波那契数列,经典的斐波那契数列与arguments.callee
- java爬取百度首页源代码
- 鸿蒙系统第一次出现,华为鸿蒙系统第三“用户”出现?没想到是它
- 5 个常用的软件质量指标
- 使用ActionScript实现滤镜效果
- java中定时JOB的实现方式
- Hyper-V Server 存储空间
- docker安装mysql5.7_docker安装mysql5.7
- Servlet技术详解
- android rtmp 播放器下载,android rtmp player 除了播放一般的视频格式 - 下载 - 搜珍网...
- 如何解决“Appstore无法下载软件”的问题
- RBM算法模型应用在推荐系统 Python代码实现
- 手绘三相电压电流波形的方法
- 个人笔记使用(wolai,OneNote)
- layui rate (评分组件)使用的一点经验分享
- 1分钟让别人喜欢你(二)
- Mysql cancel分析
- 自身知识浅薄,开发积累问题
热门文章
- ipone5s信号服务器,iPhone 5S信号差维修过程分享
- SEO组词器:快速寻找合适关键词,优化文章!
- 瑞昱 RTL8188CE Wireless LAN 802.11n PCI-E NIC支持5G吗
- 【专题5: 硬件设计】 之 【11.案例一:门控开关,用分立元器件搭建降压模块】
- type-c转接头HDMI+VGA+USB3.0+PD3.0四合一扩展坞
- 【虚拟化】如何将虚拟机从workstation转换到esxi
- 华为专家带你搞定物联网全栈开发
- 汇聚创新 共创未来---记2016华为开发者大赛沙龙深圳站
- 树莓派摄像头运用python颜色识别
- 【思维模型】五分钟了解<金字塔原理>,为什么学习金字塔原理?什么是金字塔原理?如何应用金字塔原理?