애니메이션을 이용한 가로 막대그래프(스킬바)

오랜만에 포트폴리오 포스팅을 해볼까 합니다.

포트폴리오에 빠질 수 없는 스킬 바

바 형식이 아니더라도 나의 스킬을 표현할 수 있는 방법들은 다양하지만 이번 포스팅을 막대그래프를 활용한 스킬 바를 코딩을 해볼까 합니다.

제가 코딩을 하는 건 아니고 괜찮은 소스가 있어서 소개를 시켜드릴라고 합니다.

저의 포트폴리오에 사용도 되었던 막대그래프입니다.

 

막대그래프

포트폴리오에 스킬 바를 어떻게 하면 표현할 수 있을지 고민을 하다가 이런 그래프를 넣어야겠다 해서 많은 그래프나 도형들을 찾아봤는데 다들 소스들이 어렵고 헷갈려서 사용하기 좀 어려웠던것들은 다 패스를 하고 그래도 해당 소스는 수정하기도 편하고, 디자인도 괜찮고 해서 사용하게 되었습니다.

 

해당 소스는 아래의 링크에 있습니다.

https://jsfiddle.net/kkyo/3jhr2x9e/4/

Edit fiddle - JSFiddle - Code Playground

 

HTML과 CSS. JavaScript 3가지의 소스로 제작이 된 막대그래프입니다.

소스들을 사용하고 하는 부분에 추가를 하여서 원하는 모양대로 디자인 조금 수정하고, 내용들도 수정하면 멋진 나만의 스킬바를 만들 수 있겠죠??

 

소스를 한번 같이 봐보면서 수정해야 하는 부분들을 살펴봅시다

<div class="zt-span6 last">
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3><strong>진행율 바</strong></h3>
<div class="zt-skill-bar"><div data-width="88" style="">쇼핑몰<span>88%</span></div></div>
<div class="zt-skill-bar"><div data-width="92" style="">웹사이트/모바일<span>92%</span></div></div>
<div class="zt-skill-bar"><div data-width="82" style=";">패키지<span>82%</span></div></div>
<div class="zt-skill-bar"><div data-width="85" style=";">C.I/B.I/네이밍<span>85%</span></div></div>
<div class="zt-skill-bar"><div data-width="60" style=";">HTML5/CSS3<span>60%</span></div></div></div>

HTML 소스는 복잡한 게 1도 없습니다.

스킬 바를 몇 개를 만들 건지 개수만큼 div를 만들어주시면 됩니다.

data-width값 보기만 해도 무슨 width값인지 알겠죠??

막대 바의 width를 의미합니다.

 

만약에 포토샵 88% 데이터를 넣으려면

<div class="zt-skill-bar"><div data-width="88" style="">포토샵<span>88%</span></div></div>

이렇게 한 줄씩 추가를 해주시면 되겠죠?? 

진짜 이 소스를 만들어주신 분께 진짜 감사하며 잘 사용하겠습니다.

스킬들을 추가를 해주시기만 하면 끝이 나겠죠??

 

색상이나 디자인을 수정하고 싶으면 css를 건드리면 되겠죠??

css도 수정이 어렵지 않습니다.

/*-------------------------------------------------------------------------*/
/*  Skill bar style
/*-------------------------------------------------------------------------*/
 
    .zt-skill-bar {
        color: #fff;
        font-size: 11px;
        line-height: 25px;
        height: 25px;
        margin-bottom: 5px;
 
        background-color: rgba(0,0,0,0.1);
 
        -webkit-border-radius: 2px;
           -moz-border-radius: 2px;
            -ms-border-radius: 2px;
                border-radius: 2px;
 
    }
 
    .zt-skill-bar * {
        webkit-transition: all 0.5s ease;
          -moz-transition: all 0.5s ease;
           -ms-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
               transition: all 0.5s ease;
    }
 
    .zt-skill-bar div {
        background-color: #ffc600;
        position: relative;
        padding-left: 25px;
        width: 0;
 
        -webkit-border-radius: 2px;
           -moz-border-radius: 2px;
           -ms- border-radius: 2px;
                border-radius: 2px;
    }
 
    .zt-skill-bar span {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        padding: 0 5px 0 10px;
        background-color: #1a1a1a;
 
        -webkit-border-radius: 0 2px 2px 0;
           -moz-border-radius: 0 2px 2px 0;
            -ms-border-radius: 0 2px 2px 0;
                border-radius: 0 2px 2px 0;
    }
 
    .zt-skill-bar span:before {
        content: "";
        position: absolute;
        width: 6px;
        height: 6px;
        top: 50%;
        left: -3px;
        margin-top: -3px;
        background-color: #1a1a1a;
 
        -webkit-transform: rotate(45deg);
           -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
                transform: rotate(45deg);
    }

이 스킬 바를 사용하시는데 크게 디자인은 수정할 건 없을 거 같고 색깔만 자신의 포트폴리오에 맞게 수정하시면 될 거 같아요

색상은 중간 정도에 있는 background-color만 변경하시면 될 거 같네요

마지막 부분 :before 부분은 검정 부분의 앞부분 세모를 만드는 부분인 거 같네요

이 부분도 자신의 포트폴리오에 맞게 수정하시면 괜찮을 거 같네요

 

(function( $ ) {
    "use strict";
    $(function() {
        function animated_contents() {
            $(".zt-skill-bar > div ").each(function (i) {
                var $this  = $(this),
                    skills = $this.data('width');
 
                $this.css({'width' : skills + '%'});
 
            });
        }
        
        if(jQuery().appear) {
            $('.zt-skill-bar').appear().on('appear', function() {
                animated_contents();
            });
        } else {
            animated_contents();
        }
    });
}(jQuery));

 

js는 딱히 수정할 부분은 없는 거 같아요ㅎㅎ

저는 수정 안 하고 추가만 했어요~ 제가 아직은 js는 약해서 먼 소린지 모르겠어서 그냥 감사합니다 하고 사용했습니다.

스킬 바의 값을 html에서 설정한 값을 넣어서 width값을 설정하는 거 같네요

다들 이 기능을 사용하기 위해서 이 차트를 사용하시려고 하시는 거니 js는 수정할 필요는 없습니다.ㅎㅎ

 

저의 스킬바

다들 자기의 기호에 맞게 수정하셔서 좋은 스킬 바를 만드셨나요??

저는 큰 변화는 없이 소스 그대로 사용하였습니다.

저의 포트폴리오가 노란색이 포인트 컬러여서 컬러도 잘 맞아서 큰 수정은 없었습니다.

 

해당 소스는 제가 작성한 소스가 아니어서 자세한 설명은 못 해 드렸네요

그래도 저희는 저희가 필요한 부분들만 수정을 해서 사용하면 되니까요 별 문제들은 없으셨죠??

 

 

 

 

 

그럼 저는 2000.

궁금하신 점이나 이해하기 어려운 부분은

댓글로 달아주시면 제가 친절하고 아는 선에서 알려드릴게요^^

 

 

 

 

 

 

댓글과 하트는 저에게 많은 힘이 됩니다 :)