recherche

Maison >interface Web >tutoriel CSS >Conseils pratiques CSS : utilisez la parallaxe pour obtenir des effets interactifs sympas

Conseils pratiques CSS : utilisez la parallaxe pour obtenir des effets interactifs sympas

青灯夜游
青灯夜游avant
2022-10-10 18:42:233031parcourir

Conseils pratiques CSS : utilisez la parallaxe pour obtenir des effets interactifs sympas

Cet article présentera une petite astuce pour utiliser CSS pour obtenir un effet de parallaxe de défilement, et utiliser cette astuce pour créer des effets spéciaux interactifs intéressants. [Partage vidéo d'apprentissage : tutoriel vidéo CSS, front-end web]

Concernant l'utilisation de CSS pour obtenir l'effet de parallaxe de défilement, il existe un article précédent qui décrit la solution spécifique en détail - CSS pour obtenir l'effet de parallaxe . Les étudiants intéressés peuvent d'abord consulter cet article.

Ici, une technique de parallaxe CSS pure sera utilisée :

Utilisez transform:translat3d pour obtenir la parallaxe de défilement

transform: translate3d 实现滚动视差

这里利用的是 CSS 3D，实现滚动视差效果。

原理就是：

  • 我们给容器设置上 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中，

  • 再给子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样

  • 滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果。

关于 transform-style: preserve-3d 以及 perspective 本文不做过多篇幅展开，默认读者都有所了解，还不是特别清楚的，可以先了解下 CSS 3D。

核心代码表示就是：

<div>
    <div>translateZ(-1)</div>
    <div>translateZ(-2)</div>
    <div>translateZ(-3)</div>
</div>
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-3d 和 perspective: 1px，子元素设置不同的 transform: translateZ，滚动滚动条，效果如下：

Conseils pratiques CSS : utilisez la parallaxe pour obtenir des effets interactifs sympas

CodePen Demo -- CSS 3D parallax

很明显，当滚动滚动条时，不同子元素的位移程度从视觉上看是不一样的，也就达到了所谓的滚动视差效果。

借助 CSS 视差实现酷炫交互动效

OK，有了上面的铺垫，我们来看看这样两个有趣的交互效果。由群里的日服第一切图仔 wheatup 友情提供。

先来看第一个效果：

效果是一种文本交替在不同高度的层展示，并且在滚动的过程中，会有明显的 3D 视差效果。

这个效果并不困难，核心就在于：

  • 利用了 transform-style: preserve-3d 和 perspective 构建不同的层次效果，制作视差效果

  • 利用元素的 ::before，::after 构建了 3D 的效果

我们看一个最小化 DEMO：

<div>
    <div></div>
    <div></div>
    <div></div>
</div>
.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: top center;
        top: 0;
        transform: rotateX(-90deg);
    }
    &::after {
        transform-origin: bottom center;
        bottom: 0;
        transform: rotateX(90deg);
    }
}

滚动 g-container 容器，即可得到一种 3D 效果：

由于还需要视差效果，我们需要给不同的层赋予不同的 translateZ()，我们稍微改造下代码，给每个 g-box 中间，再加多一层正常的 div，再给每个 g-box 加上一个 translateZ()。

<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
.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-box 和 g-normal 的 translateZ 值不同，所以滚动的过程中会出现视差效果

  • 由于 g-box 的 translateZ 值为 translateZ(200px)，两个伪元素的 rotateX 为正负 90deg，且高度为 200px，因此 g-box 和 g-normal 刚好可以通过 g-boxCe qui est utilisé ici, c'est du CSS 3D pour obtenir l'effet de parallaxe de défilement.

    • Le principe est :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Vous guidez étape par étape pour implémenter une disposition d'échiquier complexe à l'aide d'une seule balise + CSSArticle suivant：Vous guidez étape par étape pour implémenter une disposition d'échiquier complexe à l'aide d'une seule balise + CSS

Articles Liés

Voir plus