Life.Dev.Love.Phil

html excelUploadTest function excelTest() { var form = $('#excelForm')[0]; // FormData 객체 생성 var formData = new FormData(form); // 코드로 동적으로 데이터 추가 가능. // formData.append("userId", "testUser!"); $.ajax({ type: "POST", enctype: 'multipart/form-data', url: "/api/playlists/14/2017-07-21/mapper/excel", data: formData, processData: false, contentType: false, cache: false, timeout: 600000, success: fun..

jquery의 scrollTop, offset 을 활용하여 화살표키로 한 문단씩 이동하게 만들었네요. jquery 기초예제라 할 수 있겠습니다.ㅎ 그럼 소스를 살짝 살펴 볼까요~ * JS 영역 var canScrollNext = true;var canScrollPrev = true; /** * 1. Force an integer return on offset.top even when we have hdpi screen * 2. Stop bottom scrolling when we are on bottom of the page * 3. Continue top scrolling when we are not on section 1 */var scrollToNext = function(){ var current..

text 입력창에 글자 타이핑시 여러 효과를 준 예제 입니다. 사용할 수 있는 효과는 bounce,fadeIn,fadeInDown,fadeInUp,fadeInLeft,fadeInRight,flash,jello,lightSpeedIn,pulse,rollIn,rotateIn,rotateInDownLeft,rotateInDownRight,rotateInUpLeft,rotateInUpRight,rubberBand,shake,slideInDown,slideInUp,slideInLeft,slideInRight,swing,tada,wobble,zoomIn 26종 세트 구성에 39,900원!! ??? ㅋㅋㅋ 예제에서 사용된 기술은 JS : Babel / CSS : Scss 입니다. 그럼 소스를 살짝 살펴 볼까요~ * ..

전에 어떤 웹사이트의 광고에서 이런 형태로 이미지 광고 하던데 전/후 비교 사진에서 아주 간편하게 확인할 수 있겠네요~ 하나의 뷰어에서 이미지 두개를 보고싶은 만큼 번갈아 볼 수 있게 만들었네요~ 예제에서 사용된 기술은 JS : Babel / CSS : Scss 입니다. 그럼 소스를 살짝 살펴 볼까요~ * html 영역 - 사진, 도표, 삽화, 오디오, 비디오, 코드 등을 담는 컨테이너 역할 태그 - 브라우저 지원 버전 : IE 9.0+, chrome 6.0+ 등 - 슬라이더 출력 참고 : 새로 추가된 HTML5 input types:colordatedatetimedatetime-localemailmonthnumberrangesearchteltimeurlweek 관련 글 2015/09/23 - [Dev...

작동 원리는 클릭 이벤트 발생시 is-active 클래스를 추가/ 제거 하여 등록된 keyframe에 따라 애니메이션이 작동하는 것입니다. 여기서 약간 색다르게 코딩한 부분을 좀 살펴보도록 하겠습니다. 바로 jquery 코딩 방법 중 queue를 이용한 건데요.. 클릭시 등록한 'is-active' 클래스를 애니메이션이 종료한 이후에 제거 하기 위해서 사용하였습니다. animation 속성 적용시 .top { animation: cut-top 0.8s ease-out; } 이렇게 0.8초동안 애니메이션이 실행되게 세팅하였으므로$('button').on('click',function(){ $(this) .addClass("is-active") .delay(800) .queue(function(){ $(th..

아직 기능은 많이 없고 많이 부족하지만 소스 참고 용도로 사용하시라고 올려봅니다. // 단축키 세팅 (function($) { $.fn.easyHotkey = function(options) { var sKeys = { "CTRL" : 17, "ALT" : 18, "SHIFT" : 16, "ENTER" : 13, "SPACE" : 32, "TAB" : 9, "ESC" : 27, "BACKSPACE" : 8, "N_1": 49, "N_2": 50, "N_3": 51, "N_4": 52, "N_5": 53, "N_6": 54, "N_7": 55, "N_8": 55, "N_9": 56, "A":65, "B":66, "C":67, "D":68, "E":69 }; var option = $.extend({ css..

display: flex 의 속성들을 활용하여 flexbox의 예제를 한눈에 볼 수 있게 해 놓았네요. 이제 MS 에서도 IE 11 아래 버전의 브라우저는 공식적인 지원이 중단되었고~ IE11 부터 잘 지원되는 flex를 활용한 디자인들이 주를 이루게 되겠네요~ 잘 배워놉시다.ㅎㅎㅎ flex 관련 글 2015/12/04 - [Dev. 웹/Front-end 웹개발을 위한 codepen] - [2015.12.04] 마우스 위치에 따른 프로필 사진 변경 아이디어 2015/10/27 - [Dev. 웹/Front-end 웹개발을 위한 codepen] - [2015.10.27] CSS 레이아웃 구성을 이용한 Browser 디자인 2015/10/14 - [Dev. 웹/Front-end 웹개발을 위한 codepen] ..

와우... css 만으로 정말 깔끔하게 잘 표현됐네요. 비율과 각도 맞추느라 꽤 고생했겠네요..ㅎㅎ 일반적으로 보이는 평면의 요소들을 3d로 배치시켜서 이렇게 표현한건데요.. 사용된 css3 속성은 생각보다 많지는 않습니다. 3d를 구성하는 요소는 다음과 같은데요 perspectivetransform - rotateX, rotateY, rotateZtransform-style - preserve-3d 각각 적용된 부분을 살펴보면.. 1. 가장 최상위 요소로써 iphone을 보는 관점을 지정해 줄 #wrapper div 에 적용된 perspective 속성#wrapper { height: 520px; width: 800px; margin-left: -700px; margin-top: 300px; posit..

요즘 한창 뜨고 있다는 React.js 로 구현된 드래그 & 드랍 예제입니다. 아래는 React.js 구현 소스입니다.var placeholder = document.createElement("li"); placeholder.className = "placeholder"; class List extends React.Component { constructor(props) { super(props); this.state = {...props}; } dragStart(e) { this.dragged = e.currentTarget; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/html', this.dragged); } dragEnd..

홈화면이나 주목시킬만한 영역에 사용하면 꽤 큰 효과를 볼 수 있을것 같네요. 콘솔창에 글씨가 입력되고 지워지는듯한 애니메이션을 구현해 놓은 플러그인입니다. 활용하기 좋겠어요.ㅎ 사용법은 아래와 같이 간단하구요.. ... 공식페이지 바로가기 - http://www.mattboldt.com/demos/typed-js/ 간단한 사용 예제 및 Demo See the Pen New Personal Website [WIP] by Jonathan Ohayon (@rezozo) on CodePen.