JQuery

Progress Bar 01

결과

HTML

    <div class="progress-bar">
        <div class="bar"></div>
        <div class="num" data-num="100"></div>
    </div>

CSS

*{margin: 0; padding: 0;}
.progress-bar{position: relative; width: 1000px; height: 30px; margin: 3em auto; border: 5px solid rgb(206, 238, 234); border-radius: 20px;}
.progress-bar .bar{position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: turquoise; width: 0; border-radius: 20px;}
.progress-bar .num{padding: auto; position: absolute; top: 0; bottom: 0; right: 15px; font-size: 1.1em; color: rgb(0, 0, 0); line-height: 30px; font-weight: bold;}

script

let progressWrap=$('.progress-bar');
let progressBar=progressWrap.find('.bar')
let progressNum=progressWrap.find('.num')
let progressData=progressNum.attr('data-num');

progressBar.animate({width:progressData+'%'},2000);

setInterval(textAni, 1000/100);
function textAni(){
    let currentWidth=progressBar.width() / progressWrap.width() * 100;
    progressNum.text(Math.ceil(currentWidth)+'%')
}

변수는 감싸고 있는 .progress-bar 와 안에 .bar , .num 이 있고 .num의 안에 data-num이 있는데

let progressData=progressNum.attr('data-num');

progressData 로 만들었다.

progressBar.animate({width:progressData+'%'},2000);

progressBar 의 애니메이션은 progressData 의 width + '%' 의 값으로 만들어지고,
setInterval 메서드를 이용하여 함수를 만든다. textAni 라는 이름으로 만들고

 let currentWidth=progressBar.width() / progressWrap.width() * 100;

의 계산식을 만들면 '%' 가 나오게 된다.
ex ) progressBar.width() / progressWrap.width() 는 1000이다. * 100 즉
progressNum.attr('data-num'); / 1000 x 100 을 하면 나오는 '%' 이다.

progressNum.text(Math.ceil(currentWidth)+'%')

나머지 text에 넣으면 퍼센티지 숫자가 나타나게된다.

JQuery AnimateNumber

JQuery에서 직접 넘버를 구현하게하는 라이브러리도 있다.

1. animateNumber 또는 https://plugins.jquery.com/animateNumber/ 에 들어간다.

2. Download Now 를 클릭한다. 깃허브 페이지가 나오는데 Version 0.0.13 을 클릭하고 Source code를 눌러 다운로드 한다.
   (version 0.0.13 source code(zip) 다운로드)

3. jquery.animateNumber.min.js 파일을 JS파일에 넣고 script에서 불러준다.

<script src="./js/jquery.animateNumber.min.js" defer></script>

4. 코드를 붙여넣어준다.

var comma_separator_number_step = $.animateNumber.numberStepFactories.append(' %')
progressNum.animateNumber(
  {
    number: progressData,
    numberStep: comma_separator_number_step
  },2000
);

결과

동일하게 작동을 한다.

Progress Bar 02

각 따로 설정된 Progress Bar 만들기

결과

HTML

<div class="progress">
        <div class="progress-bar">
            <div class="bar"></div>
            <div class="num" data-num="80"></div>
        </div>
        <div class="progress-bar">
            <div class="bar"></div>
            <div class="num" data-num="50"></div>
        </div>
        <div class="progress-bar">
            <div class="bar"></div>
            <div class="num" data-num="90"></div>
        </div>
        <div class="progress-bar">
            <div class="bar"></div>
            <div class="num" data-num="70"></div>
        </div>
        <div class="progress-bar">
            <div class="bar"></div>
            <div class="num" data-num="100"></div>
        </div>
    </div>

CSS

*{margin: 0; padding: 0;}
.progress-bar{position: relative; width: 1000px; height: 30px; margin: 3em auto; border: 5px solid rgb(206, 238, 234); border-radius: 20px;}
.progress-bar .bar{position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: turquoise; width: 0; border-radius: 20px;}
.progress-bar .num{padding: auto; position: absolute; top: 0; bottom: 0; right: 15px; font-size: 1.1em; color: rgb(0, 0, 0); line-height: 30px; font-weight: bold;}

script

$('.progress-bar').each(function(){
    let progressWrap=$(this);
    let progressBar=progressWrap.find('.bar')
    let progressNum=progressWrap.find('.num')
    let progressData=progressNum.attr('data-num');

    progressBar.animate({width:progressData+'%'},2000);
    setInterval(textAni, 1000/100);
    function textAni(){
    let currentWidth=progressBar.width() / progressWrap.width() * 100;
    progressNum.text(Math.ceil(currentWidth)+'%')
    }
});

each문을 사용하여 변수를 담는다. this를 progressWrap에 담아서 this의 bar , num , data-num 값을 정하고 각 입력된 this의 값대로 실행되게 한다.

mobile page 구현

참고 https://modernizr.com/

HTML

<div class="phone">
        <div class="content">
            <iframe src="./youtube/index01_01.html" frameborder="0"></iframe>
        </div>
    </div>

script

let deviceAgent = navigator.userAgent.toLowerCase();

//모바일인지 아닌지 감지하는 코드
let isTouchDevice = Modernizr.touch ||
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  ||
deviceAgent.match(/(iemobile)/) ||
deviceAgent.match(/iphone/i) ||
deviceAgent.match(/ipad/i) ||
deviceAgent.match(/ipod/i) ||
deviceAgent.match(/blackberry/i) ||
deviceAgent.match(/bada/i));

if (isTouchDevice) {
    location.href='http://nuyhes.dothome.co.kr/mobile/youtube/index01_01.html'
  } else {
    // not-supported
  }

모바일인지 아닌지 감지하는 코드가 필요하다. 구글링을 통해 코드를 찾을 수 있다.
이렇게 설정 후 모바일로 저 url로 들어가면 아이폰의 이미지는 없이 딱 모바일 사이즈만큼의 유튜브 페이지를 볼 수 있다.