ykob

<template>
<div></div>
</template>

<script>
export default {
  created() {
    window.addEventListener("resize", this.resize);
    window.addEventListener("scroll", this.scroll);

ykob

こわれないComponent分類についての考察

Atomic Design

• アトミックデザイン | UX TIMES

純粋に本来のアトミックデザインの分類に従うと以下のようになる。

• 原子（Atom）: 最も小さい粒度の要素
• 分子（molecule）: 2つ以上の原子を組み合わせたシンプルなUI要素
• 有機体（organism）: 切り離して単体でも機能する分子の集まり

ykob

setFullScreen = ($elm, width, height) => {
  let resize_width = 0;
  let resize_height = 0;
  let margin = [];
  if (window.innerWidth / window.innerHeight > width / height) {
    resize_width = window.innerWidth;
    resize_height = height * (window.innerWidth / width);
    let over = (window.innerHeight - resize_height) / 2;
    margin = [over, 0, over, 0];
  } else {

ykob

export default class BgYoutube {
  constructor(videoId, playerId, width, height, resolution) {
    this.playerId = playerId;
    this.width = width;
    this.height = height;
    this.player = null;

    this.initPlayer(videoId, playerId);
    this.setFullScreen(resolution);
  }

ykob

uniform vec3 light_direction;

varying vec3 vPosition;
varying vec3 vColor;
varying mat4 vInvertMatrix;

void main() {
  vec3 normal = normalize(cross(dFdx(vPosition), dFdy(vPosition)));
  vec3 inv_light = normalize(vInvertMatrix * vec4(light_direction, 1.0)).xyz;
  float diff = clamp(dot(normal, inv_light), 0.0, 1.0);

ykob

uniform vec2 resolution;
uniform sampler2D texture;

const float blur = 16.0;

varying vec2 vUv;

void main() {
    vec4 color = vec4(0.0);

ykob

uniform vec2 resolution;
uniform sampler2D texture;

varying vec2 vUv;

const float mosaic = 12.0;

void main() {
  vec4 color = vec4(0.0);
  vec2 offset = vec2(mod(gl_FragCoord.x, mosaic), mod(gl_FragCoord.y, mosaic));

ykob

$('a[href^=#]').on('click', function() {
   $('html,body').animate({
     scrollTop: $($(this).attr('href')).offset().top
   }, 1000);
   return false;
});

ykob

export default class Preloader {
  constructor() {
    this.data = null;
    this.callbackLoadedData = null;
    this.callbackLoadedDataAll = null;
    this.count_loaded = 0;
    this.complete = false;
  }
  start(data, callbackLoadedData, callbackLoadedDataAll) {
    if (!data.isArray) return;

ykob

export default class Popup {
  constructor($elm) {
    this.$elm = $elm;
    this.href = $elm.attr('href');
    this.name = '';
    this.width = 600;
    this.height = 400;
  };
  init(name, width, height) {
    if (name) this.name = name;