Jquery e.page, imagesloaded (학습 62일차 TIL)

210909 오늘은 예제를 통해 마우스의 움직임에 따라 순서에 해당하는 이미지를 보여줌으로 마치 동영상이 재생되는 효과와 로딩 페이지를 구현해 보았다.

$("body").on("mousemove",function(e){
  //변수 wid에 현재 브라우저의 넓이 저장 
  var wid = $(window).width();
  
  //변수에 화면상에 마우스 커서의 위치 저장
  var posX = e.pageX;
  
  // window 가로값에서 마우스의 위치는 몇%에 있는지?
  // 변수 percent에 200까지(사진의 갯수만큼)의 백분율 수치 저장
  var percent = Math.floor((posX/wid)*200);
  
  //해당 변수 값을 h3에 출력
  $("h3").text(percent);
  
  //현재 마우스 커서의 위치에 해당하는 이미지 순서만 보이도록 처리
  $("section > img").hide();
  $("section > img").eq(percent).show();
});

/* 로딩 페이지 */
// imagesloaded 플러그인을 활용
function imageProgress() {
  var $container = $('#progress'), // div
      $progressBar = $container.find('.progress-bar'), // span
      $progressText = $container.find('.progress-text'),

      imgLoad = imagesLoaded('body'),
      imgTotal = imgLoad.images.length, // body의 전체 이미지 갯수

      imgLoaded = 0, // 이미지 로딩한 숫자
      current = 0, // text에 들어갈 숫자

      progressTimer = setInterval(updateProgress, 1000 / 60);

  imgLoad.on('progress', function() {
    imgLoaded++;
  });

  function updateProgress() {
    var target = (imgLoaded / imgTotal) * 100; // bar width: 0~100%, %값으로 변환
    current += (target - current) * 0.1;

    $progressBar.css({ width: current + '%' });
    $progressText.text(Math.floor(current) + '%');

    if (current >= 100) {
      clearInterval(progressTimer);
      $container.addClass('progress-complete');

      $progressBar.add($progressText).delay(500).animate({opacity: 0}, 250, function() {
        $container.animate({ top: '-100%' }, 1000);
      });
    }

    if (current > 99.9) {
      current = 100;
    }
  }
}
imageProgress();