본문 바로가기
728x90
반응형

분류 전체보기298

[JAVASCRIPT/JQUERY] 그리드정렬 masonry 플러그인 높이가 다른 이미지 정렬하기(옵션값설정) https://masonry.desandro.com/ Masonry Install Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower: bower install masonry --save Install with npm: npm install masonry-layout Getting started HTML Include the Masonry .js file in your site. Masonry works on masonry.desandro.com 그리드 관련 플러그인 masonry를 이용해 높이가 다른 이미지를 정렬할 수 있습니다. $('.grid').masonry({ //grid 영역안에 있는 .. 2019. 4. 15.
[CSS3] button hover 애니메이션 버튼에 hover했을때 줄 수 있는 다양한 애니메이션을 구현해보았습니다. 단순하게 색이 채워지는 이벤트부터 내가 마우스를 올린 위치를 가져와서 시작지점으로 두고 색이 채워지는 효과 var currentX = e.pageX; var currentY = e.pageY; transform을 이용해 scale이나 rotate등을 이용해 효과를 구현하기도 했습니다. See the Pen hover animation by gahyun (@gahyun) on CodePen. See the Pen Untitled by gahyun (@gahyun) on CodePen. [CSS/CSS 응용] - [CSS] Button animation 버튼 애니메이션 효과 2019. 4. 15.
[JAVASCRIPT/JQUERY] jqueryUI effect 사용하기 https://jqueryui.com/effect/ Effect | jQuery UI Effect Apply an animation effect to an element. Click the button above to show the effect. view source 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 jqueryui.com jqueryUI effect를 이용해 입력창에 효과를 넣어봤습니다 . input text 영역에 아무것도 입력하지 않고 완료를 누를경우 오류를 보.. 2019. 4. 15.
[JAVASCRIPT/JQUERY] 남은시간 카운드다운 만들기 function remaindTime() { var now = new Date(); //현재시간을 구한다. var end = new Date(now.getFullYear(),now.getMonth(),now.getDate(),21,00,00); //오늘날짜의 저녁 9시 - 종료시간기준 var open = new Date(now.getFullYear(),now.getMonth(),now.getDate(),09,00,00); //오늘날짜의 오전9시 - 오픈시간기준 var nt = now.getTime(); // 현재의 시간만 가져온다 var ot = open.getTime(); // 오픈시간만 가져온다 var et = end.getTime(); // 종료시간만 가져온다. if(nt 2019. 4. 12.
728x90
반응형

티스토리툴바