純粋に本来のアトミックデザインの分類に従うと以下のようになる。
- 原子(Atom): 最も小さい粒度の要素
- 分子(molecule): 2つ以上の原子を組み合わせたシンプルなUI要素
- 有機体(organism): 切り離して単体でも機能する分子の集まり
import d3_ease from 'd3-ease'; | |
export default class EasingObj { | |
constructor($elm, max, time) { | |
this.$elm = $elm; | |
this.max = max; | |
this.time_start = 0; | |
this.time_past = 0; | |
this.time_animate = time; | |
this.step = 0; |
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; |
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; |
$('a[href^=#]').on('click', function() { | |
$('html,body').animate({ | |
scrollTop: $($(this).attr('href')).offset().top | |
}, 1000); | |
return false; | |
}); |
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)); |
uniform vec2 resolution; | |
uniform sampler2D texture; | |
const float blur = 16.0; | |
varying vec2 vUv; | |
void main() { | |
vec4 color = vec4(0.0); |
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); |
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); | |
} |
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 { |
純粋に本来のアトミックデザインの分類に従うと以下のようになる。