6+ Vivus Js 使い方 References

SVGのマスクとアニメーションで動きのあるWEB制作【vivus.js使い方】 from wreath-ent.co.jp

Introduction

Vivus JS is a lightweight JavaScript library that allows you to animate SVG files. With Vivus JS, you can create complex animations with ease. In this tutorial, we will be discussing how to use Vivus JS in 2023.

Getting Started

To use Vivus JS, you need to download the library from the official website. Once you've downloaded the library, you need to include it in your HTML file using the script tag.

Example:

Using Vivus JS

To use Vivus JS, you need to create an SVG file and add it to your HTML file. Once you've added the SVG file, you can initialize Vivus JS and start animating your SVG.

Example:

Options

Vivus JS comes with several options that you can use to customize your animations. Some of the options include:

Type:

The type option determines how the animation is played. There are three types of animations: oneByOne, sync, and async.

Duration:

The duration option determines how long the animation takes to complete. The value is in milliseconds.

Start:

The start option determines when the animation starts. The default value is inViewport, which means the animation starts when the SVG element is in the viewport.

Conclusion

Vivus JS is a powerful tool for creating complex SVG animations. In this tutorial, we've discussed how to use Vivus JS in 2023. With the right knowledge and practice, you can create amazing animations that will impress your audience.