长沙网站建设教您制作内容的渐入渐出效果

长沙网站建设教您如何制作内容的渐入渐出效果。

制作思路为：以JS代码为核心，并搭配CSS代码实现内容的渐入渐出。

页面主要代码如下图所示：

该效果是通过JS的监控，在页面向下滚动到内容区出现时，给内容区的div添加上一个类名。在类名被添加上的瞬间将触发css样式，使子集的transform属性，由translateX(-100%)，变成 translateX(0)。离开时内容区再移除该类名，使之在还原成translateX(-100%)。

效果出现的具体步骤为：在长沙网站建设中，页面滚动到第三屏时触发js，给第三屏最外层的div添加了类名.act，同时也触发了.act的css效果：transform: translateX(0); 让类名为.tx 的块，从右侧滑入进来，直到铺满整块，这样就达成了渐入的效果。

而页面继续向下滚动离开第三屏时，再次触发JS，移除了第三屏的类名.act。让.tx 的块 从左测滑出直到全部消失，达成渐出效果。

效果图如下所示：

（效果图一）

（效果图二）

（效果图三）

该效果适用于所有情况下的页面展示，可以设置不同的监控对象，不同的transform属性，以达成内容从各种方向渐入的效果。

以上就是长沙网站建设整理出的页面内容渐入渐出效果的制作方法，希望能对您有所帮助！