Rev. 2.73

계속해서 미루어 오다가 이제서야 소개합니다. Transcorners는 대상 엘리먼트의 모서리에 라운드(또는 대각선) 효과를 부여하는 자바스크립트 효과입니다. 가볍기로 잘 알려진 mootools 자바스크립트 프레임웍을 기반으로 만들어 졌으며, 모든 브라우저에서 사용할 수 있도록 제작되었습니다. 아래는 Transcorners 사용해서 직접 그려본 라운드 효과와 예제입니다.

보시다시피 실시간에 가까운 라운딩이 가능하며 이미지로 디자인한 라운드에 버금가는 디테일을 보여줍니다. 무엇보다도 이미지의 로드를 줄여 한결 가벼운 웹사이트를 구축할 수 있다는 것이 가장 큰 장점이라 하겠습니다. 매우 탐나는 확장기능이라 Prototype.js에서 사용할 수 있도록 컨버전하였으며, 손 댄 김에 기능을 조금 확장했습니다. 1픽셀 이상인 보더의 처리가 가능하도록 하였으며(예제2와 같은 결과), 투명한 라운드를 사용할 수 있도록 했고, 어설픈 그림자 효과도 만들어 보았습니다. 잘 응용하면 드래그앤 드롭이 가능한 멋진 다이얼로그 윈도우도 만들수도 있겠습니다. 참고로, 위에서 실행 된 예제는 Prototype.js기반으로 돌린 것 입니다.

윈도우 테스트

※ 위 소스는 프로젝트 위키에서 다운로드 할 수 있습니다.
※ 라이브러리 이름이 Transcorners에서 Roundable로 변경되었습니다.

Comments

Got something to add? You can just leave a comment.

  • 샤가넘버원 샤가넘버원

    좋은 자료 감사합니다.. 제가 제 홈2에 트랙백 주소를 가져다 글을 작성했는데.. 엮인글 리스트에 안나타네용.. 싸이 문제인건지.. 어쩐건지;; 홈2 새로 생겨서 함 사용해보고 있는중긴 한데.. 후..

    reply edit

  • 이벤트 이벤트

    안녕하세요... 잘지내시죠. 다음 주에 책걸이 할까요^-^
    간단하게 대충 훓어 본 느낌을 적어봅니다. 발전을 위해서 ^-^

    우선, none prototype.js 형태를 prototype.js로 바꾸는 과정에서 중요한 부분만 변경한 것으로 생각됩니다. 그래서 아직 정제되지 않는 부분도 있는 것 같아 적어보았습니다. 이 또한 모든 것이 아닙니다. 멋있는 도전에 박수를 보냅니다.
    30라인: this.el = $(el);을 먼저하면 25, 26라인에서 this.el을 사용할 수 있습니다. 즉 $(el)을 반복하지 않아도 됩니다.

    33라인: RegExp 사용에 대한 검토를...

    background : '#000',
    display : 'block',
    overflow : 'hidden', // For IE6
    height : '1px'
    위의 코드가 중복되고 있습니다. 리팩토링을....

    52라인 : var s = function(property, dontParse) {
    오브젝인 이름인 s가 너무 짧으므로 가독성을 위해 의미를 부여하는 것도 좋을 듯 합니다.

    67 라인의 for(in) 루프를 each() 메서드 또는 다른 메서드로 바꾸면 어떻게 될까요? 원래 소스 코드가 prototype.js를 사용하지 않았고, 이를 그냥 둔 것으로 생각됩니다만, 몇 곳에 for(in)을 사용하고 있습니다.
    for (side in sides){
    styles['margin-' + side] = "-" + (s('padding-'+side) + s('border-'+side+'-width')) + "px";
    }

    전체 코드를 OOP 관점에서 리팩토링에 도전하고 싶은 생각은 어떠세요... 조금만 손보면 될 것 같기도 합니다.

    미묘한 부분은 있지만, prototype.js를 매우 멋있게 사용한 모습입니다. 박수를 보냅니다.

    reply edit

  • 오, 감격의 피드백 감사드립니다.

    mootools 프레임웍 또한 prototype.js를 일부분 개조한(?) 형태로 사용하고 있어, 메서드나, 문법의 적지않은 부분이 비슷합니다. 때문에 최대한 원작자의 소스에 손을 대지 않는 범위에서 작업을 진행하다보니 어려운점이 있더군요. 더불어 이정도의 기능을 4킬로바이트 만으로 구현한 노고를 무너트릴수도 없는 노릇이였습니다.(결국 5킬로바이트로 늘려버리고 말았지만요;)

    곧바로 지적하신 부분을 수정해보았습니다. 먼저 설명하신 this.el이 비효율적으로 사용되는 부분을 우선 수정하였습니다. 33라인의 RegExp는 mootools에서 제공하는 메서드로서 조건을 검사하여 반환하는 역할을 합니다.(굳이 RegExp를 사용하는 이유가 있어서일 것이라고 생각됩니다.) 스타일을 반복 지정하는 부분은 그림자 구현이 아직 완벽하지 않아 미완성인 체 이고요. 시간이 허락하면 backgroundColor에 값을 조작하여 도드라지는 효과까지 구현해 볼 생각입니다. 끝으로 52라인의 s함수또한 원작자가 지정한 부분이라 건드리지 않았습니다.

    힘이되는 댓글주셔서 다시한번 감사드립니다. ^^; 조금더 완성도를 높혀 보도록 하겠습니다.

    reply edit

  • 샤가넘버원 샤가넘버원

    혹시 지금 링크 걸려 있는 js파일로 제대로 작동이 되나요?? 제가 테스트 해보니까 둥근 모서리는 생기는데 그 뒤에 배경색이랑 border가 남아 있던데..

    reply edit

  • 대상 앨리먼트가 absolute 속성을 지니고 있으면 코너가 투명해집니다. float: left 속성을 가지고있어도 됩니다.

    reply edit

  • 첨부된 파일이 업데이트 되지 않았더군요. 실제 적용중인 자바스크립트 파일로 링크를 수정했습니다.

    reply edit

  • 안녕하세요. 제대로 실행하는 방법을 몰라서 -ㅁ- 질문드립니다. 파일을 받고 나서,
    head 사이에
    <script type="text/javascript" src="transcorners.js"></script> 넣고
    body 안에
    <script type="text/javascript">
    new Roundable('example1', { radius: 30 });
    </script>
    라고 넣었구요,
    <div id="example1" style="border:1px solid #a00; background:#fee; padding: 0 20px;">
    </div>
    이렇게 따라해 봤는데 테두리가 둥글게 되지 않아요. 왜죠?
    링크에 있는 transcorners.zip 압축만으로는 안되나요? Prototype.js 파일도 있어야 되는건지;;;
    초보의 앞길을 밝혀 주세요~. 소스는 잘 모르겠지만 꼭 한번 해 보고 싶어서요.....^ㅁ^;;;;

    reply edit

  • IE 5.5 에서 그래프가 깨집니다.
    ㅡ_ㅠ

    reply edit

Your Reaction Time!

captcha

avatar


예제1
//모든 코너에 반지름(radius) 30
new Transcorner( 'example1', { radius: 30 });
//background:#fee; border:1px solid #a00; 스타일 속성을 지님


예제2
//모든 코너에 반지름 10 (기본값)
new Roundable( 'example2');
//background:#4ff; border:2px solid #4bb; 스타일 속성을 지님

예제3
//상단 왼쪽 코너에만 반지름 20
new Roundable( 'example3', 'top left', { radius: 20 });

예제4
//상단 코너에만 반지름 10
new Roundable( 'example4', 'top');

예제5
//상단, 하단 오른쪽에 코너에 반지름 10 라인(cornerslinear transition)
new Roundable( 'example5', 'top, bottom right', { transition: Effect.Transitions.linear});