screen-animation

It's a package what provides the JavaScript files for screen animations.

Usage

<script src="https://cdn.jsdelivr.net/npm/screen-animation"></script>
<script>
  onStartAnimation() {
    ScreenAnimation.Sea.start();
  }
</script>
<button
  type="button"
  onclick="onStartAnimation"
>
  start animation
</button>

Animations

Avalanche

ScreenAnimation.Avalanche.start({
  color: "#ff7722",
  backgroundColor: "rgba(255,255,255,0.8)"
})

Life

ScreenAnimation.Life.start({
  color: "#77bb99",
  backgroundColor: "rgba(0,0,0,0.6)"
})

Line

ScreenAnimation.Line.start({
  color: "#5588cc",
  backgroundColor: "rgba(0,0,0,0.8)"
})

Message

ScreenAnimation.Message.start({
  color: "#7744bb",
  backgroundColor: "rgba(0,0,0,0.4)",
  fontFamily: "fantasy",
  fontSize: "5rem",
  text: "testing.."
})

Puzzle

ScreenAnimation.Puzzle.start({
  color: "#883366",
  backgroundColor: "rgba(0,0,0,0.5)"
})

Rails

ScreenAnimation.Rails.start({
  color: "#993388",
  backgroundColor: "rgba(0,0,0,0.5)"
})

Sea

ScreenAnimation.Sea.start()

Sky

ScreenAnimation.Sky.start()

Space

ScreenAnimation.Space.start()

Sparkler

ScreenAnimation.Sparkler.start()

Spinner

ScreenAnimation.Spinner.start({
  backgroundColor: "#333333",
  colors: [
    "red",
    "yellow",
    "green",
    "blue"
  ],
  message: {
    text: "loading.....",
    color: "#ffffff",
    fontSize: "3rem",
    fontFamily: "fantasy"
  }
})

Star

ScreenAnimation.Star.start({
  backgroundColor: "rgba(0,0,0,0.8)"
})

Tetris

ScreenAnimation.Tetris.start({
  colors: {
    i: "#bbccee",
    o: "#448866",
    s: "#ffbbdd",
    z: "#6644cc",
    j: "#7799ee",
    l: "#aabb33",
    t: "#229944"
  },
  backgroundColor: "rgba(0,0,0,0.4)"
})