서클 타이머

by hohoya33

HTML

<div class="text_container" style="opacity: 1;">
  <span style="width: 50px; opacity: 1; transform: matrix(1, 0, 0, 1, -25, 0);"></span>
  <h2><em style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">경</em><em style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">영</em><em style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">정</em><em style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">보</em></h2>
</div>


<div class="top_wave">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 21 150 24" preserveAspectRatio="none">
    <defs><path id="top_wave" d="M-160 44c30 0 58-11 88-11s 58 11 88 11 58-11 88-11 58 11 88 11 v44h-352z"></path></defs>
    <g class="parallax"><use xlink:href="#top_wave" x="10" y="0" fill="#fff"></use></g>
  </svg>
</div>






<ul class="video_step">
  <li class="on">
    <a href="#">
      <div class="icon mot4">
        <span class="step_bg_num step_bg_num1 cj_title_medium">CJ프레시웨이</span>
        <span class="step_circle"><canvas id="circle_canvas1"></canvas></span>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="icon mot4">
        <span class="step_bg_num step_bg_num2 cj_title_medium">360 영상체험</span>
        <span class="step_circle"><canvas id="circle_canvas2"></canvas></span>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="icon mot4">
        <span class="step_bg_num step_bg_num3 cj_title_medium">맞춤 솔루션</span>
        <span class="step_circle"><canvas id="circle_canvas3"></canvas></span>
      </div>
    </a>
  </li>
</ul>

CSS

.top_wave{position: absolute;bottom: -6px;left: 50%;right: 0;width: 2000px; margin-left: -1000px;height: 320px;}











.mot4 {
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}


.video_step {
  background: #000;
}
.video_step li a{position: relative;text-align: center;width:44px;height:44px;margin:0 auto;display: block}
.video_step li a .step_bg_num{  text-indent: -9999em; overflow: hidden; display:block;position:absolute;left:2px;top:2px;height:40px;width:40px;border-radius: 100px; -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;}
.video_step li a .step_bg_num:before{content:'';position:absolute;top:0px;left:0px;width:40px;height:40px;border-radius: 50%;
    background: #74c3cb;
    background-image: -webkit-linear-gradient(46deg, #72d49d, #74c3cb);
    background-image: -moz-linear-gradient(46deg, #72d49d, #74c3cb);
    background-image: -o-linear-gradient(46deg, #72d49d, #74c3cb);
    background-image: linear-gradient(46deg, #72d49d, #74c3cb);
    transform: scale(0);
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;}
    

.video_step li a .step_circle{display:block;position:absolute;width:44px;height:44px;border-radius: 50%;opacity: 0;}
.video_step li a .step_circle canvas{position:relative;z-index: 2;}
.video_step li.on a .step_bg_num:before,
.video_step li a:hover .step_bg_num:before{transform: scale(1)}
.video_step li.on a .step_bg_num{border-color: #88bb8a;background:#88bb8a }
.video_step li.on a .step_circle{opacity: 1;}

JavaScript

$(window).scroll(function(e) {
        if($('body').hasClass('main')){return;}
        var scrTop = $(window).scrollTop();

        if($('.top_wave').length>0){
            var min_wave = $('.section_top').hasClass('full')?0: 0;
            var max_wave =min_wave+$('.top_wave').innerHeight();
            var per = (scrTop-min_wave)/(max_wave-min_wave);
            per = (per < 0)?0:(per>1)?1:per;

            var plus = $('#contents .section_top').hasClass('first')?90:0
            TweenMax.to($('.top_wave g'), 0.4, {x: per * 80+plus, ease: Quad.easeOut});

        }

        if($('.text_container').length>0) {
            var text_container_pos=$('.section_top .text_container').offset().top;
            var max_tit = $('.section_top').hasClass('full')?text_container_pos:text_container_pos-120;
            var per_t = scrTop / max_tit;
            per_t = (per_t < 0) ? 0 : (per_t > 1) ? 1 : per_t;
            TweenMax.to($('.text_container'), 0.2, {autoAlpha: 1 - per_t, ease: Quad.easeOut});
        }

    });

    var $title = $('.text_container').not('.nomotion').find('h2');
    function textSetMotion(){

        var $text =$title.text(), len = $text.length, value='';
        for(var i=0;i<len;i++){
            var char = $text.charAt(i);
            value += '<em style="translateX('+(i*20+20)+'px)">'+(char)+'</em>';
        }
        $title.html(value);
        $title.find('em').each(function(i,t){
            TweenMax.set($(this),{opacity:0,x:(50)})
        })
        $('.text_container').css('opacity',1);

    }
    function textInMotion(){
        $title.find('em').each(function(i,t){
            TweenMax.to($(this),0.8,{delay:i*0.05+0.5,x:0,opacity:1,ease:Cubic.easeOut})
        });
    }
    textSetMotion();












;(function(global) {
    function CirCleProgress(_target, _duration, _percent,_callback, _filldirection, _idx) {
        this.ctx = document.getElementById(_target).getContext('2d');
        this.canvas = document.getElementById(_target);
...