본문 바로가기
728x90
반응형

분류 전체보기298

[CSS3]카드를 한장만 뒤집을 수 있는 카드 뒤집기 효과 구현하기 카드의 앞면과 뒷면을 겹쳐두고 rotate를 위용해 뒤집는것처럼 보이게 합니다. 뒷면은 처음부터 90도 돌려져있고 앞면이 90도 돌아가고 난 후 뒷면이 다시 90도 되돌아오면 뒤집어 지는것처럼 보입니다. 하나를 뒤집으면 뒤집어져있던 다른 카드는 다시 되돌아오도록 합니다. 이때 다시 원위치로 되돌아오는 카드는 전체적으로 뒤면이 돌고 다시 앞면이 돌아나오는것이 아닌 뒷면이 없어지고 앞면이 돌아서 나오는듯하도록 구현합니다. See the Pen 카드뒤집기 효과 구현하기 by gahyun (@gahyun) on CodePen. 2019. 4. 17.
[@keyframes/CSS3] animation ease linear steps 값의 차이 animation-timing-function: linear; 를 사용하면 끊김없이 자연스럽게 계속해서 돌아간다 무한으로 자연스럽게 360도 회전하는 애니메이션 구현할 수 있다. animation-timing-function값은 아래와 같이 설정할 수 있고, 다음의 결과도 아래에서 확인 가능하다. /* 진행되는 동안의 속도에 관한 설정 기본값 ease ease : 천천히 시작되고 속도가 줄어들면서 끝난다(속도차이 매우 미세) ease-in : 천천히 시작 ease-out : 빠르게 시작 ease-in-out: 빠르게 시작되어 평균속도 유지 (속도차이큼) linear : 일정한 속도로 진행 step-start : 시작하자마자 순간적으로 바뀜 (아래에서는 시작과 끝이 같아서 확인불가) step-end : 시.. 2019. 4. 17.
[JAVASCRIPT/JQUERY] 문자열(string)관련 함수 var 문자열1 = "hello" var 문자열2 = "world" concat : 문자열 이어 붙이기 문자열1을 문자열2와 이어붙이는데 그 사이에 !를 넣어 붙인다. 문자열1.concat("!", 문자열2); >> 결과 hello!world indexOf : 주어진값과 일치하는 첫번째 인덱스 일치값이 없으면 -1 문자열1.indexOf("l"); >> 결과 2 replace : 문자열 교체하기 var p = 'hello Test Code hello Wolrd'; var regex = /hello/gi; console.log(p.replace(regex, 'change')); //정규식을 이용할경우 전체 문자열을 교체한다. /* >>결과 : change Test Code change Wolrd */ co.. 2019. 4. 16.
[JAVASCRIPT/JQUERY] 배열(Array)관련 함수 var 배열1 = ["1","2","3","12","13"]; var 배열2 = ["a","b","c"]; concat : 두개의 배열을 하나의 배열로 이어주는 함수 배열3 = 배열1.concat(배열2); >> 배열3의 결과 : ["1","2","3","12","13","a","b","c"] filter : 조건에 맞는 배열의 요소를 모아 새로운 배열로 만들어 반환한다. //filter에 사용할 조건함수 function filterFun(val) { return val >= 10; } 배열3 = 배열1.filter(filterFun); >> 배열3의 결과 : ["12","13"] find : 조건에 맞는 배열의 요소 중 첫번째 값을 반환한다. function filterFun(val) { return .. 2019. 4. 16.
728x90
반응형

티스토리툴바