-
jQuery 이미지 애니메이션
jQuery image animation 이미지 src값의 증가하는 숫자의 범위는 0000~9999 까지로 하며 파일명 또한 0000~9999까지로 만든다. (네자리 숫자) imgname0000.jpg / imgname-0001.gif / imgname_0002.png… 이미지 확장자는 png/jpg/gif 로 한다. @var rePath; [첫번째 문자] ~ [4자리 숫자.] 전까지의 값을 반환 (4자리 숫자.png/jpg/gif ([ex] 0000.jpg)는 반환값에 포함되지 않는다.) ;(function(global, $){ 'use strict'; var plugin_name = 'animationImg'; var run = false; if (!$.fn[plugin_name]) { $.fn[plugin_name] = function(settings) { if(!run) { //실행여부 체크 run = true; var $this = $(this); var...
-
jQuery plugin 만들기
jQuery 플러그인 제작 프로세스 0. 영역 내, $ 별칭 보호 (function(global, $){ 'use strict'; // $ === window.jQuery })(window, window.jQuery); 1. 플러그인 기본형 쉘 작성 (function(global, $){ 'use strict'; var plugin_name = ''; if ( !$.fn[plugin_name] ) { $.fn[plugin_name] = function() { // 플러그인 코드 }; } })(window, window.jQuery); 2. 체이닝 설정 (function(global, $){ 'use strict'; var plugin_name = ''; if ( !$.fn[plugin_name] ) { $.fn[plugin_name] = function() { // jQuery 체이닝 설정 return this;...
-
background-image animation keyframes
background-image로 @keyframes 이용해서 animation 구현하기 (gif) 적용방법 무한반복 (infinite) n = 총 frame 수 STEPS = n PERCENT = ( ( 100 / (n-1) ) + 100) % div { animation: gifAnimation 1s steps(STEPS) infinite; } @keyframes gifAnimation { 0% { background-position: 0 0; } 100% { background-position: PERCENT 0; } } 한번만 실행 (1) n = 총 frame 수 STEPS = n-1 PERCENT = 100% //fix 100% div { animation: gifAnimation 1s steps(STEPS) 1...
-
jquery.fn
애니메이션 (background-image) /** * @param SECTION {number} * @param WIDTH {number} * @param TIME {number} * @param DELAY {number} * @param STOP {number} */ $.fn.aniJin = function (SECTION, WIDTH, TIME, DELAY, STOP){ TIME = TIME || 200; var num = 0; var playing = null; var $this = $(this); var repeat = setInterval(ani, TIME); function ani() { var bpx = parseInt($this.css("backgroundPositionX")); //백그라운드의 현재 위치값 $this.css({ backgroundPositionX: "-=" + SECTION }); //반복되는 구간 만큼 백그라운드 이동...
-
Markdown code tag color
code tag color