迷人的森林（SVG + GSAP）

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var trees = [];
let stars = [];
const svg = document.getElementById("svg");
let w = window.innerWidth;
let h = window.innerHeight;
svg.style.width = w;
svg.style.height = h;
var colors = [
  "#C501E1",
  "#9A26F8",
  "#6564FE",
  "#2B97FA",
  "#02C4E7",
  "#16E6CC",
  "#2EF9A0",
  "#C6E501",
  "#E7C501",
  "#FF6A63",
  "#F82D98",
  "#E830CE"
];

//update svg dimension on window resize
window.addEventListener("resize", function(e) {
  w = svg.style.width = window.innerWidth;
  h = svg.style.height = window.innerHeight;
  createScenery();
});

class Star {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.color = colors[Math.floor(Math.random() * colors.length)];
    this.opacity = Math.random() + 0.2;
    this.starEl = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "circle"
    );
    this.starEl.setAttribute("fill", this.color);
    this.starEl.setAttribute("cx", this.x);
    this.starEl.setAttribute("cy", this.y);
  }
  updatePath() {
    this.starEl.setAttribute("fill-opacity", this.opacity);
    this.starEl.setAttribute("r", this.r);
  }
  animate() {
    var time = 2;
    var delay = Math.random();
    TweenLite.to(this, time, {
      r: this.r + 1,
      opacity: Math.random(),
      ease: Bounce.easeOut,
      delay: delay,
      onUpdate: () => this.updatePath(),
      onComplete: () =>
        TweenLite.to(this, time, {
          r: this.r - 1,
          opacity: Math.random() + 0.2,
          ease: Bounce.easeOut,
          delay: delay,
          onUpdate: () => this.updatePath(),
          onComplete: () => this.animate()
        })
    });
  }
}

class Moon {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.x2 = this.r * 2;
    this.y2 = this.r * 2;
    this.moonEl = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "path"
    );
    this.moonEl.setAttribute("fill", "white");
  }

updatePath() {
    this.moonEl.setAttribute(
      "d",
      `M${this.x},${this.y} a1,1 0 0,0 ${this.x2},${this.y2}`
    );
  }

animate() {
    var time = 2;
    TweenLite.to(this, time, {
      y2: -this.y2,
      y: this.y + this.r * 2,
      ease: Bounce.easeOut,
      delay: 5,
      onUpdate: () => this.updatePath(),
      onComplete: () =>
        TweenLite.to(this, time, {
          y2: this.r * 2,
          y: this.y - this.r * 2,
          ease: Bounce.easeOut,
          delay: 5,
          onUpdate: () => this.updatePath(),
          onComplete: () => this.animate()
        })
    });
  }
}

const createMoon = () => {
  var x = Math.floor(Math.random() * w / 2) + 100;
  var y = Math.floor(Math.random() * h / 8) + 50;
  var r = 50;
  var moon = new Moon(x, y, r);
  moon.updatePath();
  svg.appendChild(moon.moonEl);
  moon.animate();
};

class Tree {
  constructor(x1, x2, y1, y2, color) {
    this.x1 = x1;
    this.x2 = x2;
    this.y1 = y1;
    this.y2 = y2;
    this.color = color;
    this.offset = 2;
    this.point = 0;
    this.size = 45;
    this.lineEl = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "line"
    );
    this.lineEl.setAttribute("stroke-linecap", "round");
    this.lineEl.setAttribute("stroke", this.color);
    this.lineEl.setAttribute("stroke-width", 12);
    this.lineEl.setAttribute("y1", this.y1);
    this.lineEl.setAttribute("x1", this.x1);
    this.lineEl.setAttribute("x2", this.x2);
    this.triangleEl = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "polygon"
    );
    this.triangleEl.setAttribute("fill", this.color);
    this.triangleEl2 = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "polygon"
    );
    this.triangleEl2.setAttribute("fill", this.color);
    this.triangleEl3 = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "polygon"
    );
    this.triangleEl3.setAttribute("fill", this.color);
  }

updatePath() {
    this.lineEl.setAttribute("y2", this.y2);
    this.triangleEl.setAttribute(
      "points",
      `${this.x1},${this.y2 - this.offset * this.size} ${this.x1 +
        this.size},${this.y2 - this.point} ${this.x1 - this.size},${this.y2 -
        this.point}`
    );
    this.triangleEl2.setAttribute(
      "points",
      `${this.x1},${this.y2 - (this.offset + 0.5) * this.size} ${this.x1 +
        this.size},${this.y2 - (this.point + 30)} ${this.x1 - this.size},${this
        .y2 -
        (this.point + 30)}`
    );
    this.triangleEl3.setAttribute(
      "points",
      `${this.x1},${this.y2 - (this.offset + 1) * this.size} ${this.x1 +
        this.size},${this.y2 - (this.point + 60)} ${this.x1 - this.size},${this
        .y2 -
        (this.point + 60)}`
    );
  }

animate() {
    var delay = Math.random() + 0.8;
    var time = 2 + Math.random() * 1.2;
    TweenLite.to(this, time, {
      y2: h - (Math.random() * 200) - 50,
      ease: Bounce.easeOut,
      delay: delay,
      onUpdate: () => this.updatePath(), //update our path data
      onComplete: () =>
        TweenLite.to(this, time, {
          y2: h / 2 - (Math.random() * 250) + 100,
          ease: Bounce.easeOut,
          delay: delay,
          onUpdate: () => this.updatePath(),
          onComplete: () => this.animate()
        })
    });
   
  }
}

const createScenery = () => {
  createStars();
  createMoon();
  createTrees();
};
createScenery();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg