조회 수 26 추천 수 0 댓글 1
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<title></title>
 
<style>
    body {
        margin: 0;
    }
    div, header, footer {
        position: relative;
    }
     
    .pie {
        float: left;
        width: 200px;
        height: 200px;
        margin-right: 50px;
         
    }
     
    .pie:before {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0;
        bottom: 0;
        border: 30px solid #1abc9c;
        border-radius: 50%;
        transform: rotate(0deg);
        clip: rect(auto, 100px, auto, auto);
        transition: transform 1s linear;
    }
     
    .pie.rotate:before {
        transform: rotate(180deg);
    }
     
    .pie .cover {
         
        position: absolute;
        top: 0; left: 0;
        width: 50%; bottom: 0;
        background-color: #fff;
    }
     
    .pie .deg {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0;
        bottom: 0;
        border: 20px solid #1abc9c;
        border-radius: 50%;
        transform: rotate(0deg);
        clip: rect(auto, 100px, auto, auto);
         
        transition-property : transform;
         
        transition-timing-function: linear;
    }
     
    .pie .score {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
        color: #ccc;
        z-index: 999;
    }
    .pie .score:after {
        content: '%';
    }
    
    .pie-wrap {
        position: absolute;
        top: 1000px;
    }
     
    
</style>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
    
    
    $(window).scroll(function(){
        
        var scrollTop = $(window).scrollTop();
        
        if(scrollTop > 800) {
            pieAni( $(".pie").eq(0) );
            pieAni( $(".pie").eq(1) );
            pieAni( $(".pie").eq(2) );
            
        }
        
    });
     
     
    function pieAni($pie) {
         
        var score = $pie.attr("score");
         
        var duration = score / 50;
        var deg = score * 3.6 ;
         
        $pie.addClass("rotate");
        $pie.find(".deg").css("transition-duration", duration+"s");
        $pie.find(".deg").css("transform", "rotate("+deg+"deg)");
         
        var $cover = $pie.find(".cover");
         
        setTimeout(function(){
            $cover.fadeOut(0);
        }, 1000);
         
        
        if ($cover.css("display") == "block")
            increase($pie, 1, 1, score);
         
    }
     
    function increase($pie, start, next, end) {
         
        $pie.find(".score").text( next );
         
        var st = setTimeout(function(){
            if (next < end) {
                increase($pie, start, next+1, end) ;
            }
        }, 20  );
             
    }
 
});
</script>
     
</head>
<body>
    
    <div class="pie-wrap">
        <div class="pie" score="90">

            <div class="deg"></div>
            <div class="cover"></div>
            <div class="score">0</div>
        </div>
        <div class="pie" score="75">

            <div class="deg"></div>
            <div class="cover"></div>
            <div class="score">0</div>
        </div>

        <div class="pie" score="85">

            <div class="deg"></div>
            <div class="cover"></div>
            <div class="score">0</div>
        </div>
    
    
    </div>
    
    <section style="height: 3000px;"></section>
    

        
</body>
</html>





  • ?
    콘디쌤 2017.05.30 12:30
    124번줄
    if ($cover.css("display") == "block")
    increase($pie, 1, 1, score);
?

List of Articles
번호 카테고리 제목 글쓴이 날짜 조회 수
공지 디지털디자인A NCS (국가직무능력표준) - 디지털디자인 학습모듈 1 콘디쌤 2015.04.19 394
23 UI/UX 실무 모바일 앱 제작 - 상세 페이지 / 팝업 3 콘디쌤 2017.04.26 73
22 iOS Probably this is either a connection problem, or platform spec is incorrect. 1 콘디쌤 2017.04.26 45
21 iOS [팁05] GCM으로 Android, iOS 둘다 push notification 을 할 수 있다. 콘디쌤 2017.04.26 59
20 UI/UX 실무 모바일 앱 제작 - 입력폼 / 팝업 8 콘디쌤 2017.04.27 113
19 UI/UX 실무 모바일 앱 제작 - 동영상 / 마무리 3 콘디쌤 2017.05.01 95
18 UI/UX 실무 모바일 앱 제작 - 마무리 콘디쌤 2017.05.04 53
17 UI/UX 실무 설화수 brands 메뉴 1 콘디쌤 2017.05.10 34
16 UI/UX 실무 실무프로젝트 - 1일차 4 콘디쌤 2017.05.17 102
15 소스자료실 HTML안에 HTML 로드 하기 콘디쌤 2017.05.18 62
14 UI/UX 실무 실무프로젝트 - 2일차 3 콘디쌤 2017.05.18 57
13 UI/UX 실무 실무프로젝트 - 3일차 3 콘디쌤 2017.05.20 54
12 UI/UX 실무 실무프로젝트 - 4일차 4 콘디쌤 2017.05.23 77
11 UI/UX 실무 실무프로젝트 - 5일차 2 콘디쌤 2017.05.23 54
10 UI/UX 실무 실무프로젝트 - 6일차 6 콘디쌤 2017.05.25 24
9 UI/UX 실무 실무프로젝트 - 7일차 1 콘디쌤 2017.05.26 29
8 UI/UX 실무 실무프로젝트 - 8일차 1 콘디쌤 2017.05.29 23
7 소스자료실 자식이 absolute 일때 부모의 높이값 정하기 콘디쌤 2017.05.29 29
6 UI/UX 실무 실무프로젝트 - 9일차 1 콘디쌤 2017.05.29 27
» 소스자료실 특정 스크롤 위치에 도달하였을 때 파이차트 동작하기 1 콘디쌤 2017.05.30 26
4 UI/UX 실무 실무프로젝트 - 10일차 1 콘디쌤 2017.05.30 27
Board Pagination Prev 1 ... 100 101 102 103 104 105 106 107 108 109 Next
/ 109