본문 바로가기

코딩

 (37)
[CSS] 3개의 점을 이용한 로딩 아이콘 GIT : https://github.com/nzbin/three-dots DEMO : https://nzbin.github.io/three-dots/ 출처 : http://rwdb.kr/three-dots/
[CSS] 마우스오버로 틸트효과 내기 (hover tilt effect) 틸트 효과는 javascript로 제작하는 경우가 많다. ( ex 플러그인 : https://gijsroge.github.io/tilt.js/ ) 하지만 하단 css로도 효과를 낼 수 있다. 각각의 hover point에 box-contents를 다른 스타일의 모션으로 적용되게 구현 * 참고문서 http://rwdb.kr/hover_tilt/
패럴랙스 스크롤 관련 # 스크롤에따라 움직임에 따라 모션시작 (css3) ie10
[입문] TWEENMAX 트윈맥스 배우기 4 - easing easing은 jQuery Animation에서 볼수 있는 메소드이다.easing Function은 매개변수의 변화율을 시간이 지남에 따라 정하는 것으로,지정한 값의 속도로 움직이게 된다. * easing 종류 트윈맥스는 이 easing을 쉽게 구현하기 위한 페이지가 있으므로 하단 링크를 통해예시, 실행을 해본 뒤 코드를 복사해서 지정을 하면 된다. https://greensock.com/docs/Easing * 그래프형태 * 시계형태 * 박스형태
[입문] TWEENMAX 트윈맥스 배우기 3 - 변수 기본 구문// TweenMax.to(target:Object, duration:Number, variables:Object):TweenMax target : Object - 오브젝트 duration : Number - tween 시간 /(초) variables : Object - 객체의 모든 속성 VARIABLES delay : Number - 지연시간 ease : Function - 따로 ease 클래스는 없나 봅니다. 상단에 fl.motion.easing.*; 한줄 추가 해주시고 Tween Class처럼 쓰면 됩니다. Default-Regular.easeOut easeParams : Array - 직접 ease을 만들어서 쓸수 있습니다. 방정식이 있겠죠? 전 패스;;; autoAlpha : Numbe..
[입문] TWEENMAX 트윈맥스 배우기 2 - 메서드 KEY METHODS- 기본 메서드 TweenMax.to : this 속성에서 지정한 속성까지 TweenMax.from : 지정한 속성에서 this 속성까지 TweenMax.fromTo : from에서 지정한 속성에서 to에서 지정한 속성까지 ex) TweenMax.fromTo(target, duration, {from vars}, {to vars}); TweenMax.allTo / TweenMax.allFrom : for문 없이 여러 target을 동시에 적용 기본 구문: TweenMax.allTo(targets:Array, duration:Number, vars:Object):Array ex) TweenMax.allTo([mc1, mc2, mc3, mc4, mc5], 1, {y:"100", alpha..
[입문] TWEENMAX 트윈맥스 배우기 1 - 기본 평소 CSS Transition, Animation으로 HTML 애니메이션 작업을 많이 하는 편이었는데, 이벤트성 페이지에선 작업이 많을경우 소스가 길어지는것도 있고 복잡해져 한계가 있다. jquery animation 역시 부드럽게 보이지 않을 때도 있으므로, 애니메이션 라이브러리인 TWEENMAX로 처리하는게 좋을것으로 판단하여 트윈맥스 공부를 시작하고자 사용법 포스팅을 시작하였다. 트윈맥스는 greensock 에서 만든 라이브러리로 https://greensock.com/ 위 사이트에 접속하여 다운을 받거나 cdn을 연결해주면 사용이 가능하다. - 기본 템플릿.to() 트윈맥스에서 가장 기본적으로 사용하는 것은 TweenMax.to() 이다. .to()는 일반적으로 .animate() 라고 생각하면..
JAVASCRIPT 공부 1. JQUERY와 함께 사용할때 [0] 을 붙이는 이유? $(element) = JQUERY$(element)[0] = JAVASCRIPT [0]을 붙여 자바스크립트 형태로 만드는 이유는 객체로 사용하기위함(ex : offset, length 등 자바스크립트 메서드를 사용해야할때 ) 2. 변수 = var elemant배열(ARRAY) = [ ]객체 = { } * 자료형 문자열(String) 문자열은 데이터에 문자를 저장하는 겁니다.var string = "string" // 큰 따옴표 var string2 = 'string' // 작은 따옴표 var string3 = "'string'" // 작은따옴표가 문자열에 들어있으면 큰따옴표로 감쌉니다. var string4 = '"string"' // 반대의 ..
[CSS] background 색상값 지정 css 색상값을 입력할 때 다음 색상의 단위 사용 가능 1. 색상 이름 (red, black, white 등 …) 2. rgb (red, green, blue) 값 3. rgba (red, green, blue, alpha) 값 4. hsl (hue, saturation, lightness) 값 5. hsla (hue, saturation, lightness, alpha) 값 1. RGB #f00#ff0000rgb(255,0,0)rgb(100%, 0%, 0%) - 위 색상은 모두 같은 색상 - 16진수는 3자리나 6자리로 가능 - #rgb는 #rrggbb와 같음 (예 : #fb0 = #ffbb00, #fff = #ffffff) 또한 RGBA의 alpha는 투명도값으로 0.0 ~ 1.0 사이로 사용 가능 ..
[jquery] 이미지 파일명 숫자에 따른 애니메이션 효과 이미지 파일명을 숫자로 순서를 나누어애니메이션 효과를 표현해야하는 경우가 있다. 1. 파일명 변경 프로그램으로 파일명을 편하게 바꾸자 아래 파일을 다운로드 하세요. DarkNamer 8216.exe [변경취소] - 작업한 내용을 취소[목록지우기] - 드래그 한 파일 목록 지우기[직접바꾸기] - 파일 한개씩 입력한 파일명으로 변경[목록정렬] - 원하는 정렬순으로 정렬[경로명앞에] - 폴더이름을 파일이름 앞에 추가합니다.[경로명뒤에] - 폴더이름을 파일이름 뒤에 추가합니다.[경로통일] - 파일목록에 있는 파일들을 한 폴더명으로 통일합니다.[확장자삭제] - 확장자를 삭제합니다.[확장자추가] - 확장자를 입력한 글자로 추가합니다.[확장자변경] - 확장자를 변경합니다. 2. setInterval 을 응용하자 va..

티스토리툴바