应用CSS3来完成翻转视差实际效果的实例教程

日期:2021-03-05 类型:科技新闻 

关键词:小程序和公众号区别,小程序生成二维码,小程序前端框架,小程序开发商排名,小程序码

“视差(parallax)”实际效果如今在互联网技术上愈来愈时兴了。假如你还没听闻过甚么是视差实际效果,它实际上便是运用照片产生不一样的层,各自以不一样的速率,不一样的方位挪动造成的实际效果。这会造成出很奇特的视觉效果实际效果,能有力的吸引住住访问者的眼光。


收看演试


在web设计方案中,最多见的完成视差实际效果的方法是应用jQuery软件。但这类方式有1些缺点。这些软件大多数全是在window目标的scroll恶性事件上置放监视器。这会致使JavaScript必须解决很多的恶性事件开启(解决scroll恶性事件很非常容易导致访问器特性难题,应用时必须十分当心。)挪动不一样的层,测算情况的部位,设定照片的特性,这都引发了很多的DOM实际操作。

简言之,应用JavaScript来完成视差实际效果会让网页页面的翻转出現特性难题,出現卡顿。

background-attachment特性回望
background-attachment -- 界定情况照片随翻转轴的挪动方法
赋值: scroll | fixed | inherit
scroll: 伴随着网页页面的翻转轴情况照片将挪动
fixed: 伴随着网页页面的翻转轴情况照片不容易挪动
inherit: 承继
原始值: scroll
承继性: 否
可用于: 全部元素
background:情况.attachment:附着.
示例

CSS Code拷贝內容到剪贴板
  1. body    
  2. {   
  3.  background-image:url('list-orange.png');   
  4.  background-attachment:fixed;   
  5.  background-repeat:repeat-x;   
  6.  background-position:center center;   
  7. }  

显示屏的情况照片为1条橙色线.伴随着翻转轴挪动,橙色线的视觉效果部位不会改变.
CSS background-attachment 特性示例

应用background-attachment: fixed完成视差实际效果

为何仅有1小一部分人了解,这类实际效果具体上能够用CSS完成。

以便完成视差实际效果,好几个情况照片务必置放在不一样的元素上。这些情况图必须界定成background-attachment: fixed。根据设置background-attachment,大家能够更改情况图象的实际效果和部位。

background-attachment的缺省值是scroll,也便是情况照片和內容的部位是相对性静止不动的。这大家大伙儿都见过,当大家左右翻转1个网页页面时,情况和內容1起翻转。

当把background-attachment设定成fixed时,事儿会变得趣味。fixed是说情况照片不随內容1起翻转,而是跟对话框维持静止不动。也便是说,当你拖拽翻转条时,情况照片沒有转变。这就可以够造成好看的视差实际效果。

让我看1个具体完成:

CSS Code拷贝內容到剪贴板
  1. <!-- Four containers for setting the background images -->   
  2. <div class="parallax">   
  3.   <div class="bg__foo">foo</div>   
  4.   <div class="bg__bar">bar</div>   
  5.   <div class="bg__baz">baz</div>   
  6.   <div class="bg__bazz">bazz</div>   
  7. </div>   
  8. // setting base styles to image containers   
  9. [class*="bg__"] {   
  10.   height: 50vh;   
  11.   
  12.   text-indent: -9999px;   
  13.   
  14.   /* fix background */  
  15.   background-attachmentfixed;   
  16.   
  17.   /* center it */  
  18.   background-positioncenter center;   
  19.   
  20.   /* Scale it nicely to the element */  
  21.   background-size: cover;   
  22.   
  23.   /* just make it look a bit better  */  
  24.   &:nth-child(2n) {   
  25.     box-shadow: inset 0 0 1em #111;   
  26.   }   
  27. }   
  28.   
  29. .bg__foo {   
  30.   background-imageurl(   
  31.     http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg   
  32.   );   
  33. }   
  34.   
  35. .bg__bar {   
  36.   background-imageurl(   
  37.     http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax2.jpg   
  38.   );   
  39. }   
  40.   
  41. .bg__baz {   
  42.   background-imageurl(   
  43.     http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax3.jpg   
  44.   );   
  45. }   
  46.   
  47. .bg__bazz {   
  48.   height: 100vh;   
  49.   
  50.   background-imageurl(   
  51.     http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg   
  52.   );   
  53. }  

有关这类技术性的访问器适配状况,你能够参照这里,基础上,当代访问器和IE9+的访问器都适用。


收看演试


对我本人而言,我更喜爱CSS技术性完成的视差实际效果,而并不是用JavaScript。用CSS完成,是受访问器原生态适用,沒有程序编写逻辑性,沒有对DOM附加的实际操作,使得全部计划方案十分的简约好看。

即便是CSS完成的视差实际效果,也会给访问器带来压力。

background-attachment: fixed会致使访问器更多的3D渲染,也会危害访问器翻转的高效率。因此,开发设计时1定要多做检测,视特性状况而决策完成的实际效果。

上一篇:Jp Easy Co., Ltd/橙白宜比较有限企业 返回下一篇:没有了