分享更有价值
被信任是一种快乐

CSS怎么利用视差实现酷炫交互动效

文章页正文上

本篇内容介绍了“CSS怎么利用视差实现酷炫交互动效”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!这里利用的是 CSS 3D,实现滚动视差效果。原理就是:我们给容器设置上 transform-style: preserve-3dperspective: xpx,那么处于这个容器的子元素就将位于3D空间中,再给子元素设置不同的 transform: translateZ(),这个时候,不同元素在 3D Z轴方向距离屏幕(我们的眼睛)的距离也就不一样滚动滚动条,由于子元素设置了不同的 transform: translateZ(),那么他们滚动的上下距离 translateY 相对屏幕(我们的眼睛),也是不一样的,这就达到了滚动视差的效果。关于 transform-style: preserve-3d 以及 perspective 本文不做过多篇幅展开,默认读者都有所了解,还不是特别清楚的,可以先了解下 CSS 3D。核心代码表示就是:

translateZ(-1)
translateZ(-2)
translateZ(-3)

html{
height:100%;
overflow:hidden;
}

body{
perspective:1px;
transform-style:preserve-3d;
height:100%;
overflow-y:scroll;
overflow-x:hidden;
}

.g-container{
height:150%;

.section-one{
transform:translateZ(-1px);
}
.section-two{
transform:translateZ(-2px);
}
.section-three{
transform:translateZ(-3px);
}
}

总结就是父元素设置 transform-style: preserve-3dperspective: 1px,子元素设置不同的 transform: translateZ,滚动滚动条,效果如下:CodePen Demo — CSS 3D parallax很明显,当滚动滚动条时,不同子元素的位移程度从视觉上看是不一样的,也就达到了所谓的滚动视差效果。OK,有了上面的铺垫,我们来看看这样两个有趣的交互效果。由群里的日服第一切图仔 wheatup 友情提供。先来看第一个效果:效果是一种文本交替在不同高度的层展示,并且在滚动的过程中,会有明显的 3D 视差效果。这个效果并不困难,核心就在于:利用了 transform-style: preserve-3dperspective 构建不同的层次效果,制作视差效果利用元素的 ::before::after 构建了 3D 的效果我们看一个最小化 DEMO:

.g-container{
height:150vh;
perspective:600px;
}

.g-box{
width:200px;
height:200px;
background:#999;
transform-style:preserve-3d;

&::before,
&::after{
content:"";
position:absolute;
right:0;
left:0;
transform-style:preserve-3d;
height:200px;
background-color:#ccc;
}
&::before{
transform-origin:topcenter;
top:0;
transform:rotateX(-90deg);
}
&::after{
transform-origin:bottomcenter;
bottom:0;
transform:rotateX(90deg);
}
}

滚动 g-container 容器,即可得到一种 3D 效果:由于还需要视差效果,我们需要给不同的层赋予不同的 translateZ(),我们稍微改造下代码,给每个 g-box 中间,再加多一层正常的 div,再给每个 g-box 加上一个 translat免费云主机、域名eZ()

.g-container{
width:400px;
height:150vh;
perspective:800px;
}

.g-normal{
width:200px;
height:200px;
background:#666;
transform-style:preserve-3d;
}

.g-box{
width:200px;
height:200px;
background:#999;
transform-style:preserve-3d;
transform:translate3d(0,0,200px);

&::before,
&::after{
//...保持不变
}
}

由于 g-boxg-normal 的 translateZ 值不同,所以滚动的过程中会出现视差效果由于 g-boxtranslateZ 值为 translateZ(200px),两个伪元素的 rotateX 为正负 90deg,且高度为 200px,因此 g-boxg-normal 刚好可以通过 g-box 的两个伪元素衔接起来最终,效果就是如上所示:OK,下面第二个滚动视差动画,也非常的有意思,想看看原版,也是来自于 wheatup 的 CodePen:CodePen Demo — 3D Chat Viewer这里核心还是借助了 CSS 3D 的能力,但是由于使用的是滚动触发动画效果,并且有一定的从模糊到清晰的渐现效果,因此还是有一定的 JavaScript 代码。感兴趣的可以看看上述的源码。本文将尝试使用 CSS @Property 和 CSS 最新的特性 @scroll-timeline 还原该效果借助 JavaScript 实现的部分。当然,首先不管是否需要借助 JavaScript,核心的 3D 部分使用的都是 CSS。我们首先需要这样一个结构:

//...重复N个

.g-wrapper{
width:100vw;
height:100vh;
}
.g-inner{
position:relative;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:10px;
}
.g-item{
width:300px;
height:100px;
background:#000;
}

大概是这个效果:然后,我们添加一些 CSS 3D 变换:

.g-wrapper{
//...与上述代码保持一致
perspective:200px;
transform-style:preserve-3d;
}
.g-inner{
//...与上述代码保持一致
transform-style:preserve-3d;
transform:translateY(calc(-50%+100px))translateZ(0)rotateX(90deg);
transform-origin:bottomcenter;
}

就能得到这样一种视角的效果:由于容器 g-inner 进行了一个绕 X 轴的 90deg 翻转,也就是 rotateX(90deg),所以,我们再给 g-item 一个反向的旋转,把卡片翻转回来:

.g-wrapper{
//...与上述代码保持一致
perspective:200px;
transform-style:preserve-3d;
}
.g-inner{
//...与上述代码保持一致
transform-style:preserve-3d;
transform:translateY(calc(-50%+100px))translateZ(0)rotateX(90deg);
transform-origin:bottomcenter;
}
.g-item{
//...与上述代码保持一致
transform:rotateX(-90deg);
}

就能得到这样一种视角的效果:此时,我们给容器一个赋予一个 translateZ 的动画:

.g-inner{
animation:move10sinfinitelinear;
}
@keyframesmove{
100%{
transform:translateY(calc(-50%+100px))translateZ(calc(100vh+120px))rotateX(90deg);
}
}

这样,整个动画的雏形就完成了,通过控制父元素的 perspective 大小和容器的 translateZ,得到了一种不断向视角面前位移的动画效果:那怎么利用 CSS 再把这个动画和滚动操作结合起来呢?在前不久,我介绍过 CSS 的一个重磅特性 来了来了,它终于来了,动画杀手锏 @scroll-timeline,利用它可以实现 CSS 动画与滚动操作的结合,我们利用它改造一下代码:

Loremipsumdolorsitametconsecteturadipisicingelit.
//...重复N个

@property--phase{
syntax:'';
inherits:false;
initial-value:15px;
}
.g-scroll{
width:100%;
height:1000vh;
}
.g-wrapper{
position:fixed;
width:100vw;
height:100vh;
perspective:200px;
transform-style:preserve-3d;
}
.g-inner{
position:relative;
height:100%;
//省略一些flex布局代码,与上文一致
transform-style:preserve-3d;
transform:translateY(calc(-50%+100px))translateZ(var(--phase))rotateX(90deg);
transform-origin:bottomcenter;
animation-name:move;
animation-duration:1s;
animation-timeline:box-move;
}
.g-item{
width:300px;
height:200px;
color:#fff;
background:#000;
transform:rotateX(-90deg);
}
@scroll-timelinebox-move{
source:selector("#g-scroll");
orientation:"vertical";
}
@keyframesmove{
0%{
--phase:0;
}
100%{
--phase:calc(100vh+100px);
}
}

这里相比上述的 DEMO,主要添加了 @scroll-timeline 的代码,我们增加了一个超长容器 .g-scroll,并且把它的滚动动作使用 @scroll-timeline box-move {} 规则和 animation-timeline: box-move 绑定了起来,这样,我们可以使用滚动去触发 @keyframes move {} CSS 动画。效果如下:在原效果中,还有一些使用 JavaScript 结合滚动距离控制的模糊的变化,这个,我们使用 backdrop-filter: blur() 也可以简单模拟。我们再简单添加一层 g-mask

Loremipsumdolorsitametconsecteturadipisicingelit.
//...重复N个

//其他保持一致
.g-mask{
position:fixed;
width:100vw;
height:100vh;
backdrop-filter:blur(5px);
transform:translateZ(0);
}

这样,基本就还原了原效果,并且,我们用且仅使用了 CSS:“CSS怎么利用视差实现酷炫交互动效”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站,小编将为大家输出更多高质量的实用文章!

相关推荐: 怎么使用Node.js调用SQL存储过程并获取结果

本篇内容介绍了“怎么使用Node.js调用SQL存储过程并免费云主机、域名获取结果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 在使用Node.js连接数据库

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

登录

找回密码

注册