live2d-widget.js

NOTEICE: This project won't be updated until next year

See #38

Add the Sseexxyyy live2d to your webpages! Seperated from hexo-helper-live2d.

Browser requirements

We use config below as our babel-preset-env's config.

"browsers": [
  "cover 99%",
  "last 2 years",
  "not ie < 9",
  "edge >= 12"
]

Installation

Please have a look at both README and CHANGELOG if you are upgraded from older version.

Yarn

yarn add live2d-widget@4

Sometimes yarn does better job than npm.

NPM

npm i --save live2d-widget@4

Hexo

See hexo-helper-live2d for the hexo plugin.

Webpages

JS code online generator: Click me!

Store script on your own web server

Download the latest release,

then extract and copy the dist folder to your website.

Insert codes into your HTML files using online generator, or make your own code

Making code manually:

import the js(replcae your own js path here in the src):

eg.

<script src="//js/live2d-widget/L2Dwidget.min.js"></script>

Then init it.

eg.

var currL2Dwidget = new L2Dwidget().init({});

Or with your own config

eg.

var currL2Dwidget = new L2Dwidget().init({
  'modelJsonPath': "https://cdn.jsdelivr.net/npm/live2d-widget-model-shizuku/assets/shizuku.model.json",
  'displayWidth': 150,
  'mobileShow': true
});

Using CDN

We have 3 CDNs,

Jsdelivr(Recommended) https://cdn.jsdelivr.net/npm/live2d-widget@4/dist/L2Dwidget.min.js
Unkpg https://unpkg.com/live2d-widget@4/dist/L2Dwidget.min.js
BundleRun https://bundle.run/live2d-widget@4/dist/L2Dwidget.min.js

Select your favourite CDN, and put code like this into your webpage.

eg.

<script src ="//cdn.jsdelivr.net/npm/live2d-widget@4/dist/L2Dwidget.min.js"></script>

Bookmarks

data:text/html,<script src=https://cdn.jsdelivr.net/npm/live2d-widget@4/dist/L2Dwidget.min.js></script><script>const currL2Dwidget = new L2Dwidget().init({});</script>

javascript:function loadScript(c,b){var a=document.createElement("script");a.type="text/javascript";"undefined"!=typeof b&&(a.readyState?a.onreadystatechange=function(){if("loaded"==a.readyState||"complete"==a.readyState)a.onreadystatechange=null,b()}:a.onload=function(){b()});a.src=c;document.body.appendChild(a)};loadScript("https://cdn.jsdelivr.net/npm/live2d-widget@4/dist/L2Dwidget.min.js",function(){const currL2Dwidget = new L2Dwidget().init({});});