GD 라이브러리를 활용하여 이미지 수정하기
2015-10-29
SVG와 CSS3 속성인 transition과 transform을 이용하여 버튼에 모션을 줍니다.
2015-05-11
Explanation
자바스크립트로 엘리먼트에 클레스를 부여하고 CSS3 속성인 transition과 transform을 사용하여 SVG의 line를 변형하고 모션을 줍니다. (이렇게 단순한 구조는 굳이 SVG를 사용하지 않고도 block요소의 엘리먼트로도 충분히 만들 수 있겠지만, SVG를 사용하는게 조금 더 시멘틱하지 않을까??)
2015.06.10 추가사항
인터넷 익스플로러(IE)에서는 SVG의 요소들의 transform, transition 등.. 의 스타일이 적용되지 않습니다,
그리하여 SVG가 아닌 블락요소로 만든 예제도 추가하였습니다.
예제 링크 : https://cheolguso.com/preview/svg/svg.html
소스보기
|
1 2 3 4 5 6 7 8 |
[HTML] <div class="navigation-button"> <svg xmlns="http://www.w3.org/2000/svg" width="65px" height="65px"> <line class="nav_bar_1" x1="19px" y1="26px" x2="47px" y2="26px" stroke="#fff" stroke-width="2px"></line> <line class="nav_bar_2" x1="19px" y1="33px" x2="47px" y2="33px" stroke="#fff" stroke-width="2px"></line> <line class="nav_bar_3" x1="19px" y1="40px" x2="47px" y2="40px" stroke="#fff" stroke-width="2px"></line> </svg> </div> |
|
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 |
[CSS] .navigation-button { position:absolute; width:65px; height:65px; top:40px; left:40px; background:#000; cursor:pointer; } .navigation-button svg { transform: rotate(0); -webkit-transform: rotate(0); transition:transform 1s; -webkit-transition:transform 1s; } .active.navigation-button svg { transform: rotate(270deg); -webkit-transform: rotate(270deg); } .navigation-button .nav_bar_1 { transform: rotate(0) translateX(0) translateY(0); -webkit-transform: rotate(0) translateX(0) translateY(0); transition: 0.5s; -webkit-transition: 0.5s; } .navigation-button .nav_bar_2 { opacity: 1; transform: translateX(0); -webkit-transform: translateX(0); transition: 0.3s; -webkit-transition: 0.3s; } .navigation-button .nav_bar_3 { transform: rotate(0) translateX(0) translateY(0); -webkit-transform: rotate(0) translateX(0) translateY(0); transition: 0.5s; -webkit-transition: 0.5s; } .active.navigation-button .nav_bar_1 { transform: rotate(45deg) translateX(13px) translateY(-26px); -webkit-transform: rotate(45deg) translateX(13px) translateY(-26px); } .active.navigation-button .nav_bar_2 { opacity: 0; transform: translateX(-5px); -webkit-transform: translateX(-5px); } .active.navigation-button .nav_bar_3 { transform: rotate(-45deg) translateX(-33px) translateY(6px); -webkit-transform: rotate(-45deg) translateX(-33px) translateY(6px); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
[JAVASCRIPT - jQuery] jQuery(document).ready(function(){ $(".navigation-button").on("click", function(){ if($(this).hasClass("active")){ $(this).removeClass("active"); }else{ $(this).addClass("active"); } }); }); |
2015.06.10 추가사항 – SVG를 사용하지 않고 만들기
|
1 2 3 4 5 6 7 |
<div class="navigation-button2"> <div class="button-icon"> <div class="nav_bar_top"></div> <div class="nav_bar_middle"></div> <div class="nav_bar_bottom"></div> </div> </div> |
|
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 55 56 57 58 |
.navigation-button2 {position:absolute; width:65px; height:65px; top:40px; left:200px; background:#000; cursor:pointer;} .navigation-button2 .button-icon { width:65px; height:65px; transform: rotate(0); -webkit-transform: rotate(0); transition:transform 1s; -webkit-transition:transform 1s; } .active.navigation-button2 .button-icon { transform: rotate(270deg); -webkit-transform: rotate(270deg); } .navigation-button2 .button-icon > div { position:absolute; height:2px; width:28px; background:#fff; left:19px; } .navigation-button2 .nav_bar_top { transform: rotate(0) translateX(0) translateY(0); -webkit-transform: rotate(0) translateX(0) translateY(0); transition: 0.5s; -webkit-transition: 0.5s; top:25px; } .navigation-button2 .nav_bar_middle { opacity: 1; transform: translateX(0); -webkit-transform: translateX(0); transition: 0.3s; -webkit-transition: 0.3s; top:32px; } .navigation-button2 .nav_bar_bottom { transform: rotate(0) translateX(0) translateY(0); -webkit-transform: rotate(0) translateX(0) translateY(0); transition: 0.5s; -webkit-transition: 0.5s; top:39px; } .active.navigation-button2 .nav_bar_top { transform: rotate(45deg) translateX(5px) translateY(5px); -webkit-transform: rotate(45deg) translateX(5px) translateY(5px); } .active.navigation-button2 .nav_bar_middle { opacity: 0; transform: translateX(-5px); -webkit-transform: translateX(-5px); } .active.navigation-button2 .nav_bar_bottom { transform: rotate(-45deg) translateX(5px) translateY(-5px); -webkit-transform: rotate(-45deg) translateX(5px) translateY(-5px); } |
|
1 2 3 4 5 6 7 8 9 10 11 |
jQuery(document).ready(function(){ $(".navigation-button, .navigation-button2").on("click", function(){ if($(this).hasClass("active")){ $(this).removeClass("active"); }else{ $(this).addClass("active"); } }); }); |
