CSS属性background-position-y实现动画

CSS属性background-position-y实现动画

引言

background-position-y属性用于设置初始状态时背景图片在垂直方向的位置，这个位置相对于通过background-origin定义的背景层原点进行定位，详见MDN 文档。

今天要分享的是如何利用background-position-y属性实现简单的动画，源图是静态图片。

CSS效果

效果如下

实例代码

class animate {
  constructor(dom) {
    this.element = dom;
    this.timer_over = null;
    this.timer_leave = null;
    this.period = 30;
    this.step = 128;
    this.imgLength = -3228;
    this.init();
  }
  init() {
    this.element.addEventListener("mouseover", () => {
      this.over();
    });

    this.element.addEventListener("mouseleave", () => {
      this.leave();
    });
  }
  over() {
    if (this.timer_leave) {
      clearTimeout(this.timer_leave);
    }

    this.timer_over = setInterval(
      ((step) => {
        const positionYValue = this.getPositionY();
        if (positionYValue > this.imgLength) {
          this.element.style.backgroundPositionY = `${
            positionYValue - this.step
          }px`;
        }
      }).bind(this),
      this.period
    );
  }
  leave() {
    if (this.timer_over) {
      clearTimeout(this.timer_over);
    }

    this.timer_leave = setInterval(
      (() => {
        const positionYValue = this.getPositionY();
        if (positionYValue != 0) {
          this.element.style.backgroundPositionY = `${
            positionYValue + this.step
          }px`;
        }
      }).bind(this),
      this.period
    );
  }
  getPositionY() {
    const styles = window.getComputedStyle(this.element);
    const backgroundPositionY = styles.getPropertyValue(
      "background-position-y"
    );
    const positionYValue = parseFloat(backgroundPositionY);
    return positionYValue;
  }
}

示例中定义了一个animate类，通过addEventListener监听鼠标的mousemove和mouseleave，从而改变background-position-y的值；每项的背景图都是一个长图，长度为 128px * n, 步长step设为 128px,从视觉效果上就形成了动画