움직이는 애니메이션 수평 막대 그래프
각종 막대그래프를 CSS만으로 구현하는 포스팅을 했는데 움직임이 있는 애니메이션 수평 막대 그래프가 필요한 경우가 있지 않을까? 이런 효과가 있으면 왠지 있어보여서 좋겠다는 생각에 또다시 폭풍 검색으로 찾았습니다.
화면 로딩시 회색의 막대 그래프가 왼쪽에서 오른쪽으로 %만큼 채워지는 것으로 거창하게 애니메이션 효과라고 하기에는 많이 부족하지만 CSS와 Jquery만으로 이정도까지 구현한다는것은 실로 놀랍지 않습니까? 그것도 공짜로요...ㅎ
하여 오늘은 움직이는 애니메이션 수평 막대 그래프에 대해서 알아보겠습니당.
먼저 아래는 위와 같은 화면을 만들수 있는 Html 소스 입니다. (CSS도 포함되어 있습니다.)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
ul, li, p { margin: 0; padding: 0; }
.graph { width: 90%; list-style: none; }
.graph li { position: relative; padding: 1px 0; white-space:nowrap; }
.graph li span { display: inline-block; position: relative; height: 20px; line-height: 20px; background: #eee; }
.graph li em { position: absolute; top: 0; right: -45px; font-family: arial; color: #000; }
</style>
</head>
<body>
<h1>애니메이션 수평 막대 그래프</h1>
<ul id="g1" class="graph">
<li>0 : <span style="width: 0%"><em>0%</em></span></li>
<li>1 : <span style="width: 20%"><em>20%</em></span></li>
<li>2 : <span style="width: 40%"><em>40%</em></span></li>
<li>3 : <span style="width: 60%"><em>60%</em></span></li>
<li>4 : <span style="width: 80%"><em>80%</em></span></li>
<li>5 : <span style="width: 100%"><em>100%</em></span></li>
</ul>
<hr />
<ul id="g2" class="graph">
<li><span style="width: 50%"><em>50%</em></span></li>
<li><span style="width: 5%"><em>5%</em></span></li>
<li><span style="width: 60%"><em>60%</em></span></li>
<li><span style="width: 70%"><em>70%</em></span></li>
<li><span style="width: 99%"><em>99%</em></span></li>
</ul>
</body>
</html>
그리고 위 소스 하단에 밑에 Jquery 소스를 넣으시면 완성!!!
<script type="text/javascript">
drawGraph(document.getElementById("g1"));
drawGraph(document.getElementById("g2"));
function drawGraph(obj) {
this.gages = obj.getElementsByTagName("span");
this.values = obj.getElementsByTagName("em");
for(var i = 0; i < this.gages.length; i ++) {
(function(idx) {
var current_value = 0;
var gage_object = this.gages[idx];
var gage_value = this.values[idx];
var gage_width = parseInt(gage_object.style.width);
var timer = null;
timer = setInterval(function() {
if(current_value < gage_width) {
current_value += Math.ceil((gage_width - current_value) / 15);
gage_object.style.width = current_value + "%";
gage_value.innerHTML = current_value + "%";
} else {
clearInterval(timer);
}
}, 10);
})(i);
}
}
</script>
자~ 이제 적용해서 돌려보시면 와~하고 감탄사가 나오시지요...ㅎ
사실 이건 제가 만든게 아니고요...퍼와서 조금 수정한거에요...;;;
예전에 프로젝트에 필요해서 찾은건데 어느분인지 기억이 안나고 출처를 모르겠네요.
만들어주신분에게 감사의 박수를 보냅니다.^^
끝까지 읽어주셔서 감사합니다.
오늘도 행복한 하루 되세요~~~^^
화면 로딩시 회색의 막대 그래프가 왼쪽에서 오른쪽으로 %만큼 채워지는 것으로 거창하게 애니메이션 효과라고 하기에는 많이 부족하지만 CSS와 Jquery만으로 이정도까지 구현한다는것은 실로 놀랍지 않습니까? 그것도 공짜로요...ㅎ
하여 오늘은 움직이는 애니메이션 수평 막대 그래프에 대해서 알아보겠습니당.
먼저 아래는 위와 같은 화면을 만들수 있는 Html 소스 입니다. (CSS도 포함되어 있습니다.)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
ul, li, p { margin: 0; padding: 0; }
.graph { width: 90%; list-style: none; }
.graph li { position: relative; padding: 1px 0; white-space:nowrap; }
.graph li span { display: inline-block; position: relative; height: 20px; line-height: 20px; background: #eee; }
.graph li em { position: absolute; top: 0; right: -45px; font-family: arial; color: #000; }
</style>
</head>
<body>
<h1>애니메이션 수평 막대 그래프</h1>
<ul id="g1" class="graph">
<li>0 : <span style="width: 0%"><em>0%</em></span></li>
<li>1 : <span style="width: 20%"><em>20%</em></span></li>
<li>2 : <span style="width: 40%"><em>40%</em></span></li>
<li>3 : <span style="width: 60%"><em>60%</em></span></li>
<li>4 : <span style="width: 80%"><em>80%</em></span></li>
<li>5 : <span style="width: 100%"><em>100%</em></span></li>
</ul>
<hr />
<ul id="g2" class="graph">
<li><span style="width: 50%"><em>50%</em></span></li>
<li><span style="width: 5%"><em>5%</em></span></li>
<li><span style="width: 60%"><em>60%</em></span></li>
<li><span style="width: 70%"><em>70%</em></span></li>
<li><span style="width: 99%"><em>99%</em></span></li>
</ul>
</body>
</html>
그리고 위 소스 하단에 밑에 Jquery 소스를 넣으시면 완성!!!
<script type="text/javascript">
drawGraph(document.getElementById("g1"));
drawGraph(document.getElementById("g2"));
function drawGraph(obj) {
this.gages = obj.getElementsByTagName("span");
this.values = obj.getElementsByTagName("em");
for(var i = 0; i < this.gages.length; i ++) {
(function(idx) {
var current_value = 0;
var gage_object = this.gages[idx];
var gage_value = this.values[idx];
var gage_width = parseInt(gage_object.style.width);
var timer = null;
timer = setInterval(function() {
if(current_value < gage_width) {
current_value += Math.ceil((gage_width - current_value) / 15);
gage_object.style.width = current_value + "%";
gage_value.innerHTML = current_value + "%";
} else {
clearInterval(timer);
}
}, 10);
})(i);
}
}
</script>
자~ 이제 적용해서 돌려보시면 와~하고 감탄사가 나오시지요...ㅎ
사실 이건 제가 만든게 아니고요...퍼와서 조금 수정한거에요...;;;
예전에 프로젝트에 필요해서 찾은건데 어느분인지 기억이 안나고 출처를 모르겠네요.
만들어주신분에게 감사의 박수를 보냅니다.^^
끝까지 읽어주셔서 감사합니다.
오늘도 행복한 하루 되세요~~~^^
-MS.jpg)
댓글
댓글 쓰기