文字过渡动画(叠加颜色)

1.js

function aniText() {

        var PC = $(window).width() > 1200,

            mobile = $(window).width() <= 1200,

            winWidth = $(window).width(),

            winHeight = $(window).height();

        if (mobile) { }

        if (PC) {

            const textElements = gsap.utils.toArray('.ani-text-opacity');

            textElements.forEach(text => {

                gsap.to(text, {

                    backgroundSize: '100%',

                    ease: 'none',

                    scrollTrigger: {

                        trigger: text,

                        start: 'center 80%',

                        end: 'center 50%',

                        scrub: true,

                        // markers: {startColor: "red", endColor: "red", fontSize: "18px", fontWeight: "bold", indent: 20},

                    },

                });

            });

        }

    }

    aniText();

2.css

/* 动效文字 */

.ani-text-opacity {

  // display: initial;

  background: rgba(255, 255, 255, 0.3) -webkit-linear-gradient(to right, #fff, #fff) no-repeat;

  background: rgba(255, 255, 255, 0.3) linear-gradient(to right, #fff, #fff) no-repeat;

  -webkit-text-fill-color: transparent;

  -webkit-background-clip: text;

  background-size: 0 100%;

  -webkit-transition: background-size cubic-bezier(0.1, 0.5, 0.5, 1) 0.5s;

  transition: background-size cubic-bezier(0.1, 0.5, 0.5, 1) 0.5s;

}

@media (max-width:1200px) {

  .ani-text-opacity {

    background: transparent;

    -webkit-text-fill-color: inherit;

    -webkit-background-clip: initial;

  }

}

 

3.html

<p class="title1 ani-text-opacity">青绿引领固废分选</p>