mio-U-M

// js
var app = new Vue({
  el: '#app',
  data: {
    activeClass: ""
  },
  computed: {
    classObject : function () {
    return {
     decorationRed: this.activeClass.includes("0"),

mio-U-M

<div id="app">
  <p class="text-basic" v-bind:class="classObject">CLASS CHANGE SAMPLE</p>
  <input type="text" v-model="activeClass"/>
  <p class="explain">type below strings</p>
  <ul class="typelist">
    <li>"0":text color change into red.</li>
    <li>"1":text color change into blue.</li>
    <li>"2":text color change into green.</li>
    <li>"-":add underline to text.</li>
    <li>".":change background color into gray.</li>

mio-U-M

float random (in vec2 _st) {
    return fract(sin(dot(_st.xy, vec2(12.9898,78.233))) * 43758.5453123);
}

mio-U-M

class Vector {
    static calcLength(x, y){
        return Math.sqrt(x * x + y * y);
    }
    
    static calcDistance(x0, y0, x1, y1){
        let x = x1 - x0;
        let y = y1 - y0;
        return Vector.calcLength(x, y);
    }

mio-U-M

var wrapper = document.querySelector(".wrapper");
var ua = window.navigator.userAgent;

wrapper.dataset.ua = (function() {
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
        return 'sp';
    }else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
        return 'tab';
    }else{
        return 'pc';

mio-U-M

var easing = {
		linear : function (t){
			return t;
		},
		easeInQuad: function (t) {
			return t*t;
		},
		easeOutQuad: function (t) {
			return -1 *t*(t-2);
		},

mio-U-M

/*
 * makeRenbanAnime 連番用のアニメーションスクリプト
 * 背景画像は一番左上から始まり右へ進んで最終的に一番右下に到達するもので作られていること想定
 * @param [element] elm アニメーションする要素
 * @param [Number] width 背景画像の幅(px)
 * @param [Number] height 背景画像の幅(px)
 * @param [Number] col 1コマあたりの幅(px)
 * @param [Number] row 1コマあたりの高さ(px)
 * @param [Number] duration アニメーションの感覚(ミリ秒)
 * @param [Boolean] isloop 繰り返し有無（true:有 false:無）

mio-U-M

// # このライブラリで参照できるもの
// ## X軸方向編（横方向・幅周り）
// - 現在のスクロール量（X）を取得
// - 現在のウィンドウの幅（ブラウザ上で見えている表示領域）を取得
// - 現在のドキュメントの幅（ウィンドウから見えていない領域外も含めた幅）を取得
// - 現在のスクロール位置を取得（X）を取得
// ## Y軸方向編（横方向・高さ周り）
// - 現在のスクロール量（Y）を取得
// - 現在のウィンドウの高さ（ブラウザ上で見えている表示領域）を取得
// - 現在のドキュメントの高さ（ウィンドウから見えていない領域外も含めた幅）を取得

mio-U-M

// min(含む)からmax(含む)までのランダムな数
// @min : 最小値
// @max : 最大値
function random(min, max) {
    return Math.random() * (max - min) + min
}

mio-U-M

import lottie from 'lottie-web'
import EventEmitter2 from 'eventemitter2'
// 'BASE_DIR' is image directory root path
import { BASE_DIR } from '~/config'

// custmize here depending on your lottie files
const LOTTIE_LIST = {
  logo: 'logoAni.json',
  upload: 'uploadAni.json',
  graph: 'graphAni.json'