纯CSS3响应式页面顶部滚动视觉差特效

当前位置:主页 > CSS3库 > UI界面设计 > 纯CSS3响应式页面顶部滚动视觉差特效
纯CSS3响应式页面顶部滚动视觉差特效
分享:

    插件介绍

    这是一款使用纯CSS3制作的炫酷响应式页面顶部滚动视觉差特效。该特效在页面向下滚动时,页面顶部的图片和正文的内容形成视觉差效果,非常炫酷。

    浏览器兼容性

    浏览器兼容性
    时间:2016-06-16
    阅读:
简要教程

这是一款使用纯CSS3制作的炫酷响应式页面顶部滚动视觉差特效。该特效在页面向下滚动时,页面顶部的图片和正文的内容形成视觉差效果,非常炫酷。

使用方法

HTML结构

该视觉差效果使用一个<header>元素作为页面的头部。

<header>
  <h1>Parallax header</h1>
  <p>Parallax scroll effect like Twitter. Pure css, javacsript free.</p>
</header>        
                
CSS样式

整个页面被制作为透视度为1像素的3D空间。由于IE浏览器不支持transform-style: preserve-3d;属性,所以在IE中看不到视觉差效果。

body {
  color: #fff;
  margin:0;
  padding:0;
  -webkit-perspective: 1px;
  perspective: 1px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}  
                

header元素制作视觉差的代码如下:

header {
  box-sizing: border-box;
  min-height: 40vw;
  padding: 30vw 0 5vw;
  position: relative;
  -webkit-transform-style: inherit;
  transform-style: inherit;
  width: 100vw;
}
header, header:before {
  background: 50% 50% / cover;
}
header::before {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  background-color: #8a8;
  background-image: url(../img/demo.jpg);
  background-size: cover;
  -webkit-transform-origin: center center 0;
  -webkit-transform: translateZ(-1px) scale(2);
  transform-origin: center center 0;
  transform: translateZ(-1px) scale(2);
  z-index: -1;
  min-height: 100vh;
}   
                

网友评论