야무 yamoo9

🎓

Blended Learning

🍭 이듬(E.UID) 블렌디드 러닝 — 멘토

yamoo9 / EUID.js

Last active February 23, 2020 06:37

스타벅스 사이트 애니메이션 개선 스크립트 (이듬 블렌디드 러닝 실습 자료)

	/**
	* 이듬(E.UID) 라이브러리
	* 블렌디드 러닝: yamoo9.github.io/EUID
	* 작성자: yamoo9.naver.com
	*/
	var EUID = {
	_version: '0.0.1',

	// querySelector() = IE 9+
	// 참고: https://caniuse.com/#feat=queryselector

yamoo9 / GotoTop.js

Last active September 14, 2020 03:54

GotoTop 컴포넌트

	// GotoTop 컴포넌트 모듈
	(function GotoTopComponent() {
	'use strict';

	// @생성자_함수(ES6, class 역할)
	function GotoTop(domNode, options) {

	// 문서객체를 참조하여 컴포넌트 안에서 사용합니다.
	this._button = domNode;

yamoo9 / carousel.html

Created November 17, 2019 12:14

Carousel 마크업 / 스타일링

	<div class="container">
	<h2 class="h2 a11y-hidden">일반 캐러셀 데모</h2>
	<div id="caro1"
	class="carousel"
	aria-roledescription="상품 캐러셀"
	aria-label="OOO 상품 쇼케이스">
	<div class="carousel__controls">
	<button type="button"
	class="button carousel__button carousel__button--prev"
	aria-controls="carousel-slides">이전</button>

yamoo9 / Carousel.js

Last active November 16, 2019 02:52

일반 캐러셀(Carousel) 컴포넌트 - 모듈 & OOJS 생성자 함수와 프로토타입 모듈

	import gsap from 'gsap'
	import { mixins, makeArray } from '../utils'

	/**
	* Carousel 클래스 생성 과정에서 전달된 인자의 유효성 검사 함수
	* @private
	*/
	const validateArgs = (selector, options = {}) => {
	if (typeof selector !== 'string')
	throw new Error('첫번째 인자인 선택자(selector)는 문자 값을 전달해야 합니다.')

yamoo9 / animate.js

Created November 11, 2018 16:09

애니메이션 라이브러리 animate.js 활용

	(function (global) {
	'use strict';

	function animate(render, duration, easing, callback) {
	duration = duration \|\| 400;
	easing = easing ? animate.easings[easing] : animate.easings['linear'];
	var start = performance.now();
	requestAnimationFrame(function _animate(time) {
	var timeFraction = (time - start) / duration;
	var progress = easing(timeFraction);

yamoo9 / typescript.json

Last active August 17, 2018 15:44

Vue + TypeScript 코드 스니펫

	{

	"Vue TS Component": {
	"prefix": "v-component",
	"description": "Vue TypeScript 컴포넌트",
	"body": [
	"import Vue from 'vue';",
	"import { Component${1:, Prop, Emit, Watch} } from 'vue-property-decorator';",
	"",
	"@Component({$3})",

yamoo9 / jquery.ajax.extends.js

Last active August 3, 2018 03:26

jQuery Ajax 단축 메서드 - PUT / PATCH / DELETE 확장

	/! jquery.ajax.extends.js @ 2018, yamoo9.net /
	;(function(global, $) {
	'use strict';

	if (!$) { throw new Error('jQuery 라이브러리를 호출해야 사용 가능합니다.'); }

	if ( !$.put ) {
	$.put = function(api_with_id, put_data, success, fail) {
	$.ajax({
	method: 'PUT',

yamoo9 / PathAnimate.js

Created June 8, 2018 07:16

PathAnimate.js - SVG 패스 애니메이션 라이브러리

	var PathAnimate = (function(global){
	'use strict';

	// ——————————————————————————————————————
	// PRIVATE
	// ——————————————————————————————————————
	function getLength(el) {
	if(el.nodeName) {
	var tagName = el.nodeName.toLowerCase(), d;
	if(tagName === 'path') {

yamoo9 / iphone-x-notch.html

Created June 5, 2018 01:26

iPhoneX Notch 디자인 대응 방법 (background-color / viewport-fit / safe-area-inset-*)

	<!DOCTYPE html>
	<html lang="ko-KR">
	<head>
	<meta charset="UTF-8">
	<title>iPhone Notch(v자형 새김을 뜻함) 디자인 대응법</title>

	<!-- 참고: https://goo.gl/oXuCuy -->

	<!-- 방법 1. body 요소의 배경 색 설정 -->
	<style>

yamoo9 / main.js

Created May 12, 2018 16:46

스크롤 애니메이션 유틸리티 함수 (재귀함수 활용)

	(function (global, document, scrollTo) {
	'use strict';

	var doc = document.documentElement;
	var links = document.querySelectorAll('.nav a');

	links.forEach(function(link){
	var el_id = link.getAttribute('href');
	var offset_top = document.querySelector(el_id).offsetTop;
	link.addEventListener('click', function (e) {